Question

我通过查看其他人的代码来学习开发，所以我对术语不是很了解。最近我一直用这种方式写JS / Jquery：

$(document).ready(function() {
    testingFunc.init();
});

var testingFunc = {
    $object: $('#object'),
    init: function() {
        var _that = this;
        console.log($object);
    }
}

有人可以告诉我这是否是某种形式？或者有人可以告诉我如何描述我上面做过的代码吗？

Answer 1

代码中表示的这种特殊样式是“ object literal ”模式。当您发现自己不需要将特定属性或方法设为私有时，它与“模块”模式略有不同。

在进入术语陷阱之前，您可能希望（原则上）理解Javascript模式是什么，然后确定那些在结构上最适合您项目的模式。

您可以从Addy Osmani的这本迷你书中深入了解：

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

他的一篇高级文章：

http://addyosmani.com/largescalejavascript/

Answer 2

也许你可以将它命名为Rebecca Murphey在她的文章中使用的Object Literal pattern。但是我不认为它被广泛采用作为这种代码结构的官方名称，但似乎是合适的。

Answer 3

第一部分是使用jQuery选择器，监听器“就绪”。这意味着附加到选择器和侦听器的回调函数将在文档（在本例中为浏览器窗口）准备好后运行（在Web术语中，这意味着页面完成加载时）。

代码的第二部分遵循一个名为object literal的标准，这是一种遵循key-＆gt; value

原则的JavaScript方法

Answer 4

我猜你想知道ready功能。为了理解它是如何工作的，你必须知道当你将HTML页面加载到浏览器中时，HTML结构将变成一个名为“DOM”（文档对象模型）的javascript树。在您的示例中，DOM通过名为document的变量引用。要填充此树，必须将每个标记初始化为javascript对象。完成此任务后，将引发“ready”事件，调用绑定到它的每个函数。总结一下：

$(document).ready(function () { testingFunc.init(); });
// translation : Once the DOM has been initialized, call "init".

关于您的代码，$('#object')尝试查询DOM树以查找id设置为“object”的节点（例如<div id="object">）。但是，该文档可能尚未完全初始化。因此，此查询可能会失败。为了避免这种风险，你应该这样做：

var testingFunc = {
    $object: null,
    init: function() {
        this.$object = $('#object');
        console.log(this.$object);
    }
}

您可以将DOM视为文件夹结构，其中每个文件夹和文件都是HTML标记。 jQuery以与浏览文件资源管理器相同的方式浏览DOM树。

这是什么样的模式？

4 个答案: