<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首页»NodeJS»AngularJS开发工作当中必须避免的十种常见错误

    AngularJS开发工作当中必须避免的十种常见错误

    来源:51cto 发布时间:2015-12-10 阅读次数:

      AngularJS是很多Web开发人员在打造单页面应用程序时的首选创建方案。必须承认,无论开发哪一种应用程序类型,团体以及个人开发人员都将不可避免地面临一系列挑战,不过使用AngularJS将大大降低整个流程的实现难度。在AngularJS的帮助下,大家将能够充分享受单页面应用程序开发与测试的过程,因为其提供的框架囊括了客户端模型-视图-控制器以及开发端模型-视图-视图模式。另外,它还提供大量其它功能组件,足以帮助用户创建出富互联网应用程序。

      然而尽管开发人员对于AngularJS已经相当熟悉,但仍有很多潜在错误在不知不觉中给应用构建工作带来负面影响。不过只须遵循几项预?#26469;?#26045;,我们就完全能够?#20113;?#21152;以规避。下面来看最为常见的几种AngularJS错误:

      1.在AngularJS当中?#36824;?#23454;?#26159;?#20917;,一味利用匿名函数进行声明

      请始终将自己的对象及函数分配给特定变量。通过这种方式,大?#19968;?#21457;现控制与变更工作会变得更加轻松,代码本身?#19981;?#26356;加整洁且易于查阅。另外,大家能够在不同文件当中?#28304;?#30721;进行轻松拆分,而这一点对于应用程序的后续维护而言非常重要。

      与此同时,这种作法对于保障可测试性也有着重要意义;当声明关系较为明确性,代码的测试工作将变得非常简单。作为开发人员,大家应当让自己的代码更加直观且易于理解,而这一切都将在长久的工作周期中带来回报。总而言之,遵循这一原则将帮助各位显著降低错误数量并带来诸多收益。

      2.未使用$applyAsync

      由于在AngularJS当中调用$digest()不存在轮询机制,因此其只会执行现有指令。$applyAsync则能够帮助我们有效延迟表达式解析,直到下一个$digest()周期的来临。大家可以选择以手动或者自动方式使用$applyAsync。

      3. 使用jQuery

      在处理?#24405;?#20197;及实现AJAX操作时,jQuery已经成为一套能够显著降低DOM操作难度的库选项。但在另一方面,AngularJS的设计初衷在于提供一套能够创建可扩展性应用程序的框架。其主要关注侧重在于应用程序的开发与测试?#26041;冢?#22240;此其无法被用于在HTML页面中实现扩展。换言之,在这种情况下我们并不需要使用jQuery。这时大家的理想选择应该是让自己的代码在进行声明之后超越HTML语法。

      AngularJS在这方面拥有多项功能可供选择,开发人员应该能够从中?#19994;?#26368;理想的实现方案,而非一味使用jQuery。如果大家必须要进行DOM操作,那么在指令中直接实现即可——而并不一定需要涉及jQuery。

      4.未对应用程序进行优化

      缺乏必要优化?#36127;?#24517;然会引发AngularJS错误。以下示例解释了控制器中的代码如何?#19979;?#22788;理速度并导致潜在错误:

    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隔离

      如果大家希望使用一条指令,且确保其只被应用于单一位?#20204;?#19981;会在环境中引发其它意?#29616;?#22806;的冲突,那么其实并不一定要使用scope隔离机制——这有可能反而造成错误。在这里需要强调的是,我们无法在单一元素当中同时使用?#25945;鮯cope隔离指令。另外,在进行嵌套、?#24405;?#22788;理或者继承等操作时,scope隔离也有可能引发问题。

      6. 使用过多观察程序

      对于每一次联编,AngularJS都会为其创建一个观察程序。而在每个digest阶段,观察程序都会与之前的联编进行?#21592;?#19982;评估,AngularJS将这一过程称为脏检查。大家可以想象一下,当这一系列流程结束之后,最终会剩下多少观察程序。

      其实?#38469;?#35266;察程序数量的办法非常简单,大家只需要在确定scope模型不会发生变更的情况下不?#20113;?#36827;行观察即可。这意味着观察程序数量将大幅减少,而由此引发错误的机率?#19981;?#26174;著降低。

      7.忽视controllerAs语法

      $scope常常被用于将某个模型分配至某个控制器对象。不过在这种情况下,注入scope一般并不是最理想的处理方式。相反,我们推荐大?#24050;?#25321;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语法具备极高的实用性,而且能够帮助大?#20197;?#26500;建应用程序时拥有更出色的代码成果。当下开发人员的常见错误之一就是未能?#20113;?#21152;以充分运用并发挥其巨大潜能。事实?#24076;?#24403;我们将?#31243;?#27169;型分配至某控制器工具时,controllerAs语法应当是首选的实现机制。它还拥有一系列其它高实用度功能。下面通过代码示例一起了解:

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

      10. 未能充分理解解析器

      基本?#24076;?#35299;析器的介入会增加我们在载入视图时的实际时间。大家不应过度使用解析器,因为这意味着网站的加载时间会因?#25628;?#38271;,并最终导致令人难以忍受的访问体验。

      其中一部分错误会引发Web开发人员最不希望看到的结果。而只要大?#20197;?#24320;发工作当中考虑到这些问题的存在并加以解决,那么很多错误将根本不会出现,这也就免除了我?#28508;?#36843;从头开始重新进?#20889;?#30721;编写的可能性。

    QQ群:WEB开发者官方群(515171538),验证消息:10000
    微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
    提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
    网友评论(共1条评论) 正在载入评论......
    理智评论文明上网,拒绝恶意谩骂 发表评论 / 共1条评论
    登录会员中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    山东时时彩十一选五 山东十一选五开奖软件 平特独平一肖 北京时时彩是官方的吗 英超积分 黑金快乐8登录网站 彩票平台漏洞修改稳赚 mg特大大奖视频 五大联赛是哪五大 广东省南粤风采36选7走势图 上海选四开奖结果号码 希腊五分彩开奖号码 重庆时时彩开奖2元网 双色球基本走势图100期开门彩 湖南彩票一等奖