javascript - 在 JavaScript 对象中包装 DOM 元素

Question

我注意到我一直在编写的 JavaScript 中有一个常见的模式，并且想知道是否已经有一个模式可以定义类似于最佳实践的东西？本质上，它是如何获取 DOM 元素并将其包装在内部/将其与 JavaScript 对象相关联。以这个示例为例，您需要在 Web 应用程序中使用过滤器。您的页面如下所示：

<html>
<head></head>
<body>
    <div id="filter"></div>
</body>
</html>

然后你会像这样包装元素：

var myFilter = new Filter({
    elem: document.getElementById('filter'),
    prop: 'stacks-test',
    someCallback: function() {
        // specify a callback
    }
});

和 JavaScript（其中 spec 是传递给构造函数的对象）：

var Filter = function(spec) {
    this.elem = spec.elem;
    this.prop = spec.prop;
    this.callback = spec.someCallback;
    this.bindEvents();
};

Filter.prototype.bindEvents = function() {
    var self = this;
    $(this.elem).click(function(e) {
        self.updateFeed();
    };
};

Filter.prototype.updateFeed = function() {
    this.prop; // 'stacks-test'
    this.callback();
    // ...
    // code to interact with other JavaScript objects
    // who in turn, update the document
};

这种方法叫什么，最佳实践和注意事项是什么？

score 2 · Accepted Answer

您可能对 Dojo 的小部件库 Dijit 感兴趣 - 如果我正确理解了您的问题，它基本上可以满足您的要求，甚至更多。

在 Dijit 中，小部件本质上封装了 DOM 节点、其内容、定义其行为的任何 JavaScript 以及（单独导入）CSS 以设置其外观样式。

小部件有自己的生命周期、注册表和事件（包括许多简单地映射到小部件内节点上的 DOM 事件，例如myWidget.onClick可以有效地调用myWidget.domNode.onclick）。

小部件可以（但不是必须）将其初始内容定义在单独的 HTML 模板文件中，通过它还可以将模板内节点上的事件绑定到小部件方法，以及在小部件上设置引用特定的属性模板中的节点。

我在这里几乎没有触及表面。如果您想了解更多相关信息，可以从以下参考页面开始：

http://dojotoolkit.org/reference-guide/dijit/info.html
http://dojotoolkit.org/reference-guide/dijit/_Widget.html（所有小部件扩展的基础）
http://dojotoolkit.org/reference-guide/dijit/_Templated.html（重新编写 HTML 模板）
http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html（开始编写自己的小部件时的有用信息）
http://dojotoolkit.org/reference-guide/dijit/（更多信息）

总而言之，我不知道你最终的目标是什么，也许这对你的目的来说有点多（考虑到我正在向你扔一个完整的其他图书馆），但我认为它至少可能会激起你的兴趣.

score 1 · Accepted Answer

继续我对这个问题的评论，jQuery 是一个潜在的工作工具，因为它已经为你所追求的东西提供了一些基础。然而，话虽如此，它确实引入了它自己的复杂性，而且，并非所有的“jQuery 方式”都是平等的。我会建议一种使用 jQuery 作为“对象模型”的方法，但它可能适合也可能不适合您的需要。

第一件事。jQuery 的理念是您首先选择元素、使用$()或等效地开始一切jQuery()。所有操作在概念上都以此开始。与创建包装元素并保留对该包装器的引用的对象相比，这是一种稍微不同的思维方式，但本质上这就是 jQuery 为您所做的。调用获取$('#some-id')id 为“some-id”的元素并将其包装在 jQuery 对象中。

一种方法：编写“过滤器”插件。

用initFilter()jQuery 方法替换您的构造函数。您可以通过修改 jQuery 原型并使用 jQuery 对象作为包装器来做到这一点。jQuery 的原型被引用jQuery.fn，所以：

jQuery.fn.initFilter = function (prop, callback) {
    // Save prop and callback
    this.data('filter-prop', prop);
    this.data('filter-callback', callback);

    // Bind events (makes sense to do this during init)
    this.click(function () {
        $(this).updateFeed();
    });
};

然后做类似的事情updateFeed()：

jQuery.fn.updateFeed = function () {
    this.data('filter-prop');
    this.data('filter-callback')();
});

并像这样使用它：

$('#filter').initFilter(prop, callback);

请注意，updateFeed可以简单地内联到单击处理程序中，以防止对 jQuery 命名空间造成不必要的污染。但是，像这样使用 jQuery 的一个优点是，如果您稍后需要在对象上调用某个函数，则不需要保留对该对象的引用，因为 jQuery 将所有引用与实际元素联系在一起。如果您想以updateFeed编程方式调用，那么：

$('#filter').updateFeed();

然后将在正确的对象上调用。

一些需要考虑的事情

这种方法肯定有缺点。一个是我们使用保存元素的所有属性，.data()在作用于该元素的所有 jQuery 函数之间共享。我试图通过在属性名称前加上“filter-”来缓解这种情况，但根据对象的复杂性，这可能不合适。

此外，这种精确的方法可能不太适合需要大量操作的对象（即具有许多函数的对象），因为所有这些函数都对所有 jQuery 对象变得通用。有一些方法可以封装所有这些，我不会在这里介绍，但是 jQuery-ui 使用它们的小部件来做到这一点，我正在尝试在我正在创建的库中使用另一种替代方法。

但是，稍微退后一点，我首先建议使用 jQuery 的唯一原因是您的 Filter 对象似乎与 DOM 紧密相关。它将事件绑定到 DOM，它根据用户交互修改 DOM，基本上它似乎生活在 DOM 中，所以使用基于 DOM 的东西，即 jQuery。

javascript - 在 JavaScript 对象中包装 DOM 元素

2 回答 2

Related

Reference