MVC概述(前端)

mvc是一種開發思想，更多的可以理解是多種設計模式的一種集合，因為在經典的23中設計模式裡面是沒有MVC設計模式。

1.Model模型 主要是負責業務資料的處理，前端專案中是js變數

2.View檢視 主要是業務資料在使用者面前顯示和資料的收集，前端專案中是html

3.Controller控制器 主要負責是業務資料的curd操作【操作模型裡面的資料，呼叫模型來對資料處理】，協調模型和檢視之間的關係，前端專案中是function

總結：通過對前端mvc的解讀發現，這個MVC裡面最重要的就是資料的處理。沒有提到我們前端經常說到的DOM操作。

四大特性

1.採用MVC設計思想

2.雙向資料繫結【重點】

3.依賴注入【重點、設計模式 DI-dependency Injection】

4.模組化設計【瞭解】主要是學習angularJs的主模組
 

引入

案例：完成一個快遞運費計算公式，分別使用原生DOM操作、jQuery操作、以及angularJs操作。

1.傳統的DOM操作完成:

思路：1. 為元素繫結監聽事件 2. 獲取DOM元素的值 3. 自己的業務 4. DOM元素值修改

2.使用jQuery實現【提供豐富的DOM選擇器和強大的方法】

思路：和上面的是一樣，但是簡化DOM元素的查詢，同時提供很多有用的方法，可以減少重複性的操作。

3.angularJs實現

思路： 1. 先引入angularJs框架 2. 定義一個ng-app 3. 定義一個ng-model  4. 使用{{ express }}
 

總結：通過三種方式對比測試，發現angularJs實現方案裡面沒有傳統的DOM操作，只需要關心資料即可，這是應該要這樣考慮。
概念：例如以ng-開頭的字元被稱為：angularJs的指令。

angular表示式

angularJs會運算表示式，然後把表示式的運算結果繫結到html，用來顯示資料。

語法：{{ express }} 將表示式寫在雙大括號裡面。

注意事項：在頁面重新整理的時候，會先顯示錶達式【表現的形式就是表示式會閃一下】，可以使用ng-bind代替。

練習：表示式裡面可以執行那些運算？

a.算術運算 【+ - * / %】【++ – 不可以】
b.比較運算 【> <】
c.邏輯運算 【&& || !】
d.三目運算 【? :】
e.呼叫字串物件的方法
f.json物件
g.是否可以建立陣列

h.使用new|var關鍵字【不可以】
使用ECMA提供的全域性函式【parseInt Math.random()】【不可以】

在angularjs裡面 {{  express  }} 可以幫我們去計算裡面的表示式，然後把表示式的值顯示在當前位置。

問題：頁面會存在一個閃動的效果：使用ng-Bind(描述一個指令的寫法)，ng-bind會計算表示式中的運算 ,再設定成Dom中的innerHTML.