在JavaScript对象中包装DOM元素

我已经注意到我一直在编写的 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
};

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

解决方法

您可能对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/(更多信息)

所有人都说,我不知道你最终的目的是什么,也许这对你的目的来说有点多了(考虑到我要把一个完整的其他图书馆扔给你),但想到它可能至少会激起你的兴趣.

在JavaScript对象中包装DOM元素

解决方法

相关文章