通用规范
-
尽量三层结构分离。移动端可以适当内联,但内联资源最好限制在2KB以内。
-
HTML标签、标签属性、样式名及规则建议小写。HTML的 id 属性使用驼峰式命名。
<ul id="menuList" class="menu-list"> <li class="menu-list-item">1</li> <li class="menu-list-item">2</li> </ul>
-
多注释,尽量在文件头部添加verilog那样的多行文件注释。此外,更推荐使用 自文档化风格的代码 进行开发,让代码本身具有含义从而代替注释。
// 常规代码块 let width = (value - 0.5) * 16; // 自文档化风格代码。内容更多,但便于维护。 let width = emToPixels(value); function emToPixels(ems) { return (ems - 0.5) * 16; }
HTML规范
- Doctype统一使用HTML5的 ,既简洁又向后兼容。
- head里面必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放。
- 引入CSS或JS文件时,省略它们的type属性,不需要
type="text/css"
之类的 - 引号问题:所有标签属性值使用双引号,便于区分标签的属性名和属性值。(JS里面字符串值推荐单引号)(注意JSON里的字符串,无论键值都必须双引号)
- 省略非必需的属性值,如输入框里的 readonly、disabled、required。例如
<input type="text" readonly="readonly"
写成<input type="text" readonly>
就行了。 - 自闭标签如link、img等,可以不加/关闭标签
- 使用label的for属性,这样点击label的时候就会选中到与之对应的input或者textarea上。例如
<label for="blue">蓝色</label> <input type="radio" id="blue" name="color">
- 在每个大的模块的开始和结束的地方都添加注释标记
CSS规范
- 引用规范:使用link的方式调用外部样式文件,可以复用并能利用缓存提高加载速度。
- 命名约定:
- 一般由小写单词和中画线组成,按功能可以加上相应的统一前缀 如ui-xxx
- 不以模块表现样式命名,要根据内容命名,避免使用left、top、red之类的单词
- HTML标签中的id属性一般用于JS查询DOM,CSS中尽量避免使用id选择器
- 简写方式:url中引用资源没必要引号括起来。 十六进制颜色值使用小写
- 属性书写顺序:
- 定位属性:position display float left top right bottom overflow clear z-index
- 自身属性:width height margin padding border background
- 文字样式:font-family font-size font-style font-weight font-varient color
- 文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
- css3中新增属性:content box-shadow border-radius transform……
- 高效实现规范:标签名与class组合的选择器会降低CSS解析速度。 不同元素之间属性存在继承关系时,使用分拆方式避免属性重复定义。
ECMAScript5 常用规范
- 添加适当的空格和空行
- 变量命名:标准变量采用驼峰式命名;常量使用全大写命名,并用下划线连接;构造函数首字母大写;jQuery对象推荐以"$"开头命名,如
let $body=$('body');
- 条件判断:尽量不要直接使用undefined进行变量判断,使用typeof和字符串‘undefined’对变量类型进行判断。
- 不要在条件语句或循环语句中声明函数
- 其他:不要给内置对象的原型(如Array,Date)上添加方法;同一作用域下不要声明同名变量……
ECMAScript6+ 参考规范
- 字符串拼接使用字符串模板完成:
let name='Morty'; let str='<h2>Hi, ${name}!<h2>'
- 解构赋值尽量使用一层解构
- 数组拷贝推荐使用简洁高效的··· 。例如
const items=[1,2,3]; let itemsCopy=[...items]
- 数组循环遍历使用for···of,非必需情况不推荐forEach、map、简单循环
- 推荐使用Promise,避免使用第三方库或直接回调。原生的异步处理性能更好且符合规范
- 合理使用Generator,推荐使用async/await,更加简洁
- 如果不是必须,避免使用迭代器iterator