现代前端技术解析-第5章 前端项目与技术实践（一）

《现代前端技术解析》第5章阅读笔记（一）

---

• 笔记章节目录

• 第1章 Web前端技术基础
• 第2章 前端与协议
• 第3章 前端三层结构与应用
• 第4章 现代前端交互框架
• 第5章 前端项目与技术实践
  • 一（5.1 前端开发规范）
  • 二（5.2 前端组件规范 & 5.3 自动化构建）
  • 三（5.3 自动化构建）
  • 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
• 第6章 前端跨栈技术
• 第7章 未来前端时代

---

• 2020/02/19

5.1 前端开发规范

本节的使用规范均为《现代前端技术解析》作者的推荐规范，不是强制规范。

5.1.1前端通用规范（推荐规范）

（p205-208）

最好是在团队中统一规范。

• 三层结构分离： 开发时应该做到3层结构分离，保证他们之间的最小耦合。

• 缩进： 统一使用tab（或4个空格宽度）来进行缩进。

• 内容编码： HTML使用来指定编码，css默认即可。

• 小写： 所有的HTML标签、属性、样式名及规则建议使用小写，id可以用驼峰命名法。

  <ul id='menuList' class='menu-list'>ul>
  

• 代码单行长度限制： 不要超过120字符（推荐）。

• 注释： 尽可能的添加注释，也尽量在文件头部添加文件注释。推荐使用自文档化风格的代码进行开发。

• 行尾空格与符号： 删除行尾空格与多余的符号。

---

5.1.2 前端HTML规范

（p208-212）

• DTD定义： 统一使用H5的标准文档类型定义—

• head内容： head中必须定义title、keyword、description，保证基本的SEO。（p208）

• 省略type属性： 在引入css和js文件时，省略type属性。因为H5有默认值。

• 使用双引号包裹属性值

• 属性值省略： $非必须的属性值可以省略（例如disabled="disabled"写为disabled）。$

  • 关于这一点，在XHTML语法规则（W3school XHTML语法规则）中明确规定了进制使用属性值最小化写法/简写。所以最好还是不要省略属性值

• 嵌套： 所有元素必须正确嵌套。

• 标签闭合： 非自闭合标签必须添加关闭标识。

• 使用img标签的alt属性： 尽量避免alt属性为空。

• 使用lable的for属性： 在lable中使用for属性，或者 将对应的控件放在lable内部 ，以实现点击lable内容会focus到控件上。

• 按模块添加注释

• 标签元素格式： 块级元素一般另起一行写。行内元素可以根据情况换行写。正确使用缩进。

• 语义化标签： 推荐多使用H5的语义化标签，不要使用H5废弃的用于样式表现的无语义化标签（如

  ,,等）

---

5.1.3 前端CSS规范

（p212-218）

• CSS引用规范： 尽量多使用外部样式引用规范，外部样式可以复用并能够利用浏览器缓存提高加载速度。强烈不建议大量使用内联样式。

• 样式的命名约定： 使用小写单词加-组成。

• 简写方式：

  • 单位0的缩写：如果属性值是0，则不写后面的单位（如px等）。
  • 去掉URL中引用资源的引号
  • 颜色值使用小写并尽量缩写到3位（如果可以的话）

• 属性书写顺序： CSS样式书写遵循先布局（position、display、float等）后内容（color、font等）的规则。（p215）

• Hack写法： 尽可能减少对CSS Hack的使用和依赖，选择其他方式代替。CSS若要实现多版本浏览器内核支持的话，应该遵循先写私有属性后写标准属性的原则。

• CSS高效实现规范： （p216）

  • 标签名与id或者class组合选择器会造成冗余，应避免使用。
  • 尽量使用简短的CSS实现方式，对于无继承关系的元素使用合并的写法。
  • 不同元素之间属性存在继承关系时，应使用分拆方式，避免继承属性的重复定义。

• 使用预处理脚本编码开发： 使用预处理嵌套的方式描述元素之间的层次关系。尽可能使用预处理器的高效语法来提高开发效率（如嵌套、变量、嵌套属性、注释、继承等）。（SASS、LESS）

---

5.1.4 ECMAScript 5常用规范（推荐规范）

（p218- 222）

• 分号： JS语句后面统一加上分号。

• 空格： 所有运算符、符号与英文单词之间添加必要的空格，有利于阅读。

• 空行： 一般在代码块后保留空行，显得块内容层次分明。

• 引号： JS字符串最外层统一使用单引号。方便内部的HTML使用双引号。

• 变量命名： 标准变量采用驼峰命名法；常量使用大写字母加下划线；构造函数首字母大写。

• 对象： 对象属性名不需要加引号；对象键值对以缩进的形式进行书写；数组、对象最后一个元素后面不要保留逗号，避免浏览器解析错误。

• 大括号： 代码块使用大括号包裹，注意换行。

• 条件判断： 尽量不要直接使用undefined进行变量判断，使用typeof代替。使用严格相等云算法（===,!==）.

• 不要在条件语句或循环语句中声明函数

• 一些其他的可选规范参考： p222

---

5.1.5 ECMAScript 6+ 参考规范

（p222 - 227）

• 正确使用ES6的变量声明关键字： let、const

• 字符串拼接使用字符串模版完成

• 解构赋值尽量使用一层解构，否则声明变量嵌套太深难以理解

• 数组拷贝推荐使用...实现，更加简洁高效

• 数组循环遍历使用for...of，非必须情况下不推荐使用forEach、map、简单循环：

  ​ 关于数组遍历大效率，参考博客JS 中的数组遍历方式效率比较，简单循环是效率最高的循环！！！

• 使用ES6的类来代替之前的类实现方式，尽量使用constructor进行属性成员变量赋值

• 模块化多变量导出时尽量使用对象解构，不使用全局导出。尽量不要把import和export写在一行

• 导出类名时，保持模块名称和文件名相同，类名首字符需要大写

• 生成器中yield进行异步操作时需要使用try...catch包裹，方便对异步进行处理

• 推荐使用Promise， 避免使用第三方库或直接回调，原生的异步处理性能更好而且符合语言规范

• 如果不是必须，避免使用迭代器

• 不要使用统一码（Unicode），中文正则匹配和计算较消耗时间，而且容易出现问题

• 合理使用Generator，推荐使用async/await，更加简洁

---

5.1.6 前端防御性编程规范

（p227-228）

防御性编程是指通过检测任何可能存在逻辑异常问题的代码实现，提高脚本执行过程健壮性的一种编程手段。

• 对外部数据的安全检测判断： 外部（如后台）返回的数据，需要先做判断在进行处理，避免undefined报错。
• 规范化的错误处理： 对请求或长时间的文件读写等可能失败的异步操作，需要进行错误情况的处理或异常捕获处理，而不应该静默，否则出错是不利于用户体验。

---

参考

W3school XHTML语法规则

JS 中的数组遍历方式效率比较