将DOM元素包装在JavaScript对象中

Question

将DOM元素包装在JavaScript对象中

Mat*_*y F 7 javascript constructor dom javascript-objects

我已经注意到我一直在编写的JavaScript中的一个常见模式,并且想知道是否已经存在一种类似于最佳实践的模式？本质上,它是如何获取DOM元素并将其包装在内部/与JavaScript对象关联.以此示例为例,您需要在Web应用中使用过滤器.您的页面如下所示:

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

Run Code Online (Sandbox Code Playgroud)

然后你就像这样包装元素:

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

Run Code Online (Sandbox Code Playgroud)

和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
};

Run Code Online (Sandbox Code Playgroud)

这种方法叫做什么,最佳做法和注意事项是什么？

Answer 1

Ken*_*iro 2

您可能对 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（RE HTML 模板）
http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html（开始编写自己的小部件时有用的信息）
http://dojotoolkit.org/reference-guide/dijit/（更多信息）

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

归档时间：	14 年，7 月前
查看次数：	3690 次
最近记录：	12 年，6 月前