2-1~3 MVC

2-1~3 MVC

內容簡介

• 爲何須要mvc？

• 前端mvc的困難在哪裏？

• AngularJS語境下的mvc是如何實現的？

---

1. 爲何須要mvc

• 代碼規模愈來愈大，切分職責是大勢所趨。

• 爲了複用：不少邏輯是如出一轍的。

• 爲了後期維護方便：修改一塊功能不影響其它功能。

MVC只是手段，終極目標是模塊化和複用

2. 前端mvc的困難

 

1487141651282.jpg

 

• 操做DOM的代碼必須等待整個頁面加載完畢

• 多個JS文件之間若是出現相互依賴，程序員必須本身解決。

• JS原型繼承也給前端編程帶來了不少困難。

3. AngularJS語境下的mvc是如何實現的

• Controller

  • Controller的實現方式一
    

  問題 ：若是「視圖1」和「視圖2」根本沒有任何邏輯關係，「控制器」的角色就會很尷尬。

  • Controller的實現方式二
    

問題：若是「控制器1」和「控制器2」裏面有2個方法是同樣的怎麼辦？

通常的作法以下（錯誤的）

• Controller的實現方式三
  

一般把通用的東西抽成一個公用的service，讓Controller去調用它而不是繼承它。

Controller使用過程的注意點

• 不要試圖去複用Controller，一個Controller只負責一小塊視圖。
• 不要在Controller中操做DOM，這不是控制器的職責。
• 不要在Controller中作數據格式化，ng有很好用的表單控件。
• 不要在Controller中作數據過濾操做，ng有$filter服務。
• 通常Controller是不會相互調用的，控制器之間的交互會經過事件進行。

• Model

• View

利用 Directive實現View複用

 

1487144166528.jpg

 

AngularJS的MVC是藉助於$scope實現的！！！

4. 神奇的$scope

• $scope是一個POJO（Plan old JavaScript Object）。

• $scope提供了一些工具和方法$watch()/$aply()。

• $scope是表達式的執行環境（或者叫做用域）。

• $scope是一個樹型結構，與DOM標籤平行。

• 子$scope對象會繼承父$scope上的 屬性和方法。

• 每個Angular應用只有一個根$scope對象（通常位於ng-app上）。

• $scope能夠傳播事件，相似DOM事件，能夠向上也能夠向下。

• $scope不只是mvc的基礎，也是後面實現雙向數據綁定的基礎。

• 可使用angular.element($0).scope()進行調試。

5. $scope的生命週期

 

1487146227181.jpg