AngularJS样式指南简介

最新推荐文章于 2020-12-19 13:14:50 发布

dingshi7798

最新推荐文章于 2020-12-19 13:14:50 发布

阅读量209

点赞数

文章标签： javascript 测试 ViewUI

本文由Tom Greco ， Divy Tolia和Rabi Kiran进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

什么是样式指南？ AngularJS项目是否需要样式指南，为什么？哪些是最受欢迎的AngularJS样式指南？您如何在开发人员团队中使用样式指南？本文将回答所有这些问题。在深入研究AngularJS样式指南之前，让我们看一下样式指南是什么以及我们开发人员为什么需要样式指南。

为什么要使用样式指南

Wikipedia提供了一个很好的通用定义，有助于理解样式指南的重要性，并在深入探讨AngularJS样式指南之前获得全面的了解。

样式指南（或样式手册）是用于文档编写和设计的一组标准，可以用于一般用途，也可以用于特定的出版物，组织或领域。样式指南建立并执行样式以改善沟通。为此，它可以确保文档之间以及多个文档之间的一致性，并在用法以及语言组成，视觉组成，拼字法和版式方面实施最佳实践。对于学术和技术文档，指南还可以强制执行道德规范（例如作者身份，研究道德规范和披露），教学法（例如说明和清晰性）和合规性（技术和法规）方面的最佳实践。

编码样式指南针对特定语言和组织需求实施了最佳实践。

项目风格指南

JavaScript项目需要样式指南的原因有很多。我不会在本文中详细介绍所有这些内容，但是它们通常会通过涵盖以下其他主题来扩展语言样式指南：

模块化 ：单一职责，立即调用的函数表达式，模块依赖项
应用结构 ：建筑模式，文件夹结构
命名约定 ：用于模块，控制器，配置和规格文件
Linting ：JavaScript代码检查器
测试：编写规范的方法
注释：生成文档
启动逻辑 ：配置，启动逻辑
路由：导航流程，视图组成
异常处理 ：装饰器，异常捕获器，路由错误
性能和安全性 ：缩小，混淆

现有的JavaScript样式指南

对于JavaScript，有许多常规的和特定于项目的样式指南：

尽管知名度很高，但上面提到的所有样式指南都不是全面的。我认为，Airbnb样式指南是最新和完整的，并且还提供了eslint配置文件，您可以使用它们自动检查您的代码样式。可以扩展eslint配置文件，就像在构建网站时所做的那样。

为什么AngularJS项目需要样式指南

出于相同的原因，AngularJS项目几乎都需要样式指南，因为所有JavaScript项目都需要样式指南，但是可以涵盖一些特定于Angular的项目。

让我们考虑以下特定于AngularJS的示例：

如何使用ng标签 。 AngularJS ng指令可以以不同的方式使用并且具有不同的语法，例如，在将ng指令用作HTML属性时，首选data-ng而不是ng以便与W3C兼容。在代码样式指南中指定如何编写ng指令有助于提高HTML文件的一致性。
实现组件的不同方法 。 AngularJS使用自定义指令实现Web组件。自定义指令可以基于HTML元素名称，属性，类名称以及注释。例如，样式指南可以确保项目中仅使用一种类型的指令。
采用哪种建筑模式 。 AngularJS允许使用MV *（或MVW）架构模式。这让JavaScript开发人员可以选择是否基于MVC或MVVM实现其应用程序。有关在项目中必须使用哪种方法的指南有助于使整个团队保持一致。

既然我们已经了解了样式指南的用途，那么我们就可以开始研究现有的AngularJS样式指南。

AngularJS样式指南

Google提供了官方的样式指南和最佳做法，但是最受欢迎和最全面的指南来自AngularJS社区：

很难说哪个是最好的，因为它们都是好的样式指南。约翰·帕帕（John Papa）的指南内容全面且不断发展，托德·莫托（Todd Motto）的指南简明扼要，入门很好，明科·格切夫（Minko Gechev）的指南用不同的语言翻译。但是似乎约翰·帕帕（John Papa）的样式指南已被正式推荐为最新，最详细的AngularJS样式指南。

我认为，这些是Jonh Papa风格指南中最重要的AngularJS特定点，在开始全新的AngularJS项目时要考虑这些点：

LIFT原理
controllerAs语法
Fle模板和摘要
种子应用

LIFT原理

LIFT原则与应用程序结构有关，并定义了以下准则：

大号迅速ocate代码
我 dentify代码一览
不及格 lattest结构，你可以
牛逼 RY保持干爽

这使应用程序结构更具可扩展性，并且开发人员效率更高，因为他们可以更快地找到代码。使用按功能的文件夹结构自然有助于遵循该原则。

控制器

使用controllerAs语法在“经典控制器$scope ”语法使得在视图代码更易读：

<!-- 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的指南中，为不同的编辑器和IDE列出了许多文件模板和代码片段。使用文件模板和代码片段可确保不同文件，模块和子系统之间的一致性，尤其是如果您在团队中工作，这可以在重构期间或新开发人员加入团队时节省大量时间。它还可以使项目的代码保持干净和可重用。

种子应用

如果您很着急，或者想学习一个完整的示例，可以在启动新的AngularJS项目时考虑使用HotTowel 。这个Yeoman生成器将按照John Papa的风格指南创建一个应用程序，作为您AngularJS应用程序的起点。生成的应用程序配置有一个npm软件包，一个gulp文件，JavaScript和LESS提示，因此，如果您没有特殊需要，您要做的就是实现新功能！您可以在GitHub的AngularJS游乐场中浏览并运行使用HotTowel生成的AngularJS应用程序。

一个真实的例子

用于实际项目的样式指南的一个示例是GoCardless AngularJS样式指南，您可以在其中找到更具体和更高级的代码段。它在HTML中推动使用指令而不是控制器。例如，请看一下有关指令名称的指南：

指令名称只能包含az和至少一个破折号（-） 。原因： 自定义元素必须带有破折号（命名空间），以将其与本机元素区分开，并防止将来发生组件冲突 。

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

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

GoCardless样式指南可以成为启发您根据团队和项目需求自定义和扩展上述通用样式指南的理想起点。