Backbone.js 1.0.0源碼架構分析(一)

Backbone.js 是javascript 語言中 首個實現MVC設計模式的類庫，API接口方法重度依賴於underscore.js，DOM選擇器則依賴於jQuery.js或者zepto.js。

Backbone.js 1.0.0 如今既能夠支持瀏覽器端js代碼，也能夠支持服務端nodejs環境代碼。爲了實現這個兼容性，Backbone.js 採用了在函數表達式中傳進‘this’關鍵詞來映射宿主環境的全局變量（在browser爲 ‘window’對象，在nodejs環境爲'exports'）:

(function(){

  // 初始設定
  // -------------

  // 保存全局對象在本地的引用
  var root = this;

  // 若是咱們在引入backbone.js以前，全局對象已經存在Backbone屬性，則先把它引入到本地變量，以便Backbone.noConfllict()的實現解決命名空間衝突
  var previousBackbone = root.Backbone;

  //建立數組方法在本地的引用，以便於後面利用
  var array = [];
  var push = array.push;
  var slice = array.slice;
  var splice = array.splice;

  // 頂級命名空間的聲明，後面模塊與方法都將追加到此命名空間之下
  if (typeof exports !== 'undefined') {
    //nodejs環境中聲明
    Backbone = exports;
  } else {
    //browser中聲明，而且添加到全局對象中
    Backbone = root.Backbone = {};
  }

  // 版本聲明
  Backbone.VERSION = '1.0.0';

  // browser端，保存backbone.js所依賴的 underscore.js 聲明的 全局變量
  var _ = root._;
  // nodejs中，經過require方式引入underscore.js
  if (!_ && (typeof require !== 'undefined')) _ = require('underscore');

  // 保存Jquery或Zepto等DOM選擇器、操做類庫所聲明的全局變量在本地的引用
  Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;

  // 進入非衝突模式，即Backbone的變量已經存在，咱們就退而避之，將backbone.js換作其餘變量名
  Backbone.noConflict = function() {
    root.Backbone = previousBackbone;
    return this;
  };
  // backbone各APT方法的實現

}).call(this);

　　一個js框架或者類庫在編寫的時候，首先要爲本身‘正名’，如此，纔可以揚名立萬。

     既然名已正，其內功招式就能夠正常地表現了。

     Backbone 既然有 MVC 之名，那咱們就來先看看MVC的典型架構吧：

而backbone.js 能夠這樣實現

 一、自定義model與collection

 二、定義渲染model的視圖view

 三、定義渲染collection的視圖view

 四、引入視圖渲染模板