|
|
51CTO旗下网站
|
|
移动端

AngularJS的七种常见优秀实践

针对Web应用的开发与性能,本文介绍了七种有关AngularJS的常见优秀实践。

作者:陈峻编译来源:51CTO|2019-09-06 09:00

【51CTO.com快译】上个世纪90年代,AngularJS(https://dzone.com/articles/angulajs-basic-to-expert-day-one)作为一种全新的框架技术,被引入了专业的动态Web应用构建领域。如今,在Web应用的开发环境中,Angular已经成为了业界使用广泛的框架之一。不过,与传统的AngularJS不同,从Angular 2框架开始,它允许开发人员为各种Android和iPhone设备构建最基础的应用程序。

虽然Angular通过不同的版本在持续进行着自身优化,但是对于用户而言,一旦错误地使用了AngularJS所提供的某些方法,则可能会给其开发出的应用,造成性能上的影响,进而撼动其市场上的地位。因此,各类开发人员除了持续努力地发现并解决,哪些直接影响到AngularJS性能的问题之外,也应不断地在寻求改进和优化其自身应用程序的各种优秀实践。下面,让我们一起来谈论七种常见的AngularJS优秀实践。

1. Angular Universal

Angular Universal是一种能够在服务器上渲染呈现Angular应用的技术。通常,普通的应用程序会在浏览器中被执行,并在DOM中渲染呈现出页面,以响应用户的各种操作。而Angular的常规方式却是通过在服务器上执行,以生成静态的应用程序页面。而且,由于应用程序的渲染速度非常快,因此用户完全可以在布局交互完成之前,就查看到它的效果。此外,用户还可以通过Angular Universal,轻松地构建出易于SEO(搜索引擎优化)的网站。

2. ES Linting

作为一种先进且功能齐全的工具,Angular能够检查在应用程序、或网站开发过程中出现的各种参数。Linting工具不但能够检查TypeScript代码是否存在着样式或编程上的错误,而且可以检查程序代码是否符合规范的标准和通用的惯例。它的易读性可以帮助新手开发人员,模块化自己的程序代码。此外,其特点还包括:

  • 具有各种可配置的规则,方便用户检查错误的级别,并轻松地区分不同类型的错误与警告。
  • 在其JSHint和JSLint中带有一整套功能强大的默认规则,用户可以籍此来轻松地实现各种迁移。
  • 其样式检查规则有助于整个团队保持代码的一致性。
  • 提供了可以编写各种插件的相关工具。

3. Interceptor的使用

Interceptor workflow example

当某个自定义的逻辑被注入到HTTP的请求或响应中时,HTTP Interceptor(拦截器)会在HTTP调用之前或之后,执行这些自定义的程序逻辑。因此,我们需要将身份验证令牌添加到每个HTTP的请求里。而且,由于此类令牌是从客户端生成的,那么我们出于各种安全原因的考虑,需要从服务器端进行验证。

在各种HTTP拦截器的帮助下,用户可以添加不同的自定义逻辑,以实现记录、身份验证、会话与状态管理、缓存、响应修改、URL重写、以及给请求/响应添加时间戳等安全操作。可以说,这些拦截器充当了HTTP调用钩子(hook)的作用。

4.测试覆盖率

单元测试是验证大规模Angular应用程序性能的最重要环节。您可以使用Angular CLI(https://dzone.com/articles/getting-started-with-angular-70),来轻松地开展测试、并采集各种覆盖率报告。以下便是运行单元测试的命令:

  1. ng test --watch=false--code-coverage 

在编写单元测试并成功运行之后,它会自动地生成一个文件夹。通过该文件夹里的各种报告,您可以获悉应用程序在测试中出的相关问题。

5. Ahead of Time Compiler(AOT)

Installing AOT compiler

由于Angular应用程序是由多个组件和HTML模板所组成,而且它们难以在浏览器中实现迭代,因此Angular应用一般需要通过编译器,让应用能够在浏览器中流畅地运行。通常,在浏览器下载和使用旧的代码之前,Angular会通过AOT(Ahead of Time Compiler),将Angular HTML和TypeScript代码转换为高效实用的JavaScript代码。

Ahead of Time Compiler是否与Just in Time相似?

在功能上,业界常认为AOT是JIT(Just in Time)的有力替代品。而在实际编码的时候,应用程序仍然需要用到JIT编译器。其实,AOT和JIT之间的主要区别在于:开发人员会在构建阶段,使用到AOT的一整套代码库;而在每一次运行时(runtime),使用JIT不同的集合库。

为何首选AOT来编译?

客观地说,编译就是为了发现各种组件模板所绑定的错误。当我们使用JIT进行编译时,它只会在运行时的后期发现错误。而顾名思义,AOT编译器可以在构建的阶段,更快地跟踪到模板中的错误。这不仅节省了开发人员的时间,而且使得应用程序更加高效。可见,AOT的优点在于:

  • 更快速的渲染。
  • 更少的异步请求。
  • 削减Angular框架的下载体积。
  • 能够在早期就检测出模板的错误。
  • 具有更好的安全性。

6. Lazy Load

通常,一个大型的应用程序是由几个特色模块所组成,这往往会导致用户耗费大量的时间进行程序上的加载。而Lazy loading则能确保应用具有更快的性能、以及更好的用户体验。

Lazy loading允许开发人员在激活特定路由的情况下,以异步的方式加载JavaScript组件。一般而言,带有基本功能的应用程序体积不会很大,而其对应的具有完整功能的软件包则会比较庞大。因此,Lazy loading可以通过分步式的加载,来减少初始化的时间。

设置延迟加载的功能模块

  • 创建功能模块。
  • 为功能模块创建路由模块。
  • 配置路由。

使用延迟加载的好处

  • 仅在用户请求时加载应用程序的其他功能部分。
  • 节约了那些仅访问应用程序基本(优先级高的)功能的用户时间。
  • 在不增加初始加载包情况下,能够扩展目标应用的各种功能。

7. Polyfill

虽然Angular是被构建在最新的Web平台标准之上,但是它无法全面地支持各种类型的新式浏览器。Polyfill则通过各种脚本,来满足用户对于不同浏览器的需求。用户可以轻松地编写出各种类型的JavaScript代码,而无需担心浏览器的兼容性与支持问题。

保持最新状态

如今,开发人员已经可以在Angular上使用诸如:Dart、Typescript或ECMAScript 5等多种编程语言了。众所周知,Angular 8即将被发布,而每个新版本的软件都带有许多针对旧版本的重新评估与改进。作为新版本的Angular,它的主包大小会减少约49.78%,运行的速度会更快,加载的时间也会更短。除了许多额外增加的功能之外,它还能提供更高效的迁移服务。因此,我们应当尽可能地采用新版本的框架,以保证Web应用的运行效率与性能。

原文标题:AngularJS Best Practices,作者:Rotan Sharma

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

【编辑推荐】

  1. 苹果可能以人民币美元 1:1 的兑换率给中国开发者汇款
  2. 谷歌正将Android 10源代码上传到AOSP安卓开源项目
  3. 五行代码用图提升模型表现,TensorFlow开源NSL神经结构学习框架
  4. 13 岁前写下第一行代码,这批小小程序员日前正式 C 位「出道」!
  5. 简单介绍几种Java后台开发常用框架组合
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月获赞

订阅专栏+更多

这就是5G

这就是5G

5G那些事儿
共15章 | armmay

117人订阅学习

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

371人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

758人订阅学习

读 书 +更多

软件工程:实践者的研究方法

20多年以来,《软件工程:实践者的研究方法》一书是最受学生和行业专业人员欢迎的软件工程指南。它在全面而系统、概括而清晰地介绍软件工程...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微