講解JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計(jì)理念

更新時(shí)間：2016年02月14日 16:00:48 作者：trigkit4

這篇文章主要介紹了JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計(jì)理念,相比較于Angular.js,同樣為MVC結(jié)構(gòu)的Backbone則顯得輕巧許多,需要的朋友可以參考下

什么是Backbone.js？
Backbone.js是十大JS框架之首，Backbone.js 是一個(gè)重量級(jí)js MVC 應(yīng)用框架，也是js MVC框架的鼻祖。它通過(guò)Models數(shù)據(jù)模型進(jìn)行鍵值綁定及custom事件處理，通過(guò)模型集合器Collections提供一套豐富的API用于枚舉功能，通過(guò)視圖Views來(lái)進(jìn)行事件處理及與現(xiàn)有的Application通過(guò)JSON接口進(jìn)行交互。

簡(jiǎn)而言之，Backbone是實(shí)現(xiàn)了web前端MVC模式的js庫(kù)

什么是MVC？
MVC：后端服務(wù)器首先（過(guò)程1）通過(guò)瀏覽器獲取頁(yè)面地址，對(duì)網(wǎng)址進(jìn)行解析，得到視圖View給它的一個(gè)網(wǎng)址，然后通過(guò)控制器controller進(jìn)行解析，然后去找對(duì)應(yīng)的數(shù)據(jù)（過(guò)程2），找到數(shù)據(jù)后，再將數(shù)據(jù)Model返回給控制器（過(guò)程3），控制器controller再對(duì)數(shù)據(jù)進(jìn)行加工，最后返回給視圖（過(guò)程4），即更新視圖View。這種結(jié)構(gòu)在后端是非常清晰且易實(shí)現(xiàn)的

2016214155352464.jpg (440×329)

Backbone中MVC的機(jī)制
Backbone將數(shù)據(jù)呈現(xiàn)為模型, 你可以創(chuàng)建模型、對(duì)模型進(jìn)行驗(yàn)證和銷毀，甚至將它保存到服務(wù)器。當(dāng)UI的變化引起模型屬性改變時(shí)，模型會(huì)觸發(fā)"change"事件；所有顯示模型數(shù)據(jù)的視圖會(huì)接收到該事件的通知，繼而視圖重新渲染。你無(wú)需查找DOM來(lái)搜索指定id的元素去手動(dòng)更新HTML。 — 當(dāng)模型改變了，視圖便會(huì)自動(dòng)變化。———百度百科

模式：一種解決問(wèn)題的通用方法

—設(shè)計(jì)模式：工廠模式、適配器模式和觀察者模式
—框架模式：MVC、MVP、MVVM
控制器：通過(guò)控制器來(lái)連接視圖與模型。

MVC模式的思想：

就是把模型與視圖分離，通過(guò)控制器來(lái)連接他們
服務(wù)器端MVC模式非常容易實(shí)現(xiàn)
Model：模型即數(shù)據(jù)，模型是所有 js 應(yīng)用程序的核心，包括交互數(shù)據(jù)及相關(guān)的大量邏輯：轉(zhuǎn)換、驗(yàn)證、計(jì)算屬性和訪問(wèn)控制。你可以用特定的方法擴(kuò)展 Backbone.Model

View：即你在頁(yè)面上所能看到的視圖。每一個(gè)單一的數(shù)據(jù)模型對(duì)應(yīng)一個(gè)視圖View

web頁(yè)面本身就是一個(gè)很大的view，不太容易做到分離操作，backbone.js適合復(fù)雜的大型開(kāi)發(fā)，并為我們解決了這些難題

backbone的模塊
backbone有如下幾個(gè)模塊：

Events：事件驅(qū)動(dòng)模塊
Model：數(shù)據(jù)模型
Collection：模型集合器
Router：路由器（對(duì)應(yīng)hash值）
History：開(kāi)啟歷史管理
Sync：同步服務(wù)器方式
View：視圖（含事件行為和渲染頁(yè)面相關(guān)方法）

集合器Collection是對(duì)單獨(dú)的數(shù)據(jù)模型進(jìn)行統(tǒng)一控制

直接創(chuàng)建對(duì)象
Backbone依賴于Underscore.js， DOM 處理依賴于 Backbone.View 和 jQuery ，因此，在引入Backbone.js之前，Underscore.js必須在它之前引入，而jQuery也最好一并引入，最后再引入Backbone.js

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src = "jquery-2.0.3.min.js"></script>
  <script src = "underscore-min.js"></script>
  <script src = "backbone.js"></script>

</head>
<body>
  var model = new Backbone.Model();
  var col = new Backbone.Collection();
  var view = new Backbone.View();
</body>

new后面是一個(gè)構(gòu)造函數(shù)，而B(niǎo)ackbone是作為構(gòu)造函數(shù)的命名空間來(lái)使用的

Model模塊

Backbone.Model.extend(properties, [classProperties])

Backbone通過(guò)extend來(lái)擴(kuò)展實(shí)例方法和靜態(tài)方法：

<script type="text/javascript">
  //extend接收的第一個(gè)參數(shù)是json格式的字符串，用來(lái)擴(kuò)展實(shí)例方法
  //第二個(gè)參數(shù)也是json格式的字符串，用來(lái)擴(kuò)展靜態(tài)方法
  var M = Backbone.Model.extend({
    abc : function(){  //實(shí)例方法
      alert("hello backbone");
    }
  },{
    def : function(){ //靜態(tài)方法
      alert("hi");
    }
  });

  var model = new M;
  model.abc();//實(shí)例方法要用實(shí)例對(duì)象來(lái)訪問(wèn)
  M.def();//靜態(tài)方法直接掛載到了構(gòu)造函數(shù)上，可以通過(guò)構(gòu)造函數(shù)來(lái)直接訪問(wèn)
</script>

靜態(tài)方法其實(shí)就是多了一個(gè)命名空間。以上是給構(gòu)造函數(shù)添加實(shí)例方法和靜態(tài)方法

 var M = Backbone.Model.extend({})

通過(guò)extend來(lái)為模型的構(gòu)造函數(shù)擴(kuò)展方法，M就是擴(kuò)展之后的構(gòu)造函數(shù)

繼承

<script type="text/javascript">
  //繼承
  var Mod = backbone.Model.extend({
    abc : function(){
      alert(123);
    }
  });

  var ChildMod = Mod.extend();

  var model = new ChildMod;
  model.abc();//子類繼承了父類的方法
</script>

Backbone源碼結(jié)構(gòu)

2016214155552836.png (600×143)

1: (function() {

2: Backbone.Events // 自定義事件

3: Backbone.Model // 模型構(gòu)造函數(shù)和原型擴(kuò)展

4: Backbone.Collection // 集合構(gòu)造函數(shù)和原型擴(kuò)展

5: Backbone.Router // 路由配置器構(gòu)造函數(shù)和原型擴(kuò)展

6: Backbone.History // 路由器構(gòu)造函數(shù)和原型擴(kuò)展

7: Backbone.View // 視圖構(gòu)造函數(shù)和原型擴(kuò)展

8: Backbone.sync // 異步請(qǐng)求工具方法

9: var extend = function (protoProps, classProps) { ... } // 自擴(kuò)展函數(shù)

10: Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自擴(kuò)展方法

11: }).call(this);
JS MVC職責(zé)劃分
M 模型

業(yè)務(wù)模型：業(yè)務(wù)邏輯、流程、狀態(tài)、規(guī)則
（核心）數(shù)據(jù)模型：業(yè)務(wù)數(shù)據(jù)、數(shù)據(jù)校驗(yàn)、增刪改查（AJAX）
V 視圖

（核心）視圖：定義、管理、配置
模板：定義、配置、管理
組件：定義、配置、管理
（核心）用戶事件配置、管理
用戶輸入校驗(yàn)、配置、管理
C 控制器/分發(fā)器

（核心）事件分發(fā)、模型分發(fā)、視圖分發(fā)
不做數(shù)據(jù)處理、業(yè)務(wù)處理，即業(yè)務(wù)無(wú)關(guān)
擴(kuò)展：權(quán)限控制、異常處理等
C是JSMVC框架的核心，實(shí)現(xiàn)集中式配置和管理，可以有多個(gè)控制器
工具庫(kù)

主要是異步請(qǐng)求、DOM操作，可以依賴于jQuery等

Model指的是一條一條的數(shù)據(jù)，而集合Collection指的是對(duì)Model中的多條數(shù)據(jù)進(jìn)行管理。

模型 Model
我們用Backbone.Model表示應(yīng)用中所有數(shù)據(jù)，models中的數(shù)據(jù)可以創(chuàng)建、校驗(yàn)、銷毀和保存到服務(wù)端。

對(duì)象賦值的方法
1、直接定義，設(shè)置默認(rèn)值

 Trigkit = Backbone.Model.extend({
       initialize : function () {
         alert('hi!');
       },
       defaults:{
         age : '22',
         profession : 'coder'
       }
     });
    var coder = new Trigkit;
    alert(coder.get('age'));//22

2、賦值時(shí)定義

<script type="text/javascript">
   Trigkit = Backbone.Model.extend({
     initialize : function () {
       alert('hi!');
     }
   });
   var t = new Trigkit;
   t.set({name :'huang',age : '10'});
   alert(t.get('name'));
</script>

對(duì)象中的方法

<script type="text/javascript" src="Underscore.js"></script>
<script type="text/javascript" src="backbone-1.1.2.js"></script>
<script type="text/javascript">
    var Trigkit4 = Backbone.Model.extend({
      initialize : function () {
        alert("hello world!");
      },
      defaults : {
        name : 'zhangsan',
        age : 21
      },
      aboutMe: function () {
        return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
      }
    });
    var t = new Trigkit4;
    alert(t.aboutMe());
  </script>

當(dāng)模型實(shí)例化時(shí)，他的initialize方法可以接受任意實(shí)例參數(shù)，其工作原理是backbone模型本身就是構(gòu)造函數(shù)，所以可以使用new生成實(shí)例：

var User = Backbone.Model.extend({
  initialize: function (name) {
    this.set({name: name});
  }
});
var user = new User('trigkit4');
alert(user.get('name'), 'trigkit4');//trigkit4

看下backbone的源碼：

var Model = Backbone.Model = function(attributes, options) {
  var attrs = attributes || {};
  options || (options = {});
  this.cid = _.uniqueId('c');
  this.attributes = {};
  if (options.collection) this.collection = options.collection;
  if (options.parse) attrs = this.parse(attrs, options) || {};
  attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
  this.set(attrs, options);
  this.changed = {};
  this.initialize.apply(this, arguments);
 };

 initialize: function(){},//initialize是默認(rèn)的空函數(shù)

Model 的事件綁定
為了能及時(shí)更新view，我們需要通過(guò)事件綁定機(jī)制來(lái)處理和響應(yīng)用戶事件：

  <script type="text/javascript">
    var Task = Backbone.Model.extend({
      initialize: function () {
        this.on("change:name", function (model) {
          alert("my name is : " + model.get("name"));
        });
      }
    });

    var task = new Task({ name:"oldname", state:"working"});
    task.set({name:"trigkit"});
//    object.on(event, callback, [context])
  </script>
</head>

關(guān)于事件綁定，有on，off,trigger，once，listenTo，stopListening，listenToOnce等方法，具體參照：http://documentcloud.github.io/backbone/#Events

2016214155730521.png (600×470)

集合 Collection
Backbone.Collection就是一個(gè)Model對(duì)象的有序集合。因?yàn)镸odel是一條數(shù)據(jù)記錄，也就是說(shuō)，Collection相當(dāng)于是一個(gè)數(shù)據(jù)集。具有增加元素，刪除元素，獲取長(zhǎng)度，排序，比較等一系列工具方法，說(shuō)白了就是一個(gè)保存models的集合類。

<script type="text/javascript">
  var Book = Backbone.Model.extend({
    defaults : {
      title:'default'
    },

    initialize: function(){

       alert('hello backbone!');//彈出3次
    }
  });

  BookShelf = Backbone.Collection.extend({

    model : Book

  });

  var book1 = new Book({title : 'book1'});

  var book2 = new Book({title : 'book2'});

  var book3 = new Book({title : 'book3'});

  //var bookShelf = new BookShelf([book1, book2, book3]); //注意這里面是數(shù)組,或者使用add

  var bookShelf = new BookShelf;

  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);

  //基于underscore這個(gè)js庫(kù)，還可以使用each的方法獲取collection中的數(shù)據(jù)
  bookShelf.each(function(book){

    alert(book.get('title'));

  });
</script>

collection.model覆蓋此屬性來(lái)指定集合中包含的模型類?？梢詡魅朐紝傩詫?duì)象（和數(shù)組）來(lái) add, create,和 reset，傳入的屬性會(huì)被自動(dòng)轉(zhuǎn)換為適合的模型類型。

2016214155800876.png (600×538)

視圖 View
Backbone.View中可以綁定dom元素和客戶端事件。頁(yè)面中的html就是通過(guò)views的render方法渲染出來(lái)的，當(dāng)新建一個(gè)view的時(shí)候通過(guò)要傳進(jìn)一個(gè)model作為數(shù)據(jù)

view.$el:一個(gè)視圖元素的緩存jQuery對(duì)象。一個(gè)簡(jiǎn)單的引用，而不是重新包裝的DOM元素。
一個(gè)簡(jiǎn)單的View：

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="Underscore.js"></script>
  <script type="text/javascript" src="backbone-1.1.2.js"></script>
  <script type="text/javascript">

      var TestView = Backbone.View.extend({ //創(chuàng)建一個(gè)view，其實(shí)就是一個(gè)HTML的DOM節(jié)點(diǎn)
        initialize: function() {
          this.render();
        },
        render: function() { // 渲染方法
          this.$el.html('Hello World'); //this.el就是HTML節(jié)點(diǎn)，通過(guò)jQuery的html方法填充內(nèi)容
          return this;
        }
      });

      $(function () {
        var test = new TestView({el: $('#body')});// 以目標(biāo)節(jié)點(diǎn)為el參數(shù)，創(chuàng)建一個(gè)view的實(shí)例，render函數(shù)將會(huì)被自動(dòng)調(diào)用并將渲染結(jié)果填充到el中
        //test.render(); // 如果沒(méi)在 initialize 里調(diào)用 render 的話，就需要在這里調(diào)用一次
      });
  </script>
</head>
<body>
<div id="body"></div>
</body>

elview.el所有的視圖都擁有一個(gè) DOM 元素（el 屬性），即使該元素仍未插入頁(yè)面中去。視圖可以在任何時(shí)候渲染，然后一次性插入 DOM 中去，這樣能盡量減少 reflows 和 repaints 從而獲得高性能的 UI 渲染。 this.el 可以從視圖的 tagName, className, id 和 attributes 創(chuàng)建，如果都未指定，el 會(huì)是一個(gè)空 div。 --官網(wǎng)

2016214155837056.png (600×444)

擴(kuò)展方法 extend
模型、集合、視圖、路由器都有一個(gè)extend方法，用于擴(kuò)展原型屬性和靜態(tài)屬性，創(chuàng)建自定義的模型、集合、視圖、路由器類。

Backbone.Model.extend
Backbone.Model.extend(properties, [classProperties])

要?jiǎng)?chuàng)建自己的 Model 類，你可以擴(kuò)展 Backbone.Model 并提供實(shí)例 properties(屬性) ，以及可選的可以直接注冊(cè)到構(gòu)造函數(shù)的classProperties(類屬性)。

Backbone.View.extend
Backbone.View.extend(properties, [classProperties])

開(kāi)始創(chuàng)建自定義的視圖類。通常我們需要重載 render 函數(shù)，聲明 events，以及通過(guò) tagName, className, 或 id 為視圖指定根元素。 Backbone.View通過(guò)綁定視圖的 render 函數(shù)到模型的 "change" 事件 — 模型數(shù)據(jù)會(huì)即時(shí)的顯示在 UI 中。

Backbone.Collection.extend
Backbone.Collection.extend(properties, [classProperties])

通過(guò)擴(kuò)展 Backbone.Collection 創(chuàng)建一個(gè) Collection 類。實(shí)例屬性參數(shù) properties 以及類屬性參數(shù) classProperties 會(huì)被直接注冊(cè)到集合的構(gòu)造函數(shù)。

Backbone.Router.extend
Backbone.Router.extend(properties, [classProperties])

開(kāi)始創(chuàng)建一個(gè)自定義的路由類。當(dāng)匹配了 URL 片段便執(zhí)行定義的動(dòng)作，并可以通過(guò) routes 定義路由動(dòng)作鍵值對(duì)。

Router與controller
controller是Backbone 0.5以前的叫法，現(xiàn)在改名叫Router了。

Backbone.Router 為客戶端路由提供了許多方法，并能連接到指定的動(dòng)作（actions）和事件（events）。
頁(yè)面加載期間，當(dāng)應(yīng)用已經(jīng)創(chuàng)建了所有的路由，需要調(diào)用 Backbone.history.start()

查看下面示例：

<script type="text/javascript">
    var AppRouter = Backbone.Router.extend({
      routes: {
        "index" : "index",
        "task/:id": "task",
        "*acts": "tasklist"
      },
      index: function() {
        alert("index");
      },
      tasklist: function(action) {
        alert(action);
      },
      task: function(id) {
        alert(id);
      }
    });

    var app = new AppRouter;
    Backbone.history.start();
  </script>

在瀏覽器里打開(kāi)頁(yè)面后，在url的html后面依次加上：