前端工程化——工程规范

要成为通用的变成产品，程序必须按照普遍认可的风格来编写. -- 《人月神话》 从事软件开发以来，“规范”对我们其实并不陌生，但是到底什么是规范呢？规范为什么这么重要？怎么做好项目规范？在实际项目中，我们也常常强调规范，在项目初期也会制定相应的项目规范，但是随着项目的进行，后期确越来越难以执行，问题出在哪里？ 通过本次课程学习，看看业界大厂，资深大佬们都有什么建议吧。 什么是规范？ 规范简单来说就是规矩，准则。“不以规矩，不能成方圆”，做任何事都要有一定的规矩、规则、做法，否则无法成功。做项目当然也要讲究规范。 为什么强调规范？ 好的规范可以带来以下几个好处： 降低团队沟通成本 举例说明：设计模式也是一种规范，在讨论解决方案时，我们可以直接说使用单例模式来实现，就不需要再去详细讨论实现细节，大家都能明白单例模式是怎么实现的，不清楚单例模式的可以自己去查资料理解即可。 提升工作效率 这一点我有真实体会，我每次修改完代码，都会习惯性的按快捷键格式化代码，曾经参与过一个项目，没有代码格式方面的规范，而其他成员提交的代码也没有格式化，在我提交后，版本控制工具会标记出大量的改动，这些改动其实大部分都是格式上的，和本身修改的功能无关，后续跟踪bug的时候非常难以定位；甚至如果出现多人同时修改，合并的时候出现大量冲突，解决起来也非常耗费时间和精力。如果一开始就制定了代码格式规范，这些问题就不会出现了。 可以根据规范做一些自动化工具，例如代码生成、自动化测试等，本质也是提升效率 如果规范确立，我们可以自己编写一些代码模板生成工具，工程目录初始化工具等，减少重复性的手动工作。 作为资料传承给项目新成员，有助于新成员快速融入团队 有了项目规范，新人可以根据资料一步一步配置环境，熟悉项目中规范术语，知道每个文件夹里面放置的文件关联性，看到css类名就能知道是一个模块或组件等等 前端项目规范包含那些内容？ 编码规范 细分为各种语言的规范，包含HTML规范，CSS规范，Javascript规范等。后续的章节中会推荐一些业界公认的规范。 工程化规范，比较推荐的是Html5 Boilerplate和Web Starter Kit Html5 Boilerplate是一个纯前端工程，生成的工程目录如下： image.png Web starter kit 生成的目录结构如下： image.png 两者基本类似，只是命名规则有所不同，具体开发中可以根据自己项目的需求和成员喜好做适当调整。 如何制定项目规范？ 如何制定项目规范没有统一的规定，可以根据自己项目的需求和团队成员喜好进行，以下几点建议可以参考： 参考业界流行的规范，特别是大公司推行的规范，大公司推行的规范基本是行业专家制定的，他们的认知水平以及经验会远远超出我们的水平 民主讨论，规范最终是给团队使用的，得到团队成员的肯定最重要 开发规范是结果导向的，不要关注具体的实现。例如在制定代码格式规范时，不需要规定开发工具和IDE，只要大家最终编写的代码都符合规范即可。 规范不是一次会议讨论就可以完成的，需要有人维护并不断更新，更新后要及时通知团队成员。 业界普遍认可的前端编码规范有哪些？ 通用编码规范 空格：可以利用编辑器的格式化功能实现，成熟的团队可以提供格式化脚本，每次写完代码就按下格式化快捷键是一个好习惯。 空行：最多不超过2行 缩进：使用2或4个字符 把同一个功能的代码放在一个分组里 多使用括号，一眼就能看出代码的目的 变量命名：顾名思义、优先考虑长命名，尽量避免短命名，除非局部变量和循环变量、变量名拼写要正确，避免使用拼音 注释：在复杂逻辑或算法上使用概述性和意图性注释、避免会增加阅读负担的注释，国内项目推荐中文注释 优秀的程序员要有开放的心态，乐于接受已证实的更好规范 HTML编码规范 使用HTML5的doctype来启用标准模式 使用UTF-8编码 title、kewords、descrition等必须标签 标签和属性都使用小写，属性值用双引号 安照从上到下，从左到右的视觉顺序编写HTML 结构、表现、行为三者分离，避免内联 CSS在header引用，Javascript放在页面末尾 引用CSS和Javascript时无需指明type属性 不使用内联的CSS和Javascript 保持良好、简洁的树形结构 每个块级元素都另起一行，每一行使用tab缩进并对齐 可以在大的模块之间用空行隔开，使模块更清晰 没有多余的空格、换行，没有多余的标签 语义化标签：在网页中某种类型的内容必定需要特定的HTML标签来承载，参考HTML标签对应的英文 大厂HTML规范推荐：网易HTML规范，百度HTML规范 CSS编码规范 按功能分成多个文件 对于较大项目，按照css的性质和用途，将css分成公共类型样式，特殊用途样式等，并按此顺序引用 防止样式冲突的基本方法 模块中所有元素的样式，必须限定在该模块中，全局样式除外 样式命名规则，参考两种流行命名规则：NEC，BEM 普遍认可的CSS编码规范 不使用id选择器 类名全部小写，使用横杠连接符，不使用驼峰 使用css hack的地方要添加注释说明 嵌套层数不易过多，不超过3层 可以使用css实现的效果，就不使用Javascript 大厂CSS规范推荐：网易，百度，Airbnb Javascript编码规范 使用立即执行函数 如果在浏览器端开发页面，需要把所有js代码放到一个立即执行函数中，以便和其他人写的js代码隔离。时刻注意不要创建全局变量。 命名风格 函数、变量、方法名使用驼峰命名法，likeThis 构造函数、类、枚举使用帕斯卡命名法，LikeThis 常量名全部大写并使用下划线连接，LIKE_THIS 分号问题，没有强制规定，注意两点 在发布阶段通常把多个文件合并成一个大文件，不写分号可能造成问题； 在维护老代码时，遵循原代码风格 对象末尾添加逗号 不加逗号，增加新属性时，代码differ工具会标记两行修改，后期跟踪不友好 需要兼容低版本ie浏览器时，可以不加或者使用工具处理，去掉末尾逗号 不保持this的 引用，可以使用箭头函数或bind方法代替 对象参数需要详细的注释说明 image.png 注释的写法可以参考jsdoc 国内项目，推荐使用中文写注释、提交记录，文档等资料，以其他人能看懂为原则 文件加上@author信息 永远不要向函数传递null值，在调用其他函数数，对传入参数加一些逻辑判断处理 删除无用代码（包括未使用的变量，函数等） 始终保持一致性的原则，例如 如果环境支持ES6，就全面使用ES6语法 如果使用某个工具库，就全面使用改工具库提供的方法，代替js原生方法 代码看上去出自一个人之手 大厂js规范推荐：百度，Airbnb 辅助管理代码规范的工具推荐 目前大部分工具都是用Node.js编写的，安装工具前，首先需要安装NodeJs环境。选择LTS版本 HTML代码检查工具：bootlint，htmllint，HTMLHint HTM 规范检查工具：Unicorn，Tidy CSS代码检查工具：csslint，stylelint Javascript代码检查工具：eslint，jshint，JSLint

本文章由javascript技术分享原创和收集