最初
- JavaScript 是一種強(qiáng)大的、動(dòng)態(tài)的面向?qū)ο缶幊陶Z(yǔ)言
- 這門語(yǔ)言被誤解的原因：早期的JavaScript 比較糟糕，有許多bug ； 其名字帶有java前綴，讓人以為與java有關(guān)系，但它們是兩種語(yǔ)言。
增加結(jié)構(gòu)
- 應(yīng)該將應(yīng)用解耦成一系列相互平等且獨(dú)立的部分。
- MVC是一種久經(jīng)考驗(yàn)的搭建應(yīng)用的方式，可以確保應(yīng)用的可維護(hù)性和可擴(kuò)展性。MVC模式完全適用于JavaScript應(yīng)用
MVC
- MVC是一種設(shè)計(jì)模式，將應(yīng)用劃為三部分：數(shù)據(jù)（模型）、展現(xiàn)層（視圖）和用戶交互層（控制器）。
- 事件的發(fā)生過(guò)程：
1.用戶和應(yīng)用發(fā)生交互
2.控制器的事件處理器被觸發(fā)
3.控制器從模型中請(qǐng)求數(shù)據(jù)，并將其交給視圖
4.視圖將數(shù)據(jù)呈現(xiàn)給用戶
例：在Holla中發(fā)送一個(gè)新的聊天信息的過(guò)程：
1.用戶提交一個(gè)新的聊天信息
2.控制器的事件處理器被觸發(fā)
3.控制器創(chuàng)建了一個(gè)新的聊天模型（Chat Model）記錄
4.控制器更新視圖
5.用戶在聊天窗口看到新的消息
MVC各部分具體詳解如下：
模型
- 模型用來(lái)存放應(yīng)用所有的數(shù)據(jù)對(duì)象。模型只需包含數(shù)據(jù)及直接和這些數(shù)據(jù)相關(guān)的邏輯。
- 任何事件處理器代碼、視圖末班，以及那些和模型無(wú)關(guān)的邏輯都應(yīng)該隔離在模型外
- 數(shù)據(jù)是面向?qū)ο蟮?，任何定義在這個(gè)數(shù)據(jù)模型上的函數(shù)或邏輯都可以直接被調(diào)用
例：
var user = User.find("foo");
user.destory();
destory()函數(shù)是存放在命名空間User的實(shí)例中，User存放了所有的記錄（這只是理想情況），因?yàn)槲覀兛刂屏巳肿兞康膫€(gè)數(shù)，更好的避免了潛在的沖突。這種代碼更加清晰，而且非常容易做繼承。
視圖
- 視圖層是呈現(xiàn)給用戶的，用戶與之產(chǎn)生交互。在JavaScript應(yīng)用中，視圖大都由HTML、CSS和JavaScript模板組成。
- 除了模板中簡(jiǎn)單的條件語(yǔ)句之外，視圖不應(yīng)當(dāng)包含任何邏輯
- 包含視覺(jué)呈現(xiàn)相關(guān)的邏輯部分沒(méi)有定義在視圖之內(nèi)即可。我們將視圖呈現(xiàn)邏輯歸類為“視圖助手（helper）”：和視圖有關(guān)的獨(dú)立的小型工具函數(shù)。
例：
//helper.js
var helper = {};
helper.formatData = function(){/*...*/};
//template.html
<div>
${helper.foematDate(this.date)}
</div>
helper是一個(gè)命名空間，可以防止沖突并保持代碼清晰、可擴(kuò)展
控制器
- 控制器是模型和視圖之間的紐帶。控制器從視圖獲得時(shí)間和輸入，對(duì)它們（很可能包含模型）進(jìn)行處理，并進(jìn)行相應(yīng)的更新視圖。
- 當(dāng)頁(yè)面加載時(shí)，控制器會(huì)給視圖添加事件監(jiān)聽(tīng)，然后當(dāng)用戶和你的應(yīng)用產(chǎn)生交互時(shí)，控制器中的時(shí)間觸發(fā)器就開(kāi)始工作。
- 不用類庫(kù)和框架也能實(shí)現(xiàn)控制器，下面代碼就是使用簡(jiǎn)單的jQuery代碼來(lái)實(shí)現(xiàn)的：
var Controller = {};
//使用匿名函數(shù)來(lái)封裝一個(gè)作用域
（Controller.users = function($){
var nameClick = function(){
/*...*/
};
//在頁(yè)面加載時(shí)綁定事件監(jiān)聽(tīng)
$（function(){
$("#view.name").click(nameClick)
}）;
}）(jQuery);
