AngularJS開發工作當中必須避免的十種常見錯誤

　　AngularJS是很多Web開發人員在打造單頁面應用程式時的首選建立方案。必須承認，無論開發哪一種應用程式型別，團體以及個人開發人員都將不可避免地面臨一系列挑戰，不過使用AngularJS將大大降低整個流程的實現難度。在AngularJS的幫助下，大家將能夠充分享受單頁面應用程式開發與測試的過程，因為其提供的框架囊括了客戶端模型-檢視-控制器以及開發端模型-檢視-檢視模式。另外，它還提供大量其它功能元件，足以幫助使用者建立出富網際網路應用程式。

　　然而儘管開發人員對於AngularJS已經相當熟悉，但仍有很多潛在錯誤在不知不覺中給應用構建工作帶來負面影響。不過只須遵循幾項預防措施，我們就完全能夠對其加以規避。下面來看最為常見的幾種AngularJS錯誤：

　　1.在AngularJS當中不顧實際情況，一味利用匿名函式進行宣告

　　請始終將自己的物件及函式分配給特定變數。通過這種方式，大家會發現控制與變更工作會變得更加輕鬆，程式碼本身也會更加整潔且易於查閱。另外，大家能夠在不同檔案當中對程式碼進行輕鬆拆分，而這一點對於應用程式的後續維護而言非常重要。

　　與此同時，這種作法對於保障可測試性也有著重要意義；當宣告關係較為明確性，程式碼的測試工作將變得非常簡單。作為開發人員，大家應當讓自己的程式碼更加直觀且易於理解，而這一切都將在長久的工作週期中帶來回報。總而言之，遵循這一原則將幫助各位顯著降低錯誤數量並帶來諸多收益。

　　2.未使用$applyAsync

　　由於在AngularJS當中呼叫$digest()不存在輪詢機制，因此其只會執行現有指令。$applyAsync則能夠幫助我們有效延遲表示式解析，直到下一個$digest()週期的來臨。大家可以選擇以手動或者自動方式使用$applyAsync。

　　3. 使用jQuery

　　在處理事件以及實現AJAX操作時，jQuery已經成為一套能夠顯著降低DOM操作難度的庫選項。但在另一方面，AngularJS的設計初衷在於提供一套能夠建立可擴充套件性應用程式的框架。其主要關注側重在於應用程式的開發與測試環節，因此其無法被用於在HTML頁面中實現擴充套件。換言之，在這種情況下我們並不需要使用jQuery。這時大家的理想選擇應該是讓自己的程式碼在進行宣告之後超越HTML語法。

　　AngularJS在這方面擁有多項功能可供選擇，開發人員應該能夠從中找到最理想的實現方案，而非一味使用jQuery。如果大家必須要進行DOM操作，那麼在指令中直接實現即可——而並不一定需要涉及jQuery。

　　4.未對應用程式進行優化

　　缺乏必要優化幾乎必然會引發AngularJS錯誤。以下示例解釋了控制器中的程式碼如何拖慢處理速度並導致潛在錯誤：

this.maxPrice = '100';   
this.price = '55’; 
$scope.$watch('MC.price', function (newVal) { 
if (newVal || newVal === 0) { 
for (var i = 0; i < 987; i++) { 
console.log('ALL YOUR BASE ARE BELONG TO US'); 
} 
} 
}); 

　　作為解決方案，我們可以嘗試在輸入內容中新增一項超時。

　　5.在非必要情況下使用scope隔離

　　如果大家希望使用一條指令，且確保其只被應用於單一位置且不會在環境中引發其它意料之外的衝突，那麼其實並不一定要使用scope隔離機制——這有可能反而造成錯誤。在這裡需要強調的是，我們無法在單一元素當中同時使用兩條scope隔離指令。另外，在進行巢狀、事件處理或者繼承等操作時，scope隔離也有可能引發問題。

　　6. 使用過多觀察程式

　　對於每一次聯編，AngularJS都會為其建立一個觀察程式。而在每個digest階段，觀察程式都會與之前的聯編進行對比與評估，AngularJS將這一過程稱為髒檢查。大家可以想象一下，當這一系列流程結束之後，最終會剩下多少觀察程式。

　　其實約束觀察程式數量的辦法非常簡單，大家只需要在確定scope模型不會發生變更的情況下不對其進行觀察即可。這意味著觀察程式數量將大幅減少，而由此引發錯誤的機率也會顯著降低。

　　7.忽視controllerAs語法

　　$scope常常被用於將某個模型分配至某個控制器物件。不過在這種情況下，注入scope一般並不是最理想的處理方式。相反，我們推薦大家選擇controllerAs語法來實現這一目標。下面通過程式碼共同瞭解如何利用controllerAs語法進行模型定義：

function MainController($scope) { 
this.foo = 1; 
var that = this; 
var setBar = function () { 
// that.bar = {someProperty: 2}; 
this.bar = {someProperty: 2}; 
}; 
setBar.call(this); 
// there are other conventions: 
// var MC = this; 
// setBar.call(this); when using 'this' inside setBar() 
} 

　　controllerAs語法能夠顯著改善結果混亂的狀況，特別是在我們需要處理大量巢狀scope的情況下。它還能夠以多種其它方式加以運用，從而幫助我們更輕鬆地實現應用程式構建。

　　8. 負載強度過大

　　很多Web開發人員傾向於在AngularJS當中使用大量高強度處理執行緒，而克服這一壞習慣之後，我們可以使用工作執行緒並避免由高強度處理任務帶來的諸多錯誤。高強度處理任務可能導致瀏覽器陷入卡死。工作執行緒是解決這類問題的好辦法，我們只需要直接使用工作執行緒機制即可，其能夠顯著降低大規模複雜物件的處理難度。

　　9.未能根據需要使用controllerAs語法

　　controllerAs語法具備極高的實用性，而且能夠幫助大家在構建應用程式時擁有更出色的程式碼成果。當下開發人員的常見錯誤之一就是未能對其加以充分運用併發揮其巨大潛能。事實上，當我們將某套模型分配至某控制器工具時，controllerAs語法應當是首選的實現機制。它還擁有一系列其它高實用度功能。下面通過程式碼示例一起了解：

function MainController($scope) { 
this.title = 'Some title'; 
$scope.$watch(angular.bind(this, function () { 
return this.title; 
}), function (newVal, oldVal) { 
// handle changes 
}); 
} 

　　10. 未能充分理解解析器

　　基本上，解析器的介入會增加我們在載入檢視時的實際時間。大家不應過度使用解析器，因為這意味著網站的載入時間會因此延長，並最終導致令人難以忍受的訪問體驗。

　　其中一部分錯誤會引發Web開發人員最不希望看到的結果。而只要大家在開發工作當中考慮到這些問題的存在並加以解決，那麼很多錯誤將根本不會出現，這也就免除了我們被迫從頭開始重新進行程式碼編寫的可能性。