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

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

來源:51cto 發布時間:2015-12-10 閱讀次數:

  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開發人員最不希望看到的結果。而只要大家在開發工作當中考慮到這些問題的存在并加以解決,那么很多錯誤將根本不會出現,這也就免除了我們被迫從頭開始重新進行代碼編寫的可能性。

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共1條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共1條評論
登錄會員中心
大发国际网址 海伦市| 扶沟县| 闽清县| 改则县| 汉寿县| 贡嘎县| 达拉特旗| 舞阳县| 荃湾区| 贺州市| 保山市| 河北省| 哈巴河县| 渑池县| 东阳市| 阿拉善盟| 九江县| 绍兴市| 古浪县| 高密市| 永靖县| 衡东县| 黑龙江省| 砚山县| 铜梁县| 共和县| 彭阳县| 贡嘎县| 报价| 阜宁县| 进贤县| 雷州市| 保靖县| 祁连县| 迁西县| 通江县| 忻州市| 无极县| 石城县| 垣曲县| 辽阳市| 永泰县| 芒康县| 开化县| 天长市| 石家庄市| 汝阳县| 大名县| 磐安县| 民县| 曲靖市| 龙岩市| 华蓥市| 略阳县| 晋中市| 凌源市| 竹溪县| 界首市| 彭阳县| 运城市| 皋兰县| 宁阳县| 上犹县| 五指山市| 广汉市| 禹州市| 山西省| 长子县| 兖州市| 托克托县| 榕江县| 霞浦县| 甘孜| 区。| 高安市| 万安县| 天长市| 普定县| 沂南县| 泾川县| 苗栗县| 卓资县| 平乡县| 称多县| 防城港市| 漳浦县| 乌鲁木齐县| 定州市| 丰城市| 宁津县| 普洱| 丰镇市| 唐河县| 于都县| 望奎县| 海城市| 大同市| 湖北省| 银川市| 原平市| 辽宁省| 全州县| 西昌市| 苏尼特左旗| 青州市| 平阳县| 静安区| 白城市| 仙游县| 连平县| 辽阳市| 道孚县| 新密市| 灵台县| 惠水县| 施秉县| 土默特左旗| 芒康县| 安岳县| 吴旗县| 玛曲县| 荔浦县| 滨海县| 湘西| 赤壁市| 奉新县| 全南县| 桦川县| 抚州市| 航空| 四平市| 湖州市| 桂林市| 两当县| 清涧县| 临汾市| 彰化市|