iT邦幫忙

DAY 24
0

我在前端 ng 時系列 第 24

模組化 - Modularity

  • 分享至 

  • xImage
  •  

繼續 「AngularJS 結構」的 "依功能分類資料夾”,程式已依照不同的功能放在各自的資料夾底下。
假如讓功能除了分資料夾外,還讓每個功能都有專屬的 module。
最後在用一個 root module 把全部的 modules 集合起來會讓架構更彈性。

這就是基本的模組化概念!

AngularJS 本身就是已 Modularity 觀念在開發。
例如,在使用 directives 跟 filters 時不用知道內部怎麼運作,只要在乎有沒有完成我們要的功能就好。
現在把這樣的概念放大到我們的 applications。
我們在分類功能的時候,只要知道該 modules 可以提供我們什麼服務,每個 modules 只要負責本身的工作就好。

範例,
一個 module 叫 User 裡頭有 UserInfo 跟 UserService 兩個檔案。

angular.module('User', []);
angular.module('User').service('UserService', function () {});
​angular.module('User').factory('UserInfo', function () {});

這時候新增一個 module 就做 Order,專門處理訂單的事宜。

angular.module('Order', []);

我們知道訂單是需要知道目前使用者的資料,
這時候我們可以 DI (dependency injector) UserInfo 進去 Order 裡,
並且確定我們取得的到使用者資料,不要在乎裡面的程式碼怎麼運作的。

angular.module('Order', ['User’]).
     controller(‘OrderCtrl’, function (UserInfo, $scope) {
          // 邏輯交給 UserInfo 處理,我們只要知道 UserInfo 就好
          $scope.user = UserInfo.getName();
})

取得使用者資料的邏輯都放在 User module 裡面,Order module 保持的很乾淨。

模組化的好處有

1. 乾淨
每個 module 只要管好自己的功能,其他功能跟其他的 module 取得就好。

2. 可重複使用
尤其對一些我們很常共用的功能,我們更要把它取出來做成 module。
ex: exception handing、common helper function、全站資料、等
統一把每個功能分開 Module ,不會讓重複的程式碼一在出現,實現 DRY (don’t repeat yourself)

3. 簡單擴充跟維護
模組化就像是樂高,只要把功能 module 都完成,再拼起來就好。
假如有一天需求變更,需要變更某功能。
我們只要確保該 module 對外的窗口不要壞掉,就可以簡單的擴充跟維護。

4. 團隊合作不打架
模組化非常適合拿來切割工作。
因為每個 module 都可獨立作業,團隊間可以用 module 功能分工。
只要確保共用的程式碼是互相瞭解的就好。
(當知道不用花時間 merge 一堆檔案的時候,真的是阿密陀佛)

5. LIFT
在「AngularJS 結構」介紹的 LEFT ,只要遵循模組化。就可以簡單的達到該原則。

- Locating our code is easy (可簡單的找到程式放哪裡)

  • Identify code at a glance (需馬上知道該程式在幹嘛)
  • Flat structure as long as we can (保持扁平化結構)
  • Try to stay DRY (Don’t Repeat Yourself)(儘量做到不要重複你自己)

當初我在學習模組化的時候,有想過其實不用把功能拆成模組化,我們還是可以實現上面的優點。
可是我必須小心注意每個環節,也要確保其他工程師知道彼此的進度。
我才能不用模組化達成上面介紹的總總優點。

所以只要團隊遵循模組化的想法,就可以簡單的達到很好的效果。
個人推薦只要有兩個功能以上的專案,都非常適合的引進模組化。
(好像是都用的意思...)


參考:
AngularJS style guide - by john papa
code organization AngularJS javascript


上一篇
AngularJS 結構 - 心路歷程
下一篇
瞭解重要的 Providers
系列文
我在前端 ng 時30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言