Angular 2 正在全世界范围流传并且变得越来越受欢迎,因此越来越多的人开始学习并使用它。然而,不论你是编程专家还是初学者,当你使用 Angular 2 时,这里有一些你应该遵循的基本指导原则和实践准则。

我收集了 12 条最佳实践与技巧来帮助你写出更好和更清晰的代码。

请注意:如果你刚接触这个话题,你应该阅读由官方社区与核心贡献者驱动的官方 Angular 风格指南(最佳的实践)

Cli/Boilerplate

如果你刚开始使用 Angular 2,使用 angular-cli (npm i angular-cli -g)。它基于 ember-cli。你可以生成 ng 初始化项目名称的一个很棒的样例,此命令将初始化一个新的 Angular 2 应用程序。这个应用程序可以运行,并且遵循官方 Angular 2 风格指南的所有最佳做法。

此外,它安装时需要 npm 的依赖。它还创建单元测试和端到端的测试脚本。简而言之,它所做的一切都需要新建一个 Angular 2 应用程序。如果你不喜欢目录结构或者 system.js,你可以使用最好的入门套件 angular2-webpack-starter 或者其他的 Boilerplates


作者笔记:
如果你想提高你的抽样进程使之更进一步,尝试我们的内部工具 Angular Slice。我们开发这个工具,用来从图形输入生成项目代码库。我们定义了基于视觉的组件并且在此生成它们。

我们花在抽样的时间平均减少了 70%!我们可以在几周内给你位置。而在早期发展时段,我们只能给前 500 个用户位置! 你可以在这预定你的位置

构建应用程序

Angular 2 使用 Rollup 来建立下一代 ES6 模块打包。我使用 browserify (我是 node stream 的狂热者)并且 webpack 也不错,因为有更多的 loaders 和可用插件,用来支持 Rollup 功能设置比如: rollup-loader 和 rollupify 。 Rollup 可以使代码占用空间变小,但是 webpack 和 browserify 有 rollup-loaderbrowserify rollupify 可以用来缩小你的包。

在不久的将来,推荐使用 @angular/compiler(-cli) 和 @angular/platform-browser,采用 template compiler 生成,预编译好了模板与样式。按照这个情形可以加快你的包超过9x!

Angular 2 - 提升水平的最佳实践 图片1

服务器端(通用)呈现

通用意味着同时在服务器和客户端呈现页面。它通常表示为使用前端的 JavaScript 和 Node.js。 因为他们允许 re-usage 库,允许浏览器的 JavaScript 代码运行在 node.js 环境且只需很小的修改,因此具有互换性。
如果你想在 node.js 上使用 Typescript,我不建议使用 ts-node 或者任何 hacks the require.extension 的 node 模块。
使用 “browserify – node” 或者 与正确配置好的 webpack 生成服务端。最普遍的例子就是 universal-starter

官方普遍最佳做法:
“不要使用在全局命名空间中提供的任何浏览器类型,如导航器或文档。当应用程序在 HTML 序列化时,任何在 Angular 以外的东西会被忽略。如果你要访问这些类型,请使用 getDOM()from”@angular / platform-browser / src / dom / dom_adapter””

“保持你的指令尽可能无状态。状态指示,你可能需要提供一个属性,反应相应的属性与初始字符串值如 URL 在 img 标记。为我们本地< img src = ” ” >元素的 src 属性体现为 src 属性的元素类型 HTMLImageElement。”

IDE/编辑

我使用 Sublime 和 官方的 Microsoft plugin,但我认为 atom 和 vscode( Angular 2 的非官方编辑器)也是开发的利器,但是比起 Sublime 慢很多。如果你喜欢复杂的 IDE ,建议使用 Angular 2 支持的 webstorm。

John Lindquist,egghead.io 的创始人,做了一套很好的视频,可以引导你完成 WebStorm 的所有新特性,帮助你顺利过渡到 Angular 2。

错误检测

我建议使用 tslint,当使用 附带 codelyzerng2lint 的 typescript 时是最好的选择。 Valor-software 有一个非常有用的检测错误的项目, tslint-config-valor 包含所有明确规则。

文档

我使用 typedoc 生成文档,这是一个很棒的小工具,可以让我们生成基于 TypeScript 文件的 HTML 文档,就像 JavaDoc 做的那样。这将编译所有的文档(classes, namespaces, functions, etc.), 将它放在 doc 文件夹中命令行运行的当前目录下。它有不错的用户界面,但是生成模板有点难。


你愿意把你的团队提升到 Angular 的新水准么?点击这里看我们能如何帮助。


测试

Karma 有一个复杂的架构。我建议只使用 jasmine (mocha当时还没有开发出来)。Gsans 就这个主题写了一篇精彩的文章,它包含了很多的测试样板和模式的好例子。

先编译后再考虑于 ts 文件上运行测试。不幸的是,ts-node 非常,即使是最新的版本。我的测试在 ts-node 上运行需要 10 s,而编译 JavaScript 只用了 1 s。

TypeScript 和 ES6 的比较

我在一个基于 Angular 2 的应用程序上使用 typescript ,并且经常使用 rxjs (这也是用 typerscript 写的)。当你写代码时,这通常取决于 node modules:express, node libs 和 middlewares 使用 ES6. 很多包没有输入定义(d.ts)。

Typescript compiler(tsc) 编译代码最快,但是有时不是标准方式。

命名规范

命名标准帮助开发人员更好理解彼此的代码并且让一切保持整洁。同类名及选择器一样,文件和文件夹名称命名也有相关的命名规范。这部分完全值得就这个主题写一篇文章,但是现在让我们用几个例子向你介绍一下先。如果你有兴趣了解更多,不要犹豫,直接观看官方的 angular style guide’s site

保持简洁:

  • 文件和文件夹名称应该使用 dash-case 并且有一个说明功能的后缀,如 *.component.ts, *.service.ts, *.interface.ts
  • 选择器也需要使用 dash-case 并且有一个前缀,作为一个命名空间。
  • 类(组件,服务,指令等)和接口用该使用 camelcase 和有一个说明类具体类型的后缀,如 *Component, *Service, 等等。

目录和文件结构

目录和文件结构很难保持标准化。需求总是在项目中发生变化。我的目录结构可能会和官方样式指南有所不同,但也非常实用。在官方样式指南中,你使用共享文件夹(对于常见的组件、样式等)。

在我的版本,我把特别的文件放在页面的文件夹下,一般组件放在组件文件夹下,指令放在指令文件夹下,等等。

Angular 2 - 提升水平的最佳实践 图片2
只有全局服务到服务文件夹下。
保持测试接近源代码。

Redux

总有一天,你的应用程序将会扩展变大,所以你必须做出一个很好的架构,不仅仅只是一大套组件与服务。你必须处理好状态和行为。我想 redux 是你应用程序最好的集合,因为所有的前端开发人员都知道它。

性能

首先阅读这篇文章 How to optimize Minesweeper using Angular 2 and Immutable.js to make it insanely fast 。这是这个话题中最好的之一。重要的是如果你有一个组件,只希望通过其中一个属性传递静态常量,你可以通过添加 changeDetection: ChangeDetectionStrategy.OnPush 到组件以进一步优化渲染速度。

Jürgen van de Moere 有一个很好的提示:
当使用静态常量时有一个好的建议:使你的数据结构与组件的逻辑层次整齐有序,避免可能会导致严格对象检查时发生错误的操作,尤其是当使用 ngFor 时。

Reactivity

Rxjs 是一个很好的库,比起框架来更好地依赖库。框架经常改变,但是库会有更稳定的 API,使用 @ngrx 扩展,如 @ngrx/store@ngrx/router 来更好的利用 reactivity。

路由器

不要使用过时的路由 (@angular/router-deprecated),Angular 2 在试用版本状态也有一个弃用路由器。我建议用新的路由 (@angular/router) 或者 @ngrx/router reactive solution 是最好的。两篇很好的关于这个话题的文章在这里这里

Angular 2 发布了候选版本。我认为这种做法在未来非常有用。

你有什么其他的最佳实践?在评论部分与我们共享!

发表评论

电子邮件地址不会被公开。 必填项已用*标注