天天看點

Angularjs開發一些經驗總結

   在去年到今年參與了2個使用Angularjs作為用戶端開發架構的項目開發。主要利用asp.net web api作為restfull服務提供架構和angularjs結合。Angularjs作為html的擴充,旨在建立一個豐富的動态web應用,通過Directive建立一套html擴充的DSL模型,利用PM模式變形MVVM(在網上很多稱MVC模式,本人認為在angular0.8是屬于經典MVC模式,但在1.0把scope獨立注入過後,更傾向于MVVM模式,這将會後續随筆中寫道)簡化前端開發和使得前端業務邏輯得以分離,view和表現邏輯的分離,更便于維護,擴充。Angularjs本來就是采用TDD開發的,提供了一套單元測試元件和End 2 End的測試架構。Angularjs的的強大之處在于提供了一套内似WPF,Silverlight的強大資料綁定和格式化,過濾元件,這也是MVVM模式所必備的條件;再加之IOC的注入機制,使得不能業務邏輯的分離,服務代碼的更大程度抽象重用。

     在這節随便中将讨論的angularjs開發的一些基本準則,為什麼會有這篇随便呢,因為看見一些項目對于angularjs的亂用。

  1:不要一個page一個God似無所不能的controller包含所有頁面邏輯。

        Angularjs ng-controller旨在将業務邏輯的區分,更推薦按照業務邏輯的劃分controller,做到業務功能的高内聚,controller的單一原則SRP。

  2:View中包含盡量少的邏輯。

       就像jsp,asp這類服務端模闆引擎一樣,我們應該把盡量少的邏輯放在view中,因為這樣會導緻view和邏輯的緊耦合性,view在軟體開發中是最易變化的,而表現層邏輯卻相對于view是相對穩定的行為。同時也導緻的view中的邏輯不能被自動化測試,持續內建所覆寫,這将導緻以後修改重構和子產品的內建的痛苦。很明顯的就是太多的angularjs的ng-switch,ng-when和頁面計算表達式等等。

3:注意一些特殊的節點式的angularjs directive,因為在IE7上這是不被認識的,因為IE的嚴格XML模式。如果你想make ie7 happy,

     1:請注意導入json2或者json3的js

     2:xmlns:ng指令空間和節點element式directive。

<html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script> document.createElement('ng-include'); document.createElement('ng-pluralize'); document.createElement('ng-view'); // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:pluralize'); document.createElement('ng:view'); </script> <![endif]--> </head>

    3:除官網介紹的幾個注意點之外 需要将

 另外注意html 頭部要引入(否則會進入坑爹的quirk模式)

4:在controller和service中絕對不能出現html的DOM和CSS代碼。

      這會導緻邏輯的混雜耦合,對于angularjs自身的綁定對html操作,很多時候你會分不清是view的影響源,導緻修複bug,和新增功能,重構的艱難,常常出現很多的詭異行為。最好的實踐模式則是把必須的dom,css操作移向angular的Directive,或者view中。在angularjs模式中隻有directive和view才能出現dom和css的邏輯操作。

  5:controller中公用的邏輯推向service(factory,value,config),采用IOC的注入,提高代碼的重用度,修改的單一點,開閉原則。

  6:controller應該隻包含業務邏輯,對于資料模型的格式化過濾盡量交給angular架構filter等處理。

7:viewmodel中最好建立一個通用屬性比如vm,它承載view渲染的最小量化model,對于model的變形事件則在vm之外scope之上。這才是MVVM推薦方式。事件相當于WPF中的command,負責模型事件的傳遞修改模型,進而從模型的改變通知view的強制更新(WPF中model必須實作INotifyPropertyChange接口)。同時這樣vm屬性也便于資料的填充和收集回發服務端。

8:IOC注入優先,有助于良好的設計,邏輯的可重用和單元子產品的可測試性,面向對象的“開閉原則”,修改的單一點。

9:良好的分層設計,對于view的互動采用controller通過viewmode(scope)的推送,與伺服器的互動推向service層次,利用angularjs的$resource或者$http擷取更新資料model,以及與服務端互動。層次劃分屬于縱向分割,将相同功能邏輯的接口放在一起,架構層次,而model則從業務的邏輯橫向分離。

11:如果你的公司應用了靈活開發則,TDD的開發是必備的,angularjs本也是解決javascript測試驅動開發項目。

 12:scope的純淨性,scope上的每一個函數和屬性必須為view所用(事件傳遞或者屬性綁定),不用的可以作為工具函數或者service處置.

   最後想說說angularjs也不是銀彈,并不是萬能的,不是所有的項目都适合應用,它适用于CRUD的應用系統,内置了一些預設規則(慣例優先),對于表現層頻繁互動的項目不适用,對于一些特殊的項目比如spring hdiv的項目也不是那麼友好,或者就是你希望相容更多的IE8一下的版本的應用系統,同樣也不實用。

本文轉自破狼部落格園部落格,原文連結:http://www.cnblogs.com/whitewolf/archive/2013/03/24/2979344.html,如需轉載請自行聯系原作者