代码规范

2020/11/23/18:14

无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。

HTML

嵌套元素应当缩进一次（即四个空格）。

元素属性顺序（尽量）
HTML属性应按照以下给出的顺序依次排列，确保易读性

  1. class
  2. id , name
  3. data-*
  4. src , for , type , href , value
  5. title , alt
  6. aria-* , role

对于属性的定义，确保全部使用双引号，不要使用单引号

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的
标签并保持最小的复杂度。

class元素命名，前缀为样式所在文件名称的缩写，便于 查找该元素的样式位于哪个css文
件
如一个元素样式加载于某一个css文件中
若css文件的文件名只有一个单词，则前缀取首字母和末字母，如 index.css -> ix_
若css文件的文件名有两个或以上，取每个词的首字母，如 shiyu.css -> sy_
如元素样式加载与当前页面的 style 标签中，则前缀为 p_
上述命名规则适用于大部分开发情况，前端文件交错情况比较复杂，所以特殊情况可忽略此
规则

Javascript

js函数命名，参考 class 元素命名

命名时采用小驼峰命名法，就是第一个单词的首字母小写，后面的单词的首字母全部大写。
如： 规则列表的英文释义为 rule list 则用于命名时应该为 ruleList ，rule 是第一个单词，
所以首字母不大写，而 list 就不是了，所以首字母 L 就是要大写的。

JS事件应用于元素之上时，需把事件放到元素的最后面。

例 :

1
<div class="shiyu" id="myDiv" title="这是一个按钮" onclick="p_checkInfo()"></div>

每一个方法前都要加上注释，注释内容为这个方法的主要作用。如果有传入参数，也要写出
参数的名称、代表了什么、预计传入的参数的数据类型、默认值、可选值。可选值之间用 |
隔开
如： @param 参数名 代表意义。数据类型。默认值。可选值

例:

1
2
3
4
5
6
 /*
2 *判断数据是否为 null
3 *
4 *@param data 要被判断的数据。all
5 *@param flag 严格判断，若开启则需数据必须严格相等。bool。true。true | false
6 */

CSS

对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

以组件为单位组织代码段
按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动

其他

所有文件的命名，如html、css、js、图片资源文件等不可以采用中文名称或中文输入法状态下的字符