design-patterns - Backbone.js DOM 元素引用方法

Question

我目前正在构建一个大型骨干应用程序，这是我的问题。如何应对 DOM 元素引用的最佳方式？现在，我只需在视图的初始化函数中找到将在未来访问的所有元素（表单和类似的东西），并将它们绑定到视图本身。这样我就不必每次需要与它们交互时都搜索这些元素。但实际上这些参考文献的数量增长很快。这是好方法还是我可以做得更好？提前致谢 ：）

代码示例：

initialize: function () {
    this.form1 = this.$el.find('.whatever');
    ...
    ...
}

Answer 1

应用$use方法.selector后将被缓存。

HTML：

<div data-container>
    <div data-something>smthng</div>
</div>

JS：

var View = Backbone.View.extend({
    el : '[data-container]',
    ui : {
        something : '[data-something]'
    },
    someFn : function () {
        this.$use(this.ui.something).css('background', '#999');
        return this;
    },
    $use : function (selector) {
        console.log(typeof this.ui[selector] === 'undefined' ? 'dom query' : 'already cached');
        var $selector = this.ui[selector] === selector ?
            this.ui[selector] :
            this.$(selector);

        return this.ui[selector] = $selector;
    }
});

new View().someFn().someFn().someFn();

演示：http: //jsfiddle.net/vpetrychuk/K7nmr/