这是什么样的模式？

Question

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

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

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

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

Answer 1

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

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

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

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

还有他的一篇高级文章：

http://addyosmani.com/largescalejavascript/

Answer 2

也许您可以将其命名为Object Literal模式，就像Rebecca Murphey在她的文章中使用的那样。 但是，我不认为这种代码结构已被广泛采用为正式名称，但这似乎是适当的。

Answer 3

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

代码的第二部分遵循称为对象文字的标准，这是一种遵循key-> value原理的JavaScript方法

Answer 4

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

$(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树的方式与浏览文件浏览器的方式相同。