主页»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群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
网友谈论(共1条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共1条谈论
登录会员中心