Angular 2 – 提升水平的最佳实践

前端之家收集整理的这篇文章主要介绍了Angular 2 – 提升水平的最佳实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

1 – 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个用户 位置!

你可以在这 预定你的位置

2 – 构建应用程序

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

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

)

3 – 服务器端(通用)呈现

通用意味着同时在页面服务器和客户端呈现页面。它通常意味着使用前端的 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。”

4 – IDE/编辑

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

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

5 – 错误检测

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

6 – 文档

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

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

7 – 测试

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

永远不要在 ts 文件上运行测试,先进行编译。不幸的是,ts-node 非常 ,即使是最新的版本。我的测试在 te-node 上运行需要10 s,而编译 js 只用了 1 s。

8 – TypeScript 和 ES6 的比较

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

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

9 – 命名规范

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

保持简洁:

文件文件名称 应该使用 dash-case 并且有一个说明功能的后缀,如*.component.ts,*.service.ts,*.interface.ts

-选择器也需要使用 dash-case 并且有一个前缀,作为一个命名空间。

-类(组件,服务,指令等)和接口用该使用 camelcase 和有一个说明类具体类型的后缀,如 *Component,*Service,等。

10 – 目录和文件结构

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

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

)

只有全局服务到服务文件夹下。

保持测试接近源代码

11 – Redux

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

12 – 性能

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

Jürgen van de Moere 有一个很好的提示

当使用不可变的数据时有一个好主意,使你的数据结构与组件的逻辑层次整齐有序,避免可能会导致严格的对象平等是错误的操作,尤其是当使用 ngFor 时。

+1 Reactivity

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

+2 路由器

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

原文链接:https://www.f2er.com/angularjs/148127.html

猜你在找的Angularjs相关文章