angularjs1.X進階筆記(3)——如何重構controller

目錄

• 一. 結構拆分
• 二.基本代碼優化

本篇是內部培訓交流會的摘要總結。

培訓PPT和示例代碼已托管至我的github倉庫：

https://github.com/dashnowords/blogs/tree/master/Demo/rebuild-angularjs-controller

一. 結構拆分

1. 小型項目

   通過子路由實現拆分分層，父級控制器控制共用模塊，提供公共能力，子級分管自己的模塊，父子級之間通過消息機制進行通訊。

1. 中型項目

   通過組合視圖實現模塊劃分，組合視圖共用同一個路由地址，分管不同的模塊，組合視圖之間需要通過父級控制器（或組合視圖的根控制器）來實現通訊。

1. 大型項目

   通過視圖組件指令，業務模塊指令來進行更細粒度的模塊拆分，模塊通信依然建議通過消息機制來進行。

二.基本代碼優化

1. 業務邏輯代碼

   封裝Service，通過依賴註入在Controller中或指令中使用。

2. 數據加工代碼

   建議使用表達性更強的通用工具庫underscore.js或lodash.js提升效率，精簡代碼。

3. DOM操作

   建議學習和習慣Angular數據驅動的主導思想，通過數據來啟用或消除DOM操作，具體的執行需要通過自定義指令進行實現。