《现代前端技术解析》第5章阅读笔记（一）
- 笔记章节目录
- 2020/02/19
5.1 前端开发规范
本节的使用规范均为《现代前端技术解析》作者的推荐规范，不是强制规范。
5.1.1前端通用规范（推荐规范）
（p205-208）
最好是在团队中统一规范。
-
三层结构分离： 开发时应该做到3层结构分离，保证他们之间的最小耦合。
-
缩进： 统一使用tab（或4个空格宽度）来进行缩进。
-
内容编码： HTML使用
<meta charset="utf-8">来指定编码，css默认即可。 -
小写： 所有的HTML标签、属性、样式名及规则建议使用小写，id可以用驼峰命名法。
<ul id='menuList' class='menu-list'></ul> -
代码单行长度限制： 不要超过120字符（推荐）。
-
注释： 尽可能的添加注释，也尽量在文件头部添加文件注释。推荐使用自文档化风格的代码进行开发。
-
行尾空格与符号： 删除行尾空格与多余的符号。
5.1.2 前端HTML规范
（p208-212）
-
DTD定义： 统一使用H5的标准文档类型定义—
<!DOCTYPE html> -
head内容：head中必须定义title、keyword、description，保证基本的SEO。（p208） -
省略
type属性： 在引入css和js文件时，省略type属性。因为H5有默认值。 -
使用双引号包裹属性值
-
属性值省略： 非 必 须 的 属 性 值 可 以 省 略 （ 例 如 d i s a b l e d = " d i s a b l e d " 写 为 d i s a b l e d ） 。 \color{red}{非必须的属性值可以省略（例如disabled="disabled" 写为 disabled）。} 非必须的属性值可以省略（例如disabled="disabled"写为disabled）。
- 关于这一点，在XHTML语法规则（W3school XHTML语法规则）中明确规定了进制使用属性值最小化写法/简写。所以最好还是不要省略属性值
-
嵌套： 所有元素必须正确嵌套。
-
标签闭合： 非自闭合标签必须添加关闭标识。
-
使用
img标签的alt属性： 尽量避免alt属性为空。 -
使用
lable的for属性： 在lable中使用for属性，或者 将对应的控件放在lable内部 ，以实现点击lable内容会focus到控件上。 -
按模块添加注释
-
标签元素格式： 块级元素一般另起一行写。行内元素可以根据情况换行写。正确使用缩进。
-
语义化标签： 推荐多使用H5的语义化标签，不要使用H5废弃的用于样式表现的无语义化标签（如
<center>,<font>,<strike>等）
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报错。 - 规范化的错误处理： 对请求或长时间的文件读写等可能失败的异步操作，需要进行错误情况的处理或异常捕获处理，而不应该静默，否则出错是不利于用户体验。
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
