MVC
M表示模型
V表示視圖
C表示控制器
MVC最早出現在smalltalk語言中，MVC分別表示模型，視圖，控制器，模型通常指的是數據，視圖通常是它能看到的頁面，控制器通常表示一些交互等等，MVC根據前後端的劃分，又有不同的含義
對於後端來說
M（Model）模型，通常指的是底層的數據，例如對數據庫操作數據的封裝等
V（View）視圖，向前端輸出的視圖等等，包括渲染視圖，創建視圖等等
C（Controller）控制器，指的是對模型以及視圖的操作，例如獲取請求，返回數據，根據請求返回視圖
對於前端來說
機器可讀性強的數據人眼可讀性差，人眼可讀性強的數據機器可讀性差
前端的本質就是將機器可讀性強的數據轉化成人眼可讀性強的數據（視圖），將人眼可讀性強的數據轉化成機器可讀性強的數據（請求數據）
M，通常指的是機器可讀性強的數據。例如json，對象，數組等等
V，通常值的是人眼可讀性強的數據。例如下拉框，表單，浮層
C，通常指的一些交互或者請求，（將人眼可讀性強的數據與機器可讀性強的數據做轉化）
前端經典圖片，通過這張圖我們能看到MVC在前端的流程
用戶可以操作控制器（事件，交互，請求等等）
控制可以操作模型，（發送請求更新數據）
控制器可以操作視圖，（路由改變呈現不同的頁面，點擊事件打開浮層）
視圖可以操作模型，（視圖根據數據來渲染，此時從模型中獲取數據）
經典的MVC模型是一個單向的，不同的框架對於MVC實現有不同的變化
例如Backbone對於MVC實現就有所不同，例如Backbone增強了模型和視圖，弱化了控制器
從圖中我們可以看出
用戶可以操作控制器（更改路由）
用戶可以操作視圖（觸發事件）
控制器可以操作視圖（路由改變選擇不同頁面渲染）
控制器可以更改模型（路由改變請求不同的數據）
視圖可以操作模型（改變視圖，可以更改數據）
模型可以操作視圖（數據變化，重新渲染視圖）
在Backbone中MVC是雙向的
Backbone獲取
Github： https://github.com/jashkenas/backbone
中文文檔: http://www.css88.com/doc/backbone/
Bower安裝
Backbone依賴文件
第一類 類jquery庫 例如jquery，zepto
第二類 backbone拓展庫 underscore，主要是爲模型中 模型以及集合拓展的
在Backbone中模型Model特指兩方面，一方面是Model模型一方是Collection集合
Backbone對於數據操作比較複雜的頁面比較適合
體驗backbone
| 1 <script type="text/javascript" src="lib/jquery.js"></script> 2 <script type="text/javascript" src="lib/underscore.js"></script> 3 <script type="text/javascript" src="lib/backbone.js"></script> |
模型Model
創建模型
一種構造函數式
通過Backbone.Model
是一個類，必須通過new關鍵字創建
參數就是模型上的屬性
一種繼承式
通過Backbone.Model.extend繼承得到一個類
返回值就是一個新的類，我們可以通過這個類來創建模型實例化對象，並且這種方式是最常用的方式
創建實例化對象分成兩步
第一步創建繼承類
傳遞參數會保留在模型實例化對象的原型上（與第一種煩那個是的區別點）
第二步根據繼承類實例化對象
傳遞的參數會保留實例化對象是attributes屬性中
模型實例化對象
模型實例化對象中添加的屬性會添加到attributes屬性中
Attributes表死好模型屬性對象
Changed表示是否被修改
Cid表示模型的id
| 1 // 構造函數式創建模型 2 // 用一個模型表示一個商品，商品是由價格的 3 var p1 = new Backbone.Model({ 4 price: 1000 5 }) 6 7 // 第一步 創建模型類 8 var Product = Backbone.Model.extend({ 9 color: 'red' 10 }) 11 // 第二步 通過模型類實例化對象 12 var p2 = new Product({ 13 price: 2000 14 }) |
defaults
可以通過defaults定義默認屬性，
在裏面定義的屬性，在創建會默認添加上
在繼承式創建模型時候，defaults是一個特殊屬性，裏面的內容會在實例化對象時候，添加到實例化對象的attributes屬性中
Defaults屬性只能在繼承類的時候有作用
繼承是創建模式是很靈活的，因爲我們可以添加默認屬性
默認屬性在實例化對象的時候，如果傳遞了屬性值，默認屬性會被覆蓋
| 1 var Product = Backbone.Model.extend({ 2 color: 'red', 3 title: '小米手機', 4 // 添加默認寬高屬性 5 defaults: { 6 width: 100, 7 height: 200 8 } 9 }) |
構造函數
Backbone的繼承式創建模型的時候，可以傳遞構造函數，
我們使用繼承式創建模型類的時候，有一些屬性是特殊的，例如defaults，還有一些事特殊方法，例如構造函數initialize
每次實例化對象的時候，構造函數都會被執行
通常我們在構造函數中爲模型綁定事件，或者適配模型實例化對象的屬性
構造函數中
參數就是實例化對象時候傳遞的數據
作用域就是當前模型對象
| 1 var Product = Backbone.Model.extend({ 2 // 特殊方法叫initalize表示構造函數 3 initialize: function () { 4 if (this.attributes.price) { 5 this.attributes.onsale = true 6 } else { 7 // 如果沒有價格，設置onsale是false 8 this.attributes.onsale = false; 9 } 10 11 } 12 }) |
模型和對象的轉換
對於一個模型實例化對象來說，他的attributes屬性是他的核心數據，我們使用模型就是使用模型的attributes數據，
Backbone提供了一個toJSON方法，可以方便我們將模型數據轉化對象
Js的等價方法，（相同功能的方法）
JSON.parse： 是將字符串轉化成對象，
JSON.stringify: 將對象轉化成字符串
toJSON() === JSON.parse(JSON.stringify())
| 1 var p1Obj = p1.toJSON(); 2 console.log(p1Obj) 3 var str = JSON.stringify(p1); 4 console.log(JSON.parse(str)) |
獲取模型的屬性
Backbone的模型提供一個get方法，可以獲取模型的屬性值
對於一個模型，
如果存在這個屬性，那麼就返回這個屬性值
如果不存在這個屬性，那麼就返回undefined
注意這裏的指的是attributes中的數據屬性
| 1 price = p1.get('price') 2 price = p2.get('price') |
設置屬性方法
Backbone提供了一個set方法，用來設置模型上的屬性或者更改模型屬性，跟jquery中css，attr一樣，但是不支持獲取屬性
當傳遞一個參數的時候，表示設置一組屬性，（是個對象）
當傳遞兩個參數的時候，表示設置一個屬性
Set方法調用時只能觸發一次事件，不論修改多少屬性，
我們可以通過silent屬性來屏蔽修改的操作被事件監聽
構造函數只在創建模型時候執行，不會再修改模型時候執行
| 1 p1.set({ 2 address: '江蘇 南京', 3 store: '蘇寧易購官方旗艦店' 4 }) 5 p1.set('sale', 4055, {silent: true}); |
事件
對於一個模型實例化對象，我們可以對其綁定一些事件監聽他們操作，通過實例化對象的on方法來監聽事件
我們可以在模型構造函數內爲模型添加事件
不論模型什麼時候修改數據，都會觸發 事件的執行
我們可以在模型實例化對象後面爲模型添加事件
只有在綁定事件後面修改或者添加屬性纔會被監聽，
在綁定事件之前添加或者修改屬性是不會被監聽的
我們綁定事件的時候，儘量綁定在構造函數內，這樣可以保證事件安全可靠的被執行
有時根據需求的需要，我們可以在視圖模塊，或者集合模塊綁定模型事件
| 1 p2.on('change', function () { 2 console.log('change') 3 }) |
判斷模型修改
hasChanged：判斷模型是否被修改
| 1 console.log(p2.hasChanged()) |
刪除屬性
Unset：刪除模型的某個屬性
參數就是一個字符串，表示某一個屬性
方法底層的實現是通過set實現
有時候我們需要對刪除的屬性做監控，此時我們可以傳遞一個validate屬性並設置true
此時就能觸發模型實例化對象的validate方法，在這個方法中，我們就可以監聽刪除了哪個屬性
第一個參數表示attributes對象
第二個參數執行刪除時傳入的配置
如果方法返回true，將阻止刪除
如果方法返回false，將執行刪除
| 1 p2.unset('price') |
文章出處：愛創課堂前端培訓