但我認為 AngularJS 帶給前端開發者最重要的思維還是模組化以及開發模式
先從模組化談起
模組化(Modularity)已經是前端開發中一個很重要的準則了,就像大部分書籍說的
模組化能夠讓我們更能夠輕易重用(reuse)各個模組,另外能夠讓你容易地進行測試
也能夠幫助開發者快速並明確地釐清一個大型的前端應用的架構
但要組織一個大量模組間相互依賴的關係其實是一個蠻重要的課題
如果處理不當容易造成模組間的緊密耦合關係,並且降低重用性以及難於測試
要如何解耦?你可以透過 Mediator Pattern 或是 Observer Pattern 這類型的設計模式
這其實就有點像是 Event Driven Development
當然要在一個大型應用中實作出這些架構還是有一定的複雜性存在
然而 AngularJS 提供的兩項強大的功能讓我們可以容易的進行模組化的開發
分別是 Data Binding AngularJS 教學 - Data Binding 以及 Dependency Injection(DI)
簡單說,AngularJS 提供了 scope 物件,進而分離了 View 與 Controller 之間的關聯
也繫結了 View 與 Model 間的資料
試想如果今天不是用 AngularJS,要如何做到 View 上的資料改變也能夠反映到 Model 上而且盡量讓模組間解耦?
Observer Pattern 是其中一個解法,而 AngularJS 給你的好處是,你不需要理會這些細節,遵循它的做法就對了
另外一個是依賴注入AngularJS Dependency Injection
AngularJS 算是提供了一個類似容器的東西負責管理你的元件(Components)以及AngularJS的元件
當 A元件需要 B元件時,可以透過依賴注入將 B 元件注入到 A元件之中
這讓你能夠不需要在意 B 元件是何時被建立、如何被建立的,你只需要專住 A 元件的邏輯
並了解你需要哪些元件,注入進來就對了
在測試上也很容易針對各個單一元件進行測試,如果你的元件有很複雜的深度依賴關係時,尤為明顯
就是這兩項功能,Data Binding 及 Dependency Injection 我認為是 AngularJS 最好用的功能
也是你在模組化你的應用程式時必須考慮的兩個環節
接下來是開發模式
大多數的前端應用多半都是負責針對資料進行呈現,因此你必須知道資料的樣子(Ex:有哪些欄位)
知道了有什麼資料以及大概的內容,可能就會針對畫面進行設計並予以呈現
這其實就類似於 Data Driven Development,而這跟 AngularJS 的關係又為何?
假如說你有以下的資料
[
{"id": "1", "name": "Share
your task", "priority": "High"},
{"id": "2", "name": "Sign
up free", "priority": "Middle"},
{"id": "3", "name": "Contact
John", "priority": "High"}
]
你可以透過 AngularJS 來組織你的畫面
<div ng-controller="TodoController">
<ul>
<li ng-repeat="todo in todos">
{{todo.name}}: {{todo.priority}}
</li>
</ul>
</div>
最後組織你的 Javascript 程式
demoApp.controller("TodoController", function($scope,
todoService){
$scope.todos = todoService.list();
});
大多數的前端類 MVC 的框架的開發流程不敢說相同但可能都雷同
重點在於 AngularJS 的 Data Binding 以及 Directive 能夠讓你更容易地實現這樣的 MVC 架構
但最重要的還是在於你的開發模式,AngularJS 給了開發者很多好用又強大的功能
它並不像 jQuery 著重在 DOM 的操作,也不像 jQuery UI 提供很多豐富的頁面元件,
AngularJS 希望開發者能夠遵循一個固定且正確的開發模式,來架構出一個好的前端應用。
沒有留言:
張貼留言