javascript - 将元素保存为对象属性是个好习惯吗？

Question

我正在编写一个小型 JavaScript 框架，以实现类似于 Backbone 的有趣和可能的实现(因此是标签)。我已开始将元素保存为对象属性，如下所示。我不确定我是否见过这样做，所以我很好奇这是否会导致任何问题。

类似地，如果模块依赖于其他模块，我会以......另一个对象的形式在对象顶部列出这些模块。

我想要一种方法来列出依赖项(页面元素或 JavaScript 模块)并预先检测任何问题。这与依赖注入(inject)有类似(不同)的好处。

这是一个关于此的具体问题code review帖子进一步解释了该框架的工作原理。

/*MUserTry
**
**
**         
*/
$A.modelAjax({
    Name:       'MUserTry',
    S:          {
                    DynSma: SDynSma,
                    DynTwe: SDynTwe,
                    DynArc: SDynArc,
                    AniFlipPage: SAniFlipPage,
                    ClientStorage: SClientStorage
                },
    E:          {
                    but: $A('#ut_but')[0]
                },
    J:          {
                    box: $('#ut_box')
                },
    init: function () {
        var pipe = {}, 
            this_hold = this;
        this.J.box.draggable();
        this.E.but.addEventListener("click", function () {
            pipe = $A.definePipe(this_hold.Name);
            $A.ajaxMachine(pipe);
        }, false);
    },
    pre: function (pipe) {
        pipe.page.email = this.e_button.getAttribute('data-email');
        pipe.proceed = true;
    },
    post: function (pipe) {
        this.S.ClientStorage.setAll(pipe.server.smalls);
        this.S.DynSma.run(pipe.server.smalls);
        this.S.DynArc.run(pipe.server.arcmarks);
        this.S.DynTwe.run(pipe.server.tweets);
        this.S.AniFlipPage.run('ma');
    },
    finish: function (pipe) {
        $A.log(pipe);
    }
});

Answer 1

好吧，首先让我提出强制性的“重新发明轮子永远不会得到更好的轮子”警告。无论您想要实现什么目标，如果使用现有的库，几乎肯定会取得更大的成功。即使您有充分的理由创建自己的库，至少查看现有的库仍然会让您受益匪浅。

但是...也许您只是从这个项目中获得乐趣，而查看其他项目并不有趣，因此您不会这样做。很公平。

无论如何，如果您确实查看了 Backbone，您会发现此实践是 Backbone View 类的核心。 Backbone 中的每个 View 都有一个“el”和“$el”属性，它们引用 View 的原始 DOM 元素以及该元素的 jQuery 包装版本。

Backbone 没有真正的性能问题，因为 JS 中的变量/属性只是指针；换句话说，当您将对象的属性设置为元素时，您并没有复制该元素，您只是添加了对它的引用(换句话说，它更像是一个 A 标签，而不是而不是一个全新的文档)。

Backbone 确实有一次出现问题(您的框架也会出现问题)，那就是引用过时了。换句话说，如果您只是从页面中删除元素 X，浏览器将停止为其使用内存(最终通过垃圾回收)。但是，如果有一个对象指向该元素，它就不会被垃圾收集，因为任何带有引用的东西都不是“垃圾”。

因此，您需要注意的主要事情是确保这些对象:

A) 只要其元素被删除，就会被删除，或者

B) 当它们的元素被删除时，删除它们的引用(例如删除 obj.reference)

如果你不这样做，事情可能仍然会正常工作......直到你在创建/删除大量元素的页面上使用它，此时 Firefox 将开始弹出“此脚本已生效”跑的时间太长了，你真的确定要这样做吗？”消息。