金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 总结AngularJS开发者最常犯的十个错误,性能的方

总结AngularJS开发者最常犯的十个错误,性能的方

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-21 10:23

9.  Debounce ng-model

金沙棋牌官方平台,你可以用 ng-model 来控制输入调用方法的时间间隔。举例来说,像谷歌那样的搜索输入的时间间隔,你必须使用 ng-model-options=”{debounce:250}”。这能让其在 digest 周期内,至少每 250ms 就检测一次触发。

现在的开发时间是非常宝贵的,因此你需要一个像 AngularJS 这样全面的框架来快速开展业务。

经过大量研究,我们收集了一些别的重要工作来提高 AngularJS 的性能。

下面有 4 个用于提升 AngularJS 性能的工具。

以下是它们在AngularJS源代码中的定义:

4. WebdriverIO

WebdriverIO 让你只用寥寥几行代码就能控制浏览器或移动应用程序。你的测试代码看起来会很简单明了,易于阅读。它的集成测试运行工具可以让你以同步的方式编写异步命令,这样你就不必在意如何处理 Promise 以避免竞争条件。此外,它去掉了所有繁琐的设置工作并且可以为你管理 Selenium 会话。

三、依赖注入

3. TestingWhiz

TestingWhiz 是最人性化的自动化测试工具之一,因为它拥有无代码脚本的特性。TestingWhiz 提供了端到端测试方案用于测试 AngularJS 应用程序。它有各种测试命令可以轻松创建 AngularJS 相关的测试。TestingWhiz 有一个相对动态的等待命令,所以以同步不同服务器等待 AngularJS 组件的时间。

金沙棋牌官方平台 1

var app = angular.module('app',[]);
app.service('MyService', function(){
 //service code
});
app.controller('MyCtrl', function($scope, MyService){
 //controller code
});

8. 为了调试问题使用 console.time

如果你的应用正努力调试问题并影响了Angular 性能,就需要使用 console.time,这是一个很不错的 API。

十、使用jQuery

2. 使用 Native JavaScript 或 Lodash

Lodash 通过简单地重写一些基本逻辑,而不是依靠内置的 AngularJS 方法来提高应用程序性能。如果你的应用程序中没有包含 Lodash,那么你可能需要重新编写 Native JavaScript 中的所有代码了。

var app = angular.module('app',[]);

app.service('helloWorldService', function(){
 this.hello = function() {
 return "Hello World";
 };
});

app.factory('helloWorldFactory', function(){
 return {
 hello: function() {
  return "Hello World";
 }
 }
});

1. 用 Batarang 工具来对 Watcher 进行基准测试

对于使用 Angular 的团队来说, Batarang  是一个不错的开发工具,它可以减少你在调试上的压力。尽管可能有很多新特性,但它们主要还是来帮助你描述和追踪你的 AngularJS 的性能。此外,它是通过监控树来决定哪个范围不被销毁的,例如,通过查看内存使用量是否有增加来决定是否销毁。

单元测试是一个测试工作的基础,但考虑到app的日益复杂,集成测试更贴近实际情况。幸运的是,AngularJS的核心团队已经提供了必要的工具。

2. GulpJS

GulpJS 用于自动执行重复性的任务,是流式的构建系统,可以使用 JSHint 或 ESLint 来检查 JavaScript。

金沙棋牌官方平台 2

前言

6. 不要使用 ng-repeat

没有使用 ng-repeat 指令就是应用程序的最大胜利,因此建议避免使用 ng-repeat 并使用 JavaScript 构建 HTML。对于发声的应用程序,使用 ng-if 导致增加不必要的观察者。使用 ng-bind-html 指令是摆脱这个问题的更好的解决方案。

当你检索字面值时,原型链并不起作用。如果navCtrl也同时被更新的话,检索原型链是必须的;但如果值是一个对象,这就会发生。(记住,在Javascript中,函数、数组和对象都是对象)

小结

就像我们看到的,由于引入了新的或改进的 JavaScript 框架,Web 开发变得更加简单。为了从这些框架获得最大的利益,你必须定期优化性能。

AngularJS 是构建 Web 应用的的强大框架,无与伦比。通过提升 AngularJS 的性能,开发者可以用更少的代码做更多的事。甚至产生“意大利面条”的风险也大大降低。

1 赞 1 收藏 评论

金沙棋牌官方平台 3

依赖注入是AngularJS最好的模式之一,它使得测试更为简单,并且依赖任何指定对象都很明确。AngularJS的注入方式非常灵活,最简单的方式只需要将依赖的名字传入模块的function中即可:

金沙棋牌官方平台 4

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
 $timeout(function(){
 console.log($scope);
 }, 1000);
}]);

1. Protractor

Protractor 是最强大的自动化端到端的 Angular 测试工具,由 Angular 团队开发。Protractor 由一些伟大的技术组合而来,比如 NodeJS、Selenium]WebDriver、Mocha、Cucumber 和 Jasmine。

金沙棋牌官方平台 5

五、Service vs Factory

9 种改善 AngularJS 性能的方法

2017/07/20 · JavaScript · AngularJS

原文出处: Justin Spencer   译文出处:oschina   

AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化,但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题。

目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响。因此,有必要深入挖掘影响企业成长的各种因素。

但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为每个AngularJS开发专家的重要需求。这就是为什么我们在这个博客中列出了九种提高 AngularJS 性能的方法的原因。

相关阅读:2017 年前 5 大 JavaScript 框架

最近,巴西计算机科学家进行了一项调查,他们发现有关引起AngularJS程序员性能问题的原因的有趣事实。对于AngularJS在现实世界中的性能并没有太多的信息。但是基于调查的研究为此提供了一些证据。

该调查得到下面结果:

金沙棋牌官方平台 6

  • 45%的投票者表示是由于源代码问题影响的性能。
  • 只有 8% 的投票者承认实际上做了改变。
  • 一些受访者指责 AngularJS 的架构。
  • 其中有些则指责不必要的双向绑定。

在对 AngularJS 性能进行了如此多的讨论之后,现在可以看看九种可以改善 AngularJS 性能的方法了。

AngularJS 的性能可以简单地通过它的 digest 周期测量。digest 周期可以被作为一个循环。在这个周期中,Angular 通过所有的 $scopes来检查所有变量的改变。如果$scope.myVar 是定义在控制器(controller)中并且标记为观察,那么 Angular  将会对myVar更新进行监视,这种监视每迭代循环一次就检查一次。

<div ng-controller="navCtrl">
 {{user.name}}
 <div ng-controller="loginCtrl">
 {{user.name}}
 <input ng-model="user.name"></input>
 </div>
</div>

7. 使用 $watchCollection (包含第三个参数)

使用带有两个参数的 $watch 是好的 – 但是在使用 $watch(‘value’,function(){},true)时带有三个参数的 $watch,这使得 Angular 可以执行深度检查(以检查对象的每个属性)。 但代价可能是十分昂贵的。因此,为了解决这样一个性能问题,Angular提供了 $watchCollection(‘value’, function(){})指令,它与第三个参数几乎相同,只是以低成本检查对象属性的第一层。

直到你准备将其部署到生产环境并希望精简代码时,一切都很美好。如果使用UglifyJS,之前的例子会变成下面这样:

5. ng-if比ng-show更佳

ng-show 指令在特定元素上切换 CSS 显示属性,而ng-if指令实际上从 DOM 中删除元素,并在需要时重新创建它。此外, ng-switch 指令是 ng-if 的替代方案,它们具有相同的性能。

数据也应该存储在服务中,除非它们已经被绑定在$scope上了。服务本身是单例的,在应用程序的整个生命周期都存在,然而控制器在应用程序的各状态间是瞬态的。如果数据被保存在控制器中,当它被再次实例化时就需要重新从某处获取数据。即使将数据存储于localStorage中,检索的速度也要比Javascript变量慢一个数量级。

4. 尽量减少观察者

AngularJS 完全围绕在它的 digest cycle 中。每当触发 digest cycle 时,它将循环遍历每个绑定以检测模型变动。通过减少观察者的数量,可以减少每个 digest cycle 中消耗的时间。它还可以减少应用程序的内存占用。

一旦我们用Protractor完成了集成测试的编写工作,接下去就是执行测试了。等待测试执行,尤其是集成测试,对每个开发人员都是一种淡淡的忧伤。AngularJS的核心团队也感到极为蛋疼,于是他们开发了Karma。

3. Chrome开发工具Profiler,用于识别性能瓶颈

这是一个方便的工具,可让你选择要创建哪个配置文件类型。记录分配时间点、获取堆快照并记录所分配的配置文件用于内存剖析。在这个性能优化之后,你的应用程序将在不到两秒钟内完全呈现,用户可以随意与之进行交互。

我们已经建立了Protractor,一个端到端的测试器用以模拟用户交互,这能够帮助你验证你的AngularJS程序的健康状况。

var underscore = angular.module('underscore', []);
underscore.factory('_', function() {
 return window._; //Underscore must already be loaded on the page
});
var app = angular.module('app', ['underscore']);

app.controller('MainCtrl', ['$scope', '_', function($scope, _) {
 init = function() {
  _.keys($scope);
 }

 init();
}]);

如果你选择了loginCtrl,那么你可能已经理解了原型继承是如何工作的了。

但一个非常棒的JQuery是必需品时,这一天可能会到来,但在一开始就引入它,是一个常见的错误。

这样做能够精简代码,并且AngularJS知道如何解释这些明确的依赖:

3.1 全局依赖

不去测试AngularJS app,这是没有道理的。AngularJS的设计使得它从头到底都是可测试的,依赖注入和ngMock模块就是明证。AngularJS核心团队已经开发了众多能够使测试更上一层楼的工具。

var app = angular.module('app',[]);

app.controller('MainCtrl', function($scope, $timeout){
 $timeout(function(){
 console.log($scope);
 }, 1000);
});
var services = angular.module('services',[]);
services.service('MyService', function(){
 //service code
});

var controllers = angular.module('controllers',['services']);
controllers.controller('MyCtrl', function($scope, MyService){
 //controller code
});

var app = angular.module('app',['controllers', 'services']);

AngularJS,直白地说,就是一个MVC框架。它的模型并没有像backbone.js框架那样定义的如此明确,但它的体系结构却恰如其分。当你工作于一个MVC框架时,普遍的做法是根据文件类型对其进行归类:

我们还有一些其他的端到端测试工具,但是Protractor的优势是它能够理解如何与AngularJS代码协同工作,尤其是在$digest周期中。

由于TDD可能不是每个开发人员都喜欢的开发方式,因此当开发人员检查代码是否工作或是否影响了其它东西时,他们会做手工测试。

在此之后,一个常见的策略是对相同类型的对象归类。

Factory在设计一个包含很多私有方法的类时也很有用:

app.factory('helloFactory', function() {
 return function(name) {
 this.name = name;

 this.hello = function() {
  return "Hello " + this.name;
 };
 };
});
function factory(name, factoryFn) { 
 return provider(name, { $get: factoryFn }); 
}

function service(name, constructor) {
 return factory(name, ['$injector', function($injector) {
 return $injector.instantiate(constructor);
 }]);
}

七、过多的watcher

9.1 Protractor

9.2 Karma

Underscrore.js是一个很赞的库,它可以以函数式的风格简化Javascript代码,通过以下方式,你可以将其转化为一个模块:

Batarang也提供了一个依赖图, 如果我们正在接触一个未经测试的代码库,这个依赖图就很有用,它能决定哪些服务应该被重点关照。

这种方式和前面第一部分所谈到的目录结构差不多:不够好。根据相同的理念,可以按照特性归类,这会带来可扩展性。

在编写AngularJS程序时,时常会出现这种情况:某个对象有一个依赖,而这个对象又将其自身绑定在全局scope上,这意味着在任何AngularJS代码中这个依赖都是可用的,但这却破坏了依赖注入模型,并会导致一些问题,尤其体现在测试过程中。

(function () { 
 var root = $(document.getElementsByTagName('body'));
 var watchers = [];

 var f = function (element) {
 if (element.data().hasOwnProperty('$scope')) {
  angular.forEach(element.data().$scope.$$watchers, function (watcher) {
  watchers.push(watcher);
  });
 }

 angular.forEach(element.children(), function (childElement) {
  f($(childElement));
 });
 };

 f(root);

 console.log(watchers.length);
})();

通过这个方式得到watcher的数量,结合Batarang性能板块中的watch树,应该可以看到哪里存在重复代码,或着哪里存在不变数据同时拥有watch。

九、手工测试

这里,很明显,MainCtrl依赖$scope$timeout

几乎每一个AngularJS开发人员在初学时都会被这些名词所困扰,这真的不太应该,因为它们就是针对几乎相同事物的语法糖而已!

AngularJS易于开发、较多的特征及较好的效果导致了较多的应用,伴随而来的是一些陷阱。本文列举了AngularJS的一些共同的易于出问题的地方,下面来一起看看吧。

jQuery是一个酷炫的库,它有标准化的跨平台开发,几乎已经成为了现代化Web开发的必需品。不过尽管JQuery如此多的优秀特性,它的理念和AngularJS并不一致。

从源代码中你可以看到,service仅仅是调用了factory函数,而后者又调用了provider函数。事实上,AngularJS也为一些值、常量和装饰提供额外的provider封装,而这些并没有导致类似的困惑,它们的文档都非常清晰。

在初学时,最好只使用service。

当我们开发一个大型应用程序时,可能并不是所有东西都包含在一个页面上。将同一类特性置于一个模块内,能使跨app间重用模块变得更容易。

DOM操作应该只在指令中完成,但这并不意味着他们只能用JQuery封装。在你使用JQuery之前,你应该总是去想一下这个功能是不是AngularJS已经提供了。当指令互相依赖时能够创建强大的工具,这确实很强大。

当存在不变数据,而你又想用AngularJS将其模版化,可以考虑使用bindonce。Bindonce是一个简单的指令,允许你使用AngularJS中的模版,但它并不会加入watch,这就保证了watch数量不会增长。

八、限定$scope的范围

以下这个“立即执行的函数表达式(IIFE)”会打印出当前页面上所有的watcher的个数,你可以简单的将其粘贴到控制台中,观察结果。这段IIFE来源于Jared在StackOverflow上的回答:

AngularJS是一个用来建立app的框架,而JQuery则是一个简化“HTML文档操作、事件处理、动画和Ajax”的库。这是两者最基本的区别,AngularJS致力于程序的体系结构,与HTML页面无关。

app.factory('privateFactory', function(){
 var privateFunc = function(name) {
 return name.split("").reverse().join(""); //reverses the name
 };

 return {
 hello: function(name){
  return "Hello " + privateFunc(name);
 }
 };
});

Javascript基于原型的继承与面向对象中基于类的继承有着微妙的区别,这通常不是什么问题,但这个微妙之处在使用$scope时就会表现出来。在AngularJS中,每个$scope都会继承父$scope,最高层称之为$rootScope。($scope与传统指令有些不同,它们有一定的作用范围i,且只继承显式声明的属性。)

var sharedServicesModule = angular.module('sharedServices',[]);
sharedServices.service('NetworkService', function($http){});

var loginModule = angular.module('login',['sharedServices']);
loginModule.service('loginService', function(NetworkService){});
loginModule.controller('loginCtrl', function($scope, loginService){});

var app = angular.module('app', ['sharedServices', 'login']);

所以为了获得预期的行为,需要在navCtrl中创建一个对象,它可以被loginCtrl引用。

这里是一个控制器示例,使用了service和两个factoryhelloFactory返回了一个函数,当新建对象时会设置name的值。

为了更好的理解如何建立一个AngularJS程序,请停止使用jQuery。JQuery使开发人员以现存的HTML标准思考问题,但正如文档里所说的,“AngularJS能够让你在应用程序中扩张HTML这个词汇”。

app/
 app.js
 Feed/
 _feed.html
 FeedController.js
 FeedEntryDirective.js
 FeedService.js
 Login/
 _login.html
 LoginController.js
 LoginService.js
 Shared/
 CapatalizeFilter.js

一、MVC目录结构

四、控制器膨胀

app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])

Karma是一个测试器,它有助于关闭反馈回路。Karma之所以能够做到这点,是因为它在指定文件被改变时就运行测试。Karma同时也会在多个浏览器上运行测试,不同的设备也可以指向Karma服务器,这样就能够更好地覆盖真实世界的应用场景。

与按照类型划分文件不同,取而代之的,我们可以按照特性划分文件:

您可能感兴趣的文章:

  • 利用VS Code开发你的第一个AngularJS 2应用程序
  • Angularjs单选改为多选的开发过程及问题解析
  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
  • 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
  • AngularJS开发教程之控制器之间的通信方法分析
  • Ubuntu系统下Angularjs开发环境安装
  • 利用Angularjs和Bootstrap前端开发案例实战
  • AngularJS应用开发思维之依赖注入3
  • angularJS开发注意事项

比如说,我们需要在一个导航栏上显示一个用户名,这个用户名是在登录表单中输入的,下面这种尝试应该是能工作的:

这种目录结构使得我们能够更容易地找到与某个特性相关的所有文件,继而加快我们的开发进度。尽管将.html和.js文件置于一处可能存在争议,但节省下来的时间更有价值。

这样的做法允许应用程序继续以AngularJS依赖注入的风格进行开发,同时在测试阶段也能将underscore交换出去。

六、没有使用Batarang

Protractor使用Jasmine测试框架定义测试,Protractor针对不同的页面交互行为有一个非常健壮的API。

在上一点中我们提到,AngularJS能做到开包即用,性能良好。由于需要在一个digest周期中完成脏数据检查,一旦watcher的数量增长到大约2000时,这个周期就会产生显著的性能问题。(2000这个数字不能说一定会造成性能大幅下降,但这是一个不错的经验数值。在AngularJS 1.3 release版本中,已经有一些允许严格控制digest周期的改动了。)

总结

由于service仅仅是调用了factory函数,这有什么区别呢?线索在$injector.instantiate:在这个函数中,$injectorservice的构造函数中创建了一个新的实例。

看起来,这似乎是一个显而易见的结构,更何况Rails也是这么干的。然而一旦app规模开始扩张,这种结构会导致你一次需要打开很多目录,无论你是使用sublime,Visual Studio或是Vim结合Nerd Tree,你都会投入很多时间在目录树中不断地滑上滑下。

helloWorldServicehelloWorldFactory被注入到控制器中,它们都有一个hello方法,返回”hello world”。service的构造函数在声明时被实例化了一次,同时factory对象在每一次被注入时传递,但是仍然只有一个factory实例。所有的providers都是单例。

最后,Batarang提供了性能分析。Angular能做到开包即用,性能良好,然而对于一个充满了自定义指令和复杂逻辑的应用而言,有时候就不那么流畅了。使用Batarang性能工具,能够直接观察到在一个digest周期中哪个函数运行了最长时间。性能工具也能展示一棵完整的watch树,在我们拥有很多watcher时,这很有用。

AngularJS是一卓越的框架,在社区的帮助下始终在进步。虽说AngularJS仍然是一个不断发展的概念,但我希望人们能够遵循以上谈到的这些约定,避免开发AngularJS应用所遇到的那些问题。希望这篇文章的内容对大家能有有所帮助,如果有问题可以留言交流,谢谢大家对脚本之家的支持。

var app=angular.module("app",[]);
app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})

Batarang提供了浏览模型的能力,这使得我们有能力观察AngularJS内部是如何确定绑定到作用域上的模型的,这在处理指令以及隔离一定范围观察绑定值时非常有用。

控制器是AngularJS的肉和土豆,一不小心就会将过多的逻辑加入其中,尤其是刚开始的时候。控制器永远都不应该去操作DOM,或是持有DOM选择器,那是我们需要使用指令和ng-model的地方。同样的,业务逻辑应该存在于服务中,而非控制器。

这看上去是一个很做作的例子,但是当你使用某些指令去创建子$scope,如ngRepeat时,这个问题很容易就会产生。

将所有东西都一股脑放在主模块下是很常见的,对于小型app,刚开始并没有什么问题,然而很快你就会发现坑爹的事来了。

由于原型继承的特点,在父类和子类间共享数据不太重要,不过如果不小心的话,也很容易误用了一个父$scope的属性。

app.controller('helloCtrl', function($scope, helloWorldService, helloWorldFactory, helloFactory) {
 init = function() {
 helloWorldService.hello(); //'Hello World'
 helloWorldFactory.hello(); //'Hello World'
 new helloFactory('Readers').hello() //'Hello Readers'
 }

 init();
});

以下是一个例子,展示了一个service和一个factory如何完成相同的事情:

Batarang是一个出色的Chrome插件,用来开发和测试AngularJS app。

那么问题来了……:在text input中设置了user的ng-model,当用户在其中输入内容时,哪个模版会被更新?navCtrl还是loginCtrl,还是都会?

现在AngularJS怎么知道MainCtrl依赖谁?AngularJS提供了一种非常简单的解决方法,即将依赖作为一个数组传入,数组的最后一个元素是一个函数,所有的依赖项作为它的参数。

templates/
 _login.html
 _feed.html
app/
 app.js
 controllers/
 LoginController.js
 FeedController.js
 directives/
 FeedEntryDirective.js
 services/
 LoginService.js
 FeedService.js
 filters/
 CapatalizeFilter.js

现在,由于user是一个对象,原型链就会起作用,navCtrl模版和$scopeloginCtrl都会被更新。

二、模块

AngularJS在遵循单一职责原则(SRP)时运行良好,如果控制器是视图和模型间的协调者,那么它所包含的逻辑就应该尽量少,这同样会给测试带来便利。

通过这个例子,我们可以让privateFactory的公有API无法访问到privateFunc方法,这种模式在service中是可以做到的,但在factory中更容易。

使用AngularJS可以很容易的将这些全局依赖封装进模块中,所以它们可以像AngularJS标准模块那样被注入进去。

这可能看上去十分琐碎,没什么必要,但如果你的代码中正在使用use strict(而且必须使用),那这就是必要的了。

<div ng-controller="navCtrl">
 {{user}}
 <div ng-controller="loginCtrl">
 {{user}}
 <input ng-model="user"></input>
 </div>
</div>

既然能做相同的事,为什么需要两种不同的风格呢?相对于servicefactory提供了更多的灵活性,因为它可以返回函数,这些函数之后可以被新建出来。这迎合了面向对象编程中工厂模式的概念,工厂可以是一个能够创建其他对象的对象。

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:总结AngularJS开发者最常犯的十个错误,性能的方

关键词:

上一篇:说说Float那个被埋没的志向,重新认识Box

下一篇:没有了