Backbone源码研究 – Backbone.View


整个View的代码非常简洁,View构造逻辑也一目了然。

javascriptvar View = Backbone.View = function(options) {
    this.cid = _.uniqueId('view');
    options || (options = {});
    _.extend(this, _.pick(options, viewOptions));
    this._ensureElement();
    this.initialize.apply(this, arguments);
    this.delegateEvents();
};
  1. 生成唯一cid
  2. 合并参数列表
  3. 列表项目
  4. View的初始化
  5. 用户定义的初始化
  6. 事件处理

可以看到,最重要的代码,在于View的初始化。

javascript_ensureElement: function() {
    if (!this.el) {
        var attrs = _.extend({}, _.result(this, 'attributes'));
        if (this.id) attrs.id = _.result(this, 'id');
        if (this.className) attrs['class'] = _.result(this, 'className');
        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
        this.setElement($el, false);
    } else {
        this.setElement(_.result(this, 'el'), false);
    }
}

这段代码可以看出,如果实例化的时候有传入一个DOM节点,则绑定这个DOM节点,否则生成一个这样的DOM节点。

javascriptvar view = new View({
    el: $('body'),
    model: new Backbone.Model()
})

结语:嗯,Backbone.View真的好简单,没做什么事情。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>