Backbone.js學習筆記（二）細說MVC

時間 2019-11-16

標籤 backbone.js backbone 學習筆記細說 mvc 欄目 JavaScript 简体版

原文原文鏈接

對於初學backbone.js的同窗能夠先參考我這篇文章：Backbone.js學習筆記（一）javascript

Backbone源碼結構

1:  (function() {

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

   3:      Backbone.Model        // 模型構造函數和原型擴展

   4:      Backbone.Collection    // 集合構造函數和原型擴展

   5:      Backbone.Router        // 路由配置器構造函數和原型擴展

   6:      Backbone.History        // 路由器構造函數和原型擴展

   7:      Backbone.View            // 視圖構造函數和原型擴展

   8:      Backbone.sync            // 異步請求工具方法

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

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

  11:  }).call(this);

JS MVC職責劃分

M 模型html

業務模型：業務邏輯、流程、狀態、規則
（核心）數據模型：業務數據、數據校驗、增刪改查（AJAX）

V 視圖java

（核心）視圖：定義、管理、配置
模板：定義、配置、管理
組件：定義、配置、管理
（核心）用戶事件配置、管理
用戶輸入校驗、配置、管理

C 控制器/分發器jquery

（核心）事件分發、模型分發、視圖分發
不作數據處理、業務處理，即業務無關
擴展：權限控制、異常處理等
C是JSMVC框架的核心，實現集中式配置和管理，能夠有多個控制器

工具庫git

主要是異步請求、DOM操做，能夠依賴於jQuery等

來源：http://www.cnblogs.com/nuysoft/archive/2012/03/14/2395272.htmlgithub

Model指的是一條一條的數據，而集合Collection指的是對Model中的多條數據進行管理。segmentfault

模型 Model

咱們用Backbone.Model表示應用中全部數據，models中的數據能夠建立、校驗、銷燬和保存到服務端。數組

對象賦值的方法

一、直接定義，設置默認值瀏覽器

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

二、賦值時定義緩存

<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>

對象中的方法

<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>

當模型實例化時，他的initialize方法能夠接受任意實例參數，其工做原理是backbone模型自己就是構造函數，因此可使用new生成實例：

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是默認的空函數

Model 的事件綁定

爲了能及時更新view，咱們須要經過事件綁定機制來處理和響應用戶事件：

<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>

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

集合 Collection

Backbone.Collection就是一個Model對象的有序集合。由於Model是一條數據記錄，也就是說，Collection至關因而一個數據集。具備增長元素，刪除元素，獲取長度，排序，比較等一系列工具方法，說白了就是一個保存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]); //注意這裏面是數組,或者使用add

    var bookShelf = new BookShelf;

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

    //基於underscore這個js庫，還可使用each的方法獲取collection中的數據
    bookShelf.each(function(book){

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

    });
</script>

collection.model覆蓋此屬性來指定集合中包含的模型類。能夠傳入原始屬性對象（和數組）來 add, create,和 reset，傳入的屬性會被自動轉換爲適合的模型類型。

視圖 View

Backbone.View中能夠綁定dom元素和客戶端事件。頁面中的html就是經過views的render方法渲染出來的，當新建一個view的時候經過要傳進一個model做爲數據

view.$el:一個視圖元素的緩存jQuery對象。 一個簡單的引用，而不是從新包裝的DOM元素。

一個簡單的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({ //建立一個view，其實就是一個HTML的DOM節點
                initialize: function() {
                    this.render();
                },
                render: function() {  // 渲染方法
                    this.$el.html('Hello World');  //this.el就是HTML節點，經過jQuery的html方法填充內容
                    return this;
                }
            });

            $(function () {
                var test = new TestView({el: $('#body')});// 以目標節點爲el參數，建立一個view的實例，render函數將會被自動調用並將渲染結果填充到el中
                //test.render(); // 若是沒在 initialize 裏調用 render 的話，就須要在這裏調用一次
            });
    </script>
</head>
<body>
<div id="body"></div>
</body>

elview.el全部的視圖都擁有一個 DOM 元素（el 屬性），即便該元素仍未插入頁面中去。視圖能夠在任什麼時候候渲染，而後一次性插入 DOM 中去，這樣能儘可能減小 reflows 和 repaints 從而得到高性能的 UI 渲染。 this.el 能夠從視圖的 tagName, className, id 和 attributes 建立，若是都未指定，el 會是一個空 div。 --官網

擴展方法 extend

模型、集合、視圖、路由器都有一個extend方法，用於擴展原型屬性和靜態屬性，建立自定義的模型、集合、視圖、路由器類。

Backbone.Model.extend

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

要建立本身的 Model 類，你能夠擴展 Backbone.Model 並提供實例 properties(屬性) ，以及可選的能夠直接註冊到構造函數的classProperties(類屬性)。

Backbone.View.extend

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

開始建立自定義的視圖類。一般咱們須要重載 render 函數，聲明 events，以及經過 tagName, className, 或 id 爲視圖指定根元素。 Backbone.View經過綁定視圖的 render 函數到模型的 "change" 事件 — 模型數據會即時的顯示在 UI 中。

Backbone.Collection.extend

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

經過擴展 Backbone.Collection 建立一個 Collection 類。實例屬性參數 properties 以及類屬性參數 classProperties 會被直接註冊到集合的構造函數。

Backbone.Router.extend

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

開始建立一個自定義的路由類。當匹配了 URL 片斷便執行定義的動做，並能夠經過 routes 定義路由動做鍵值對。

Router與controller

controller是Backbone 0.5之前的叫法，如今更名叫Router了。

Backbone.Router 爲客戶端路由提供了許多方法，並能鏈接到指定的動做（actions）和事件（events）。
頁面加載期間，當應用已經建立了全部的路由，須要調用 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>

在瀏覽器裏打開頁面後，在url的html後面依次加上：