《现代前端技术解析》第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
报错。 - 规范化的错误处理: 对请求或长时间的文件读写等可能失败的异步操作,需要进行错误情况的处理或异常捕获处理,而不应该静默,否则出错是不利于用户体验。