AngularJS是很多Web開發(fā)人員在打造單頁面應(yīng)用程序時(shí)的***創(chuàng)建方案。必須承認(rèn)，無論開發(fā)哪一種應(yīng)用程序類型，團(tuán)體以及個(gè)人開發(fā)人員都將不可避免地面臨一系列挑戰(zhàn)，不過使用AngularJS將大大降低整個(gè)流程的實(shí)現(xiàn)難度。在AngularJS的幫助下，大家將能夠充分享受單頁面應(yīng)用程序開發(fā)與測(cè)試的過程，因?yàn)槠涮峁┑目蚣苣依丝蛻舳四Ｐ?視圖-控制器以及開發(fā)端模型-視圖-視圖模式。另外，它還提供大量其它功能組件，足以幫助用戶創(chuàng)建出富互聯(lián)網(wǎng)應(yīng)用程序。

[[158541]]

然而盡管開發(fā)人員對(duì)于AngularJS已經(jīng)相當(dāng)熟悉，但仍有很多潛在錯(cuò)誤在不知不覺中給應(yīng)用構(gòu)建工作帶來負(fù)面影響。不過只須遵循幾項(xiàng)預(yù)防措施，我們就完全能夠?qū)ζ浼右砸?guī)避。下面來看最為常見的幾種AngularJS錯(cuò)誤：

1.在AngularJS當(dāng)中不顧實(shí)際情況，一味利用匿名函數(shù)進(jìn)行聲明

請(qǐng)始終將自己的對(duì)象及函數(shù)分配給特定變量。通過這種方式，大家會(huì)發(fā)現(xiàn)控制與變更工作會(huì)變得更加輕松，代碼本身也會(huì)更加整潔且易于查閱。另外，大家能夠在不同文件當(dāng)中對(duì)代碼進(jìn)行輕松拆分，而這一點(diǎn)對(duì)于應(yīng)用程序的后續(xù)維護(hù)而言非常重要。

與此同時(shí)，這種作法對(duì)于保障可測(cè)試性也有著重要意義；當(dāng)聲明關(guān)系較為明確性，代碼的測(cè)試工作將變得非常簡單。作為開發(fā)人員，大家應(yīng)當(dāng)讓自己的代碼更加直觀且易于理解，而這一切都將在長久的工作周期中帶來回報(bào)?？偠灾裱@一原則將幫助各位顯著降低錯(cuò)誤數(shù)量并帶來諸多收益。

2.未使用$applyAsync

由于在AngularJS當(dāng)中調(diào)用$digest()不存在輪詢機(jī)制，因此其只會(huì)執(zhí)行現(xiàn)有指令。$applyAsync則能夠幫助我們有效延遲表達(dá)式解析，直到下一個(gè)$digest()周期的來臨。大家可以選擇以手動(dòng)或者自動(dòng)方式使用$applyAsync。

3. 使用jQuery

在處理事件以及實(shí)現(xiàn)AJAX操作時(shí)，jQuery已經(jīng)成為一套能夠顯著降低DOM操作難度的庫選項(xiàng)。但在另一方面，AngularJS的設(shè)計(jì)初衷在于提供一套能夠創(chuàng)建可擴(kuò)展性應(yīng)用程序的框架。其主要關(guān)注側(cè)重在于應(yīng)用程序的開發(fā)與測(cè)試環(huán)節(jié)，因此其無法被用于在HTML頁面中實(shí)現(xiàn)擴(kuò)展。換言之，在這種情況下我們并不需要使用jQuery。這時(shí)大家的理想選擇應(yīng)該是讓自己的代碼在進(jìn)行聲明之后超越HTML語法。

AngularJS在這方面擁有多項(xiàng)功能可供選擇，開發(fā)人員應(yīng)該能夠從中找到最理想的實(shí)現(xiàn)方案，而非一味使用jQuery。如果大家必須要進(jìn)行DOM操作，那么在指令中直接實(shí)現(xiàn)即可——而并不一定需要涉及jQuery。

4.未對(duì)應(yīng)用程序進(jìn)行優(yōu)化

缺乏必要優(yōu)化幾乎必然會(huì)引發(fā)AngularJS錯(cuò)誤。以下示例解釋了控制器中的代碼如何拖慢處理速度并導(dǎo)致潛在錯(cuò)誤：

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'); 
} 
} 
}); 

作為解決方案，我們可以嘗試在輸入內(nèi)容中添加一項(xiàng)超時(shí)。

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

如果大家希望使用一條指令，且確保其只被應(yīng)用于單一位置且不會(huì)在環(huán)境中引發(fā)其它意料之外的沖突，那么其實(shí)并不一定要使用scope隔離機(jī)制——這有可能反而造成錯(cuò)誤。在這里需要強(qiáng)調(diào)的是，我們無法在單一元素當(dāng)中同時(shí)使用兩條scope隔離指令。另外，在進(jìn)行嵌套、事件處理或者繼承等操作時(shí)，scope隔離也有可能引發(fā)問題。

6. 使用過多觀察程序

對(duì)于每一次聯(lián)編，AngularJS都會(huì)為其創(chuàng)建一個(gè)觀察程序。而在每個(gè)digest階段，觀察程序都會(huì)與之前的聯(lián)編進(jìn)行對(duì)比與評(píng)估，AngularJS將這一過程稱為臟檢查。大家可以想象一下，當(dāng)這一系列流程結(jié)束之后，最終會(huì)剩下多少觀察程序。

其實(shí)約束觀察程序數(shù)量的辦法非常簡單，大家只需要在確定scope模型不會(huì)發(fā)生變更的情況下不對(duì)其進(jìn)行觀察即可。這意味著觀察程序數(shù)量將大幅減少，而由此引發(fā)錯(cuò)誤的機(jī)率也會(huì)顯著降低。

7.忽視controllerAs語法

$scope常常被用于將某個(gè)模型分配至某個(gè)控制器對(duì)象。不過在這種情況下，注入scope一般并不是最理想的處理方式。相反，我們推薦大家選擇controllerAs語法來實(shí)現(xiàn)這一目標(biāo)。下面通過代碼共同了解如何利用controllerAs語法進(jìn)行模型定義：

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語法能夠顯著改善結(jié)果混亂的狀況，特別是在我們需要處理大量嵌套scope的情況下。它還能夠以多種其它方式加以運(yùn)用，從而幫助我們更輕松地實(shí)現(xiàn)應(yīng)用程序構(gòu)建。

8. 負(fù)載強(qiáng)度過大

很多Web開發(fā)人員傾向于在AngularJS當(dāng)中使用大量高強(qiáng)度處理線程，而克服這一壞習(xí)慣之后，我們可以使用工作線程并避免由高強(qiáng)度處理任務(wù)帶來的諸多錯(cuò)誤。高強(qiáng)度處理任務(wù)可能導(dǎo)致瀏覽器陷入卡死。工作線程是解決這類問題的好辦法，我們只需要直接使用工作線程機(jī)制即可，其能夠顯著降低大規(guī)模復(fù)雜對(duì)象的處理難度。

9.未能根據(jù)需要使用controllerAs語法

controllerAs語法具備極高的實(shí)用性，而且能夠幫助大家在構(gòu)建應(yīng)用程序時(shí)擁有更出色的代碼成果。當(dāng)下開發(fā)人員的常見錯(cuò)誤之一就是未能對(duì)其加以充分運(yùn)用并發(fā)揮其巨大潛能。事實(shí)上，當(dāng)我們將某套模型分配至某控制器工具時(shí)，controllerAs語法應(yīng)當(dāng)是***的實(shí)現(xiàn)機(jī)制。它還擁有一系列其它高實(shí)用度功能。下面通過代碼示例一起了解：

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

10. 未能充分理解解析器

基本上，解析器的介入會(huì)增加我們?cè)谳d入視圖時(shí)的實(shí)際時(shí)間。大家不應(yīng)過度使用解析器，因?yàn)檫@意味著網(wǎng)站的加載時(shí)間會(huì)因此延長，并最終導(dǎo)致令人難以忍受的訪問體驗(yàn)。

其中一部分錯(cuò)誤會(huì)引發(fā)Web開發(fā)人員最不希望看到的結(jié)果。而只要大家在開發(fā)工作當(dāng)中考慮到這些問題的存在并加以解決，那么很多錯(cuò)誤將根本不會(huì)出現(xiàn)，這也就免除了我們被迫從頭開始重新進(jìn)行代碼編寫的可能性。

原文標(biāo)題：10 Mistakes to Avoid on AngularJS