Backbone.js 1.0.0源碼架構分析(一) - cnwebdeveloper－IT工程師數位筆記本

文章出處

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的典型架構吧：