分享一下在大型的 Angularjs 項目中組織代碼幾種常見的方式躲惰。隨著項目代碼量巨增致份,如何組織 angularjs 項目的代碼就變得事關(guān)重要了。
常規(guī)的 javascript 組織代碼方式
1. 繼承
2. 通過混入(Mixins)方式來實現(xiàn)組合
3. 使用 javascript 對象來實現(xiàn)組合
在 angularjs 中特有的方式
4. 使用 Service 來實現(xiàn)組合
5. 使用 helper 控制器來實現(xiàn)組合
1. 代碼組織方式:繼承
定義
可以共享父級的一些基本特性础拨,例如列表的排序和分頁
問題
容易形成多層繼承氮块,增加了代碼的復(fù)雜度
無法現(xiàn)實不同分支間的代碼共享。
創(chuàng)建 angularjs 模塊 myApp 和一個控制器 EmployeeListCtrl
定義 Employee 類诡宗,構(gòu)造函數(shù)接受 name 和 dept 兩個參數(shù)
定義 EmployeeListCtrl 控制器
定義 BaseListCtrl 父控制器
2. 代碼組織方式:混入(Mixins)
將一個對象的方法添加(混入)到另一個對象中以使用滔蝉。
可以使用 angular.extend 來將一個對象的方法復(fù)制到另一個對象上
應(yīng)用場景
如果想要直接將共享方法添加到控制器或作用域上時
如果想要復(fù)寫控制器中的特定的方法時
問題
在大文件中,代碼的可追溯性不好塔沃,無法判斷代碼出處蝠引。
耦合度強,一旦方法被覆蓋蛀柴,無法訪問到原有方法螃概。
3. 代碼組織方式:Javascript 對象
使用 javascript 對象封裝函數(shù)的方式來實現(xiàn)組合
應(yīng)用場景
1. 使用于較為簡單對象間的代碼引用
2.如果需要考慮性能,這種方式性能要優(yōu)于其他方式
問題
無法發(fā)揮 angular 依賴注入的威力
4 代碼組織方式:Angular Services 實現(xiàn)組合
應(yīng)用場景
不包括保存控制器狀態(tài)的所有有共性的方法(例如 打日志鸽疾,解析數(shù)據(jù))
需要在控制間分享的單例
好處
實現(xiàn)依賴注入吊洼,解耦度高,易測試
5 代碼組織方式:Helper 控制器實現(xiàn)組合
類似于普通對象方式制肮,不同的是這個對象是由 $controller 實例化的對象冒窍,然后依賴注入
應(yīng)用場景
當需要訪問由 angular 所提供的對象。例如 services constants filters
與上面說到 service 不同豺鼻,我們可以在同一個控制器實例化多個這樣的對象综液,還
可以保持控制器的狀態(tài)
優(yōu)點
實現(xiàn)依賴注入,解耦度拘领,對 service 是一種補償意乓,可以應(yīng)用到 service 無法滿足的場景