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

taoszu 發布于2019-08-21 10:29 / 1881人閱讀

摘要：因為是一條數據記錄，也就是說，相當于是一個數據集。通常我們需要重載函數，聲明，以及通過或為視圖指定根元素。通過綁定視圖的函數到模型的事件模型數據會即時的顯示在中。實例屬性參數以及類屬性參數會被直接注冊到集合的構造函數。

對于初學backbone.js的同學可以先參考我這篇文章：Backbone.js學習筆記（一）

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

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

V 視圖

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

C 控制器/分發器

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

工具庫

主要是異步請求、DOM操作，可以依賴于jQuery等

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

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

模型 Model

我們用Backbone.Model表示應用中所有數據，models中的數據可以創建、校驗、銷毀和保存到服務端。

對象賦值的方法

1、直接定義，設置默認值

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

2、賦值時定義

對象中的方法

當模型實例化時，他的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，我們需要通過事件綁定機制來處理和響應用戶事件：

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

集合 Collection

Backbone.Collection就是一個Model對象的有序集合。因為Model是一條數據記錄，也就是說，Collection相當于是一個數據集。具有增加元素，刪除元素，獲取長度，排序，比較等一系列工具方法，說白了就是一個保存models的集合類。

collection.model覆蓋此屬性來指定集合中包含的模型類?？梢詡魅朐紝傩詫ο螅ê蛿到M）來 add, create,和 reset，傳入的屬性會被自動轉換為適合的模型類型。

視圖 View

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

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

一個簡單的View：


    
    Document

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

查看下面示例：

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

#/index
#/task/1
#/test/xxxx

將分別彈出出：index, 1, test/xxxx

這就是Router的功能。

backbone github官網：http://documentcloud.github.io/backbone/

GPU云服務器云服務器 backbone.js 學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85626.html

Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
Backbone.js學習筆記 Hello World!

摘要：使用和架構創建一個典型的項目。屬性被賦值給傳入的函數運行的結果。渲染，我們使用，這是一個對象，它指向的屬性，使用函數使用的結果替換。最后，啟動整體應用，為了保證完全加載，用包裝器調用完整日常練習一些在對象初始化的時候執行的代碼使用Backbone.js 和 MVC 架構創建一個典型的Hello world項目。雖然是殺雞用牛刀了，畢竟是我第一次使用Backbone.js 依賴 ...

Hanks10100 2019-08-22 10:55 評論0 收藏0
Backbone.js學習筆記：圖書案例-事件綁定

摘要：數據更新的時候，支持多事件和自定義事件。然后使用兩個事件和的自定義事件。我們將使用別名函數。是為了模擬從服務器獲取響應的時間。在它內部里面，使用和返回模型屬性把選中的模型賦值給當前視圖的模型。前言：我們繼續使用上一次寫的圖書案例，在基礎上面進行改進！事件綁定在我們瀏覽網頁的時候，獲取數據并不是一下只就全部獲取到的，為了創建一個更好的用戶體驗，就來模擬一個加載（Spi...

caige 2019-08-21 10:26 評論0 收藏0
springboot學習（二）——springmvc配置使用

摘要：中添加攔截器配置如下攔截所有請求，也就是，只攔截開頭的請求。在中并沒有提供配置文件的方式來配置攔截器，因此需要使用的代碼式配置，配置如下這個屬性通常并不需要手動配置，高版本的會自動檢測第四點講下靜態資源映射。以下內容，如有問題，煩請指出，謝謝上一篇講解了springboot的helloworld部分，這一篇開始講解如何使用springboot進行實際的應用開發，基本上尋著sprin...

hiyayiji 2019-08-16 10:54 評論0 收藏0
用Jasmine和Sinon測試Backbone應用 (譯)

摘要：框架本身可以很好地支持自下而上的單元測試。在中，這些原因可以分為性能真實的操作，依靠定時行為及網絡活動減慢了測試隔離單元測試應把重點放在小的一塊功能成為可能，并解耦不可靠的或低依賴使用對象是擁抱和的基本組成部分。最近在慢慢深入Backbone，也試著寫一些測試，找一些合適的文檔來學習。于是就找到了一個系列的文章 : Testing Backbone applications with...

ralap 2019-05-29 16:19 評論0 收藏0