【原创】backbone1.1.0源码解析之View

作为MVC框架，M(odel)  V(iew)  C(ontroler)之间的联系是必不可少的，今天要说的就是View（视图）

通常我们在写逻辑代码也好或者是在ui组件也好，都需要跟dom打交道，我们好讨厌在逻辑代码里面参杂dom的代码，特别是需要生产dom的代码，

因为这样的缺点：

1. 耦合，难于维护（虽然模版引擎能解决一些问题，但是事件的添加呢？）

2. 代码无法做到美观，节俭，感觉和dom参杂在一起就是一个字，乱！！

介于这样的缺点，Backbone提供了一个View类，用于构造对象，它可以做到一下几点：

1. 帮你创建dom，你只要负责去渲染这个dom就行了（我们用模板引擎就行dom的渲染就很合理）

2. 帮你为dom添加（代理）事件，所以无需自己去手动绑定事件啦，而只需要提供events的参数。

这样下来，上面的两个缺点基本都解决了～～

View(视图)

视图对象用来封装前端的dom元素，也就是说跟dom元素关联在一起，视图的改变即是对应dom元素的改变。

因此我们在创建视图类或者在构造视图对象的时候，我们需要传递dom元素，我们可以这样：

1. 构造视图对象时，传递el参数，可以是jquery对象，也可以是dom对象（前提是该dom元素在页面里面已存在）

var bookView = new Backbone.View({
    el : $('#id')    // jquery对象，或dom对象
});

 而接下来我们要做的就只是往这个dom元素里添加内容了，像这样：

initialize : function () {
    
    var tpl ='xxx';
    var data = {...};

    this.$el.html(_.template(tpl, data));
}

这里我们更建议你去使用_.template这样的的模板函数就渲染dom，会显得代码更节俭，美观

2. 创建视图类时，传递tagName（默认是div），让View来帮你创建dom元素

var BookView = Backbone.View.extend({

    tagName : 'span'
});
var bookView = new BookView({
    attributes : {
        'title' : 'xxx'  // span的标签的属性
    },

    id : 'demo'
});

记住最后render时要将这个元素append到页面里面去，因为这里的dom元素是通过tagName，Backbone在内部创建的，并未添加到文档流中去。

说到dom元素，当然就有事件，向click，hover等事件是必不可少的，有了事件才有了交互，有了交互才会有数据（model）的变化才会有dom（view）的更新。

所以接下来要说一下如何给已有dom添加事件

1. 在创建视图类的时候，可以通过events参数添加事件，像这样：

var BookView = Backbone.View.extend({

    tagName : 'span'，

    events : {

        'mouseenter' : function () {...},  // 事件，某一函数（this对象指向view实例）

        'click a.item' : 'say'  // 事件代理,为class为item的a标签代理，调用view对象的say方法

    },

    say : function () {
        console.log(this);
    }
});

注意：

     （1）Backbone的事件都是添加在视图关联的那个dom元素（el）上，那么该元素就有可能成为其子元素的事件代理元素（冒泡原理）

     （2）事件的回调函数中的this是该视图对象

     （3）'click a.item' 这里是一个事件代理，

     （4）回调函数如果不是函数，是字符串，那么会到view对象中获取对应的方法，想这里的say其实是viewObj.say

2. 当然我们也可以通过调用delegateEvents方法添加事件，像这样：

var bookView = new BookView(...);

bookView.delegateEvents({

    'click' : function () {...},

    'click a.item' : 'say'
});

但是这里要注意的是：每次调用这个方法，前面添加的事件会被先清除

 

Backbone是如何更新视图的呢？

很明显，视图还会关联一个model实例，通过监听model实例的变化，从而相应的更新视图

这里是一个简单的小例子：

首先，我们在initialize函数中，要求view实例监听model实例的change事件

然后，在回调函数中将model，change后的状态表现出来，这里是model的price属性变化了

var BookModel = Backbone.Model.extend();

var BookView = Backbone.View.extend({

    tagName : 'span',

    initialize : function () {

        this.listenTo(this.model, 'change', this._change);
　　　　　　　this.$el.html(this.model.get('price'));
        $('body').append(this.$el);
    },

    _change : function (model) {
      
        this.$el.html('更新：' + model.get('price'));
    }
});


var bookModel = new BookModel({
    price : 10
});

var bookView = new BookView({

    model : bookModel,

    attributes : {
        'title' : 'span'
    },

    id : 'demo'
});

setTimeout(function () {
    bookModel.set('price', 30);
}, 1000);

例子在这：demo 

 当然，这里只是简单演示一下，其实，一般最后的bookModel.set('price', 30)，都是用户通过交互来做到的，也就是说这段代码应该在

dom的事件函数中表现出来，于是我们就可以为dom添加对应的事件了

ok，接下来把源码解析的中文注释附上，如果错误了，还望指出来，谢谢～～

  // Backbone.View
  // -------------

  // Backbone Views are almost more convention than they are actual code. A View
  // is simply a JavaScript object that represents a logical chunk of UI in the
  // DOM. This might be a single item, an entire list, a sidebar or panel, or
  // even the surrounding frame which wraps your whole app. Defining a chunk of
  // UI as a **View** allows you to define your DOM events declaratively, without
  // having to worry about render order ... and makes it easy for the view to
  // react to specific changes in the state of your models.

  // Creating a Backbone.View creates its initial element outside of the DOM,
  // if an existing element is not provided...
  var View = Backbone.View = function(options) {

    // 实例唯一id
    this.cid = _.uniqueId('view');

    options || (options = {});

    // 从options里挑出存在于viewOptions里的有意义的属性值，
    // 并赋值到this里对象里，作为属性
    _.extend(this, _.pick(options, viewOptions));

    // view是跟dom有关的
    // 所以这里要先确定dom元素是否指定
    this._ensureElement();

    // 初始化，一般用户来自定义
    this.initialize.apply(this, arguments);

    // 添加（代理）事件
    this.delegateEvents();
  };

  // Cached regex to split keys for `delegate`.
  // 在添加事件时，分开事件名和选择器
  var delegateEventSplitter = /^(S+)s*(.*)$/;

  // List of view options to be merged as properties.
  // 将可能作为view实例的一些属性名（由用户传入）
  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

  // Set up all inheritable **Backbone.View** properties and methods.
  // 原型方法
  _.extend(View.prototype, Events, {

    // The default `tagName` of a View's element is `"div"`.
    // 用于构造dom元素，默认是div元素i，用户可以传递参数覆盖
    tagName: 'div',

    // jQuery delegate for element lookup, scoped to DOM elements within the
    // current view. This should be preferred to global lookups where possible.
    // 将对元素的查找缩小到与试图关联的dom元素($el)内，提高效率
    $: function(selector) {
      return this.$el.find(selector);
    },

    // Initialize is an empty function by default. Override it with your own
    // initialization logic.
    // 初始化函数，一般用户自定义覆盖
    initialize: function(){},

    // **render** is the core function that your view should override, in order
    // to populate its element (`this.el`), with the appropriate HTML. The
    // convention is for **render** to always return `this`.
    // 渲染函数，用来填充视图关联的dom元素（$el）
    // 用户自定义覆盖之
    // 注意：建议使用模板引擎对处理html，例如已有的_.template()
    render: function() {
      return this;
    },

    // Remove this view by taking the element out of the DOM, and removing any
    // applicable Backbone.Events listeners.
    // 将视图关联的dom元素删除
    // 停止该视图对象的所有的事件监听（一般view视图会监听model的变化，从而相应地更新视图）
    remove: function() {
      this.$el.remove();
      this.stopListening();
      return this;
    },

    // Change the view's element (`this.el` property), including event
    // re-delegation.
    // 设置与视图关联的dom元素（$el）
    setElement: function(element, delegate) {

      // 删除之前的$el的事件监听
      if (this.$el) this.undelegateEvents();

      // dom对象还是jquery对象的判断，统一转换成jquery对象，赋值给$el
      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);

      // 将dom对象赋值给el
      this.el = this.$el[0];

      // 是否添加事件
      if (delegate !== false) this.delegateEvents();
      return this;
    },

    // Set callbacks, where `this.events` is a hash of
    //
    // *{"event selector": "callback"}*
    //
    //     {
    //       'mousedown .title':  'edit',
    //       'click .button':     'save',
    //       'click .open':       function(e) { ... }
    //     }
    //
    // pairs. Callbacks will be bound to the view, with `this` set properly.
    // Uses event delegation for efficiency.
    // Omitting the selector binds the event to `this.el`.
    // This only works for delegate-able events: not `focus`, `blur`, and
    // not `change`, `submit`, and `reset` in Internet Explorer.
    // 给视图关联的dom元素添加事件或者是给它的子元素添加代理事件
    delegateEvents: function(events) {

      // 参数events为空，则用this.events代替
      if (!(events || (events = _.result(this, 'events')))) return this;

      // 在调用时，会先去除之前的所有的事件监听
      this.undelegateEvents();

      // 遍历events对象
      for (var key in events) {

        // method为方法名（字符串）或者函数
        var method = events[key];

        // 如果不是函数（即是字符串），那么表示调用的是view对象对应名字的方法
        if (!_.isFunction(method)) method = this[events[key]];

        // 如果方法为空，跳过
        if (!method) continue;

        // 匹配出事件名(eventName)和选择器(selector)
        var match = key.match(delegateEventSplitter);
        var eventName = match[1], selector = match[2];

        // 将方法的this对象指定为该视图对象
        method = _.bind(method, this);

        // 修改事件名，添加命名空间，便于以后事件的删除
        // .delegateEvents用于区分其他程序在同一个dom元素上绑定的事件
        // cid用于区分不同的视图对象共享同一个dom元素
        eventName += '.delegateEvents' + this.cid;

        // 如果选择器为空，为视图关联的这个dom元素绑定事件
        if (selector === '') {
          this.$el.on(eventName, method);

        // 如果选择器不为空，则为dom元素下匹配selector的子元素绑定代理事件
        } else {
          this.$el.on(eventName, selector, method);
        }
      }
      return this;
    },

    // Clears all callbacks previously bound to the view with `delegateEvents`.
    // You usually don't need to use this, but may wish to if you have multiple
    // Backbone views attached to the same DOM element.
    // 删除绑定的所有（代理）事件
    undelegateEvents: function() {
      this.$el.off('.delegateEvents' + this.cid);
      return this;
    },

    // Ensure that the View has a DOM element to render into.
    // If `this.el` is a string, pass it through `$()`, take the first
    // matching element, and re-assign it to `el`. Otherwise, create
    // an element from the `id`, `className` and `tagName` properties.
    // 确保视图有关联的dom元素
    // 如果没有，试图通过tagName构造
    _ensureElement: function() {

      // 如果构造时没有传递了el参数
      // 那么，用tagName参数构造dom元素，并为该dom元素添加一系列的属性（参数传进来来的）
      if (!this.el) {

        // 将要添加到dom元素上的属性列表
        // 注意：attributes可以是函数，这样可以通过条件判断返回不同的属性
        // 下面的id，className，tagName，el同样是这样，都通过调用_.result
        var attrs = _.extend({}, _.result(this, 'attributes'));

        // dom元素id
        if (this.id) attrs.id = _.result(this, 'id');

        // dom元素class
        if (this.className) attrs['class'] = _.result(this, 'className');

        // 生成dom元素
        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);

        // 设置dom元素
        this.setElement($el, false);
      } else {

        // 设置dom元素
        this.setElement(_.result(this, 'el'), false);
      }
    }

  });