0

我通过查看其他人的代码来学习开发，所以我不太擅长术语。最近我一直在这样写我的 JS/Jquery：

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

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

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

4

4 回答 4

1

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

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

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

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

还有他的一篇高级文章：

http://addyosmani.com/largescalejavascript/

于 2013-10-09T06:28:48.397 回答
0

我猜你想知道这个ready功能。为了理解它是如何工作的，您必须知道当您将 HTML 页面加载到浏览器中时，HTML 结构会变成一个名为“DOM”（文档对象模型）的 javascript 树。在您的示例中，DOM 是通过名为 的变量引用的document。要填充此树，必须将每个标记初始化为 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 树的方式与浏览文件资源管理器的方式相同。

于 2013-10-09T05:18:06.383 回答
0

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

于 2013-10-09T04:19:30.063 回答
0

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

您的代码的第二部分遵循称为对象字面量的标准，这是一种遵循键-> 值原则的 JavaScript 方法

于 2013-10-09T04:28:51.240 回答