天天看點

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一下的版本的應用系統,同樣也不實用。