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

hipqbd · 发表于 2018-8-12 22:45:33

本帖子中包含更多资源

您需要登录才可以下载或查看，没有账号？立即注册

x

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开发人员最不希望看到的结果。而只要大家在开发工作当中考虑到这些问题的存在并加以解决，那么很多错误将根本不会出现，这也就免除了我们被迫从头开始重新进行代码编写的可能性。
原文标题：10 Mistakes to Avoid on AngularJS

来源链接： http://www.techweb.com.cn/network/system/2015-12-09/2238510.shtml