前端工程化——工程规范

要成为通用的变成产品，程序必须按照普遍认可的风格来编写.
-- 《人月神话》

从事软件开发以来，“规范”对我们其实并不陌生，但是到底什么是规范呢？规范为什么这么重要？怎么做好项目规范？在实际项目中，我们也常常强调规范，在项目初期也会制定相应的项目规范，但是随着项目的进行，后期确越来越难以执行，问题出在哪里？
通过本次课程学习，看看业界大厂，资深大佬们都有什么建议吧。

什么是规范？

规范简单来说就是规矩，准则。“不以规矩，不能成方圆”，做任何事都要有一定的规矩、规则、做法，否则无法成功。做项目当然也要讲究规范。

为什么强调规范？

好的规范可以带来以下几个好处：

1. 降低团队沟通成本
   举例说明：设计模式也是一种规范，在讨论解决方案时，我们可以直接说使用单例模式来实现，就不需要再去详细讨论实现细节，大家都能明白单例模式是怎么实现的，不清楚单例模式的可以自己去查资料理解即可。

2. 提升工作效率
   这一点我有真实体会，我每次修改完代码，都会习惯性的按快捷键格式化代码，曾经参与过一个项目，没有代码格式方面的规范，而其他成员提交的代码也没有格式化，在我提交后，版本控制工具会标记出大量的改动，这些改动其实大部分都是格式上的，和本身修改的功能无关，后续跟踪bug的时候非常难以定位；甚至如果出现多人同时修改，合并的时候出现大量冲突，解决起来也非常耗费时间和精力。如果一开始就制定了代码格式规范，这些问题就不会出现了。

3. 可以根据规范做一些自动化工具，例如代码生成、自动化测试等，本质也是提升效率
   如果规范确立，我们可以自己编写一些代码模板生成工具，工程目录初始化工具等，减少重复性的手动工作。

4. 作为资料传承给项目新成员，有助于新成员快速融入团队
   有了项目规范，新人可以根据资料一步一步配置环境，熟悉项目中规范术语，知道每个文件夹里面放置的文件关联性，看到css类名就能知道是一个模块或组件等等

前端项目规范包含那些内容？

1. 编码规范
   细分为各种语言的规范，包含HTML规范，CSS规范，Javascript规范等。后续的章节中会推荐一些业界公认的规范。

2. 工程化规范，比较推荐的是Html5 Boilerplate和Web Starter Kit
   Html5 Boilerplate是一个纯前端工程，生成的工程目录如下：
   

   image.png
   
   Web starter kit 生成的目录结构如下：
   
   image.png
   
   两者基本类似，只是命名规则有所不同，具体开发中可以根据自己项目的需求和成员喜好做适当调整。

如何制定项目规范？

如何制定项目规范没有统一的规定，可以根据自己项目的需求和团队成员喜好进行，以下几点建议可以参考：

1. 参考业界流行的规范，特别是大公司推行的规范，大公司推行的规范基本是行业专家制定的，他们的认知水平以及经验会远远超出我们的水平
2. 民主讨论，规范最终是给团队使用的，得到团队成员的肯定最重要
3. 开发规范是结果导向的，不要关注具体的实现。例如在制定代码格式规范时，不需要规定开发工具和IDE，只要大家最终编写的代码都符合规范即可。
4. 规范不是一次会议讨论就可以完成的，需要有人维护并不断更新，更新后要及时通知团队成员。

业界普遍认可的前端编码规范有哪些？

通用编码规范

1. 空格：可以利用编辑器的格式化功能实现，成熟的团队可以提供格式化脚本，每次写完代码就按下格式化快捷键是一个好习惯。
2. 空行：最多不超过2行
3. 缩进：使用2或4个字符
4. 把同一个功能的代码放在一个分组里
5. 多使用括号，一眼就能看出代码的目的
6. 变量命名：顾名思义、优先考虑长命名，尽量避免短命名，除非局部变量和循环变量、变量名拼写要正确，避免使用拼音
7. 注释：在复杂逻辑或算法上使用概述性和意图性注释、避免会增加阅读负担的注释，国内项目推荐中文注释
8. 优秀的程序员要有开放的心态，乐于接受已证实的更好规范

HTML编码规范

1. 使用HTML5的doctype来启用标准模式
2. 使用UTF-8编码
3. title、kewords、descrition等必须标签
4. 标签和属性都使用小写，属性值用双引号
5. 安照从上到下，从左到右的视觉顺序编写HTML
6. 结构、表现、行为三者分离，避免内联
   • CSS在header引用，Javascript放在页面末尾
   • 引用CSS和Javascript时无需指明type属性
   • 不使用内联的CSS和Javascript
7. 保持良好、简洁的树形结构
   • 每个块级元素都另起一行，每一行使用tab缩进并对齐
   • 可以在大的模块之间用空行隔开，使模块更清晰
   • 没有多余的空格、换行，没有多余的标签
8. 语义化标签：在网页中某种类型的内容必定需要特定的HTML标签来承载，参考HTML标签对应的英文
9. 大厂HTML规范推荐：网易HTML规范，百度HTML规范

CSS编码规范

1. 按功能分成多个文件
   • 对于较大项目，按照css的性质和用途，将css分成公共类型样式，特殊用途样式等，并按此顺序引用
2. 防止样式冲突的基本方法
   • 模块中所有元素的样式，必须限定在该模块中，全局样式除外
3. 样式命名规则，参考两种流行命名规则：NEC，BEM
4. 普遍认可的CSS编码规范
   • 不使用id选择器
   • 类名全部小写，使用横杠连接符，不使用驼峰
   • 使用css hack的地方要添加注释说明
   • 嵌套层数不易过多，不超过3层
   • 可以使用css实现的效果，就不使用Javascript
5. 大厂CSS规范推荐：网易，百度，Airbnb

Javascript编码规范

1. 使用立即执行函数
   • 如果在浏览器端开发页面，需要把所有js代码放到一个立即执行函数中，以便和其他人写的js代码隔离。时刻注意不要创建全局变量。
2. 命名风格
   • 函数、变量、方法名使用驼峰命名法，likeThis
   • 构造函数、类、枚举使用帕斯卡命名法，LikeThis
   • 常量名全部大写并使用下划线连接，LIKE_THIS
3. 分号问题，没有强制规定，注意两点
   • 在发布阶段通常把多个文件合并成一个大文件，不写分号可能造成问题；
   • 在维护老代码时，遵循原代码风格
4. 对象末尾添加逗号
   • 不加逗号，增加新属性时，代码differ工具会标记两行修改，后期跟踪不友好
   • 需要兼容低版本ie浏览器时，可以不加或者使用工具处理，去掉末尾逗号
5. 不保持this的 引用，可以使用箭头函数或bind方法代替

6. 对象参数需要详细的注释说明

   
   
   image.png

注释的写法可以参考jsdoc

7. 国内项目，推荐使用中文写注释、提交记录，文档等资料，以其他人能看懂为原则
8. 文件加上@author信息
9. 永远不要向函数传递null值，在调用其他函数数，对传入参数加一些逻辑判断处理
10. 删除无用代码（包括未使用的变量，函数等）
11. 始终保持一致性的原则，例如
    • 如果环境支持ES6，就全面使用ES6语法
    • 如果使用某个工具库，就全面使用改工具库提供的方法，代替js原生方法
    • 代码看上去出自一个人之手
12. 大厂js规范推荐：百度，Airbnb

辅助管理代码规范的工具推荐

目前大部分工具都是用Node.js编写的，安装工具前，首先需要安装NodeJs环境。选择LTS版本

1. HTML代码检查工具：bootlint，htmllint，HTMLHint
2. HTM 规范检查工具：Unicorn，Tidy
3. CSS代码检查工具：csslint，stylelint
4. Javascript代码检查工具：eslint，jshint，JSLint