AngularJS 样式指南介绍

什么是一个样式指南?AngularJS工程需要一个样式指南吗？如果需要为什么需要？最流行的AngularJS样式指南是哪一个？在一个开发者团队里你如何使用一个样式指南？本文接下来会为你回答这些问题。在我们学习AngularJS 样式指南之前，让我们看看一个样式指南是什么，并且为什么我们开发者需要一个样式指南。

为什么需要样式指南？

Wikipedia提供了一份很好的综合定义，这份定义可以有助于你理解为什么样式指南很重要，而且在我们把目光聚焦在AngularJS样式指南之前，这份定义有助于你了解整体的情况。

“一份样式指南(或者样式手册)无论是对一般用途还是对一个具体的出版物，公司组织，还是某个领域来说，它是写作和设计文档标准的一个集合。一份样式指南通过确立和执行样式来提高相互之间的交流沟通。使用一份样式指南，它能确保在一份文档和很多交叉的文档里内容具有相容性，并且在使用上和在语言作品，视觉作品，文字和字体上能使它们坚持最佳的实践。在学术文档和技术文档上，一份指南在伦理学(例如作者身份,研究伦理学,和公开研究)，在教育学(例如阐述和明晰)，和在承诺(技术和管理)上都能使它们坚持最佳实践。”

编码样式指南坚持最佳实践涉及到一个独特的语言和涉及到你公司的需要。

项目样式指南

JavaScript项目需要使用一份样式指南的原因有很多。我不准备在本文详细罗列所有的原因,但是它们通常通过下面传统的主题来阐述该语言的样式指南:

1.模块化:单功能性，立即调用函数表达式，模块相关性。
2.应用程序结构：建筑模式，文件夹结构。
3.命名规则：为模块，控制器，配置文件和说明文件。
4.聆听：JavaScript代码检查者。(JavaScript Linting介绍链接地址:http://www.cnblogs.com/agile30353/articles/3377740.html)
5.测试：在编写说明书里的方法。
6.注解：用来产生文档。
7.启动逻辑：配置，启动逻辑。
8.路由：导航流程，视图构成。
9.异常处理：装饰模式，异常捕获，路由错误。
10.性能和安全：优化，代码混淆。

现存的JavaScript样式指南

对于JavaScript来说，它有很多常规的和项目特有的样式指南:

谷歌的JavaScript指南(链接地址:https://google.github.io/styleguide/javascriptguide.xml)
Mozilla编码样式(链接地址:https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style)
Crockford的代码约定(链接地址:http://javascript.crockford.com/code.html)
Waldron的编写一致惯用的JavaScript代码的原则(链接地址:https://github.com/rwaldron/idiomatic.js/)
Npm的”funny”编码样式(链接地址:https://docs.npmjs.com/misc/coding-style)
jQuery的JavaScript样式指南(链接地址:https://contribute.jquery.org/style-guide/js/)
Airbnb JavaScript样式指南(链接地址:https://github.com/airbnb/javascript)

尽管它们是名人，但是上面提到的样式指南没有一个是完全是综合性的。我认为，Airbnb样式指南在所有的指南里是最新的而且是最完整的,它提供了eslint配置文件，有了这个文件，它就可以自动帮你检查你的代码样式。Eslint配置文件可以被扩展，当我构建我自己的网站时我就是这么做的。

Eslint介绍链接地址:http://www.jianshu.com/p/2bcdce1dc8d4

AngularJS项目需要一个样式指南原因几乎和所有JavaScript项目需要一个样式指南的原因相同，但是这里有一些Angular具体的项目需要被提及。

让我们思考一下下面AngularJS具体的示例:

如何使用ng标签：AngularJS 的ng指令可以通过不同的方式来使用，并且该指令有不同的语法，例如为了符合W3C标准，当使用ng指令作为一个HTML属性时，应使用data-ng而不是ng。在一份代码样式指南里说明如何编写ng指令有助于在HTML文件里提高程序的一致性。

AngularJS的ng指令介绍链接地址:http://www.cnblogs.com/937522zy/p/4987463.html

实现组件的不同方式。AngularJS使用定制的指令来实现web组件。定制指令可以基于HTML元素名,属性,class名和注解。例如在一个项目里,一个样式指南应该确保仅仅只有一种类型的指令被使用。

采用哪一种架构模式。AngularJS为MV*(或者MVW)架构模式留了后路。它把选择权交给JavaScript开发者,让开发者来决定他们的应用是否基于MVC或者MVVM架构来开发。在开发项中选择哪种模式的指导方针是,该模式能使整个团队保持步调一致。

MV*模式介绍链接地址:http://www.kancloud.cn/kancloud/learn-js-design-patterns/56454

现在我们有了样式指南是干什么的概念了,我们现在把目光聚焦在存在的AngularJS样式指南上。

AngularJS样式指南

Google提供了官方的样式指南和最佳实践,但是最流行的和综合性最好的指南是来自AngularJS社区:

Google官方样式指南链接地址:https://google.github.io/styleguide/angularjs-google-style.html
Google官方最佳实践链接地址:https://github.com/angular/angular.js/wiki/Best-Practices
Minko Gechev的AngularJS样式指南(链接地址:https://github.com/mgechev/angularjs-style-guide)
Todd Motto的AngularJS样式指南(链接地址:https://github.com/toddmotto/angular-styleguide)
John Papa的AngularJS样式指南(链接地址:https://github.com/johnpapa/angular-styleguide)

很难说上面哪个最好,因为它们都是很好的样式指南。John Papa的指南全面的而且不断改善,Todd Motto的指南简洁而容易上手,而Minko Gechev的指南被翻译成了不同语言的版本。但是似乎John Papa的样式指南作为最流行的和最详细的AngularJS样式指南而被官方正式推荐给了开发者。

当开始一个全新的AngularJS项目时,我认为在Jonh Papa样式指南里下面这些AngularJS的具体点是最重要的,而且需要考虑的:

LIFT原则
控制器语法
文件模板和代码片段
种子应用

LIFT原则

LIFT原则涉及到app结构和如下明确的指导方针:

LIFT原则链接地址:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure-lift-principle

1.快速定位你的代码

2.快速识别代码

3.尽可能保持最浅的结构

4.试着保留DRY编程方式(DRY编程介绍链接地址:http://www.51edu.com/it/bckf/261481.html)

这使得应用架构更加具有可扩展性和使得开发者开发更加有效率,因为能更加快速地找到代码。使用一个文件夹功能结构也有助于遵循这个原则。

Folders-by-feature structure链接地址:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure

ControllerAs

使用controllerAS语法而不是’$scope经典的控制器’语法,在视图中这种做法使得代码更加容易阅读:

controllerAS链接地址:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-controller-syntax

<!-- avoid -->
<div ng-controller="CustomerController">
    {{ name }}
</div>

<!-- recommended -->
<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

而在控制器里:

/* avoid */
function CustomerController($scope) {
    $scope.name = {};
    $scope.sendMessage = function() { };
}

/* better */
function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

更进一步的，通常是建议把this分配给一个变量，这样做你就可以在你的控制器方法里很容易地访问到它:

/* recommended */
function CustomerController() {
    var customerVM = this;
    customerVM.name = {};
    customerVM.sendMessage = function() {
        // we can access the controller's scope as customerVM
    };
}

文件模板和代码片段

在John Papa的指南里，为不同的编辑器和集成开发环境列出了很多的文件模板和代码片段。使用文件模板和代码片段可以保证在不同的文件，不同的模块，和不同的子系统之间相协调，而且特别是如果你在一个团队里工作,在你代码重构或者当新的开发者加入你的团队时，这样做可以省很多时间。这样做，也可以使得代码更加整洁和可重复使用。

Filetemplates and snippets链接地址:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#file-templates-and-snippets

种子应用

当你开始着手一个新的AngularJS项目时，如果你时间紧急，或者你想短时间内通过一个完整地示例来学习，HotTowel是一个值得考虑的选择。Yeoman创始者开发了一款app，用来作为你遵循John Papa样式指南来开始开发你的AngularJS应用的开始点。开发的应用被使用一个npm包，一个gulpfile，JavaScript脚本和LESS提示配置好了，所以，如果你没有特别的需要，所有你需要做的是实现新功能!你可以在GitHub上我的AngularJS页面里浏览和运行一个用HotTowel生成的AngularJS应用。

HotTowel链接地址:https://github.com/johnpapa/generator-hottowel

HotTowel介绍链接地址:http://www.jb51.cc/article/p-dawvjrxp-b.html

Yeoman链接地址:http://yeoman.io/

Yeoman介绍链接地址:http://www.cnblogs.com/dreamFromHere/p/3511319.html

Npm介绍链接地址:http://my.oschina.net/fzxgg/blog/610094

Gulpfile介绍链接地址:http://blog.csdn.net/qq_27080247/article/details/50773592

LESS介绍链接地址:http://blog.csdn.net/turingty/article/details/49851543

一个现实生活中的例子

在实际的项目中使用样式指南的例子是GoCardless AngularJS Styleguide，在Gocardless AngularJS Styleguide里你可以找到更多具体的和不断改善的代码片段。它在HTML里推动了使用指令而不是使用控制器。看看这个例子里关于指令名的指南:

GoCardless AngularJS Styleguide链接地址:https://github.com/gocardless/angularjs-style-guide

“指令名必须仅包含a-z字母和至少一个连接号(-)。原因是:通常使用的元素必须有一个连接号(命名空间)来把它们和本地元素区分开来,同时预防在以后出现组件冲突的情况。”

<!-- Recommended -->
<dialog-Box></dialog-Box>
<button click-toggle="isActive"></button>

<!-- Avoid -->
<dialog></dialog>
<button toggle="isActive"></button>

GoCardless样式指南是基于你的团队和项目需要从上述提到的自定义和通用的样式指南中得到启发的最好的开始点。

在一个团队里使用样式指南

代码样式指南应该是大多数AngularJS项目所需的输入，特别是当希望项目能被快速开发完成或者团队是新组建的时候。当然,在一个项目开发进行期间，代码样式指南需要一直存在，而且每当有新的需求或者新的探索要求提出的时候，代码样式指南应该随着新的需求和提出的新的探索要求而来做出改变或者扩展。

未来:2016年和以后

在不久的将来，一切事情变化的飞快。接下来的挑战是为AngularJS2更新样式指南，特别是关于web组件的事态发展,ECMAScript2015(ES6)的发展，和ECMAScript2016的发展，以及之后ECMAScript的发展。

我想听到其他人关于样式指南的经历，可以是Angular，也可是是JavaScript的。我错过了某些非常好的指南吗，或者任何你知道的特别有争议的指南吗？请让我在评论区看到你的评论!

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