前端代码编写规范

时间 2019-12-04

标签前端代码编写规范繁體版

原文原文链接

前端代码规范

JavaScript代码编写规范

缩进

每一层级由4个空格组成，避免使用制表符（Tab）进行缩进。css

行的长度

每行长度不该该超过80个字符，多于80个字符，应该在运算符后换行，下一行增长两级缩进（8个字符）html

doSomething(argument1,argument2,argument3,argument4,
        atgument5);

原始值

一、字符串应当始终使用双引号且保持一行。
二、特殊值null在如下状况下可用：
（1）用来初始化一个可能被赋值为对象的变量时使用。
（2）用来和一个已经初始化的变量比较，这个变量有多是对象。
（3）当函数的参数指望是对象时，，被用做参数传入。
（4）当函数的返回值指望是对象时，被用做返回值传入。
其他状况避免使用null
三、避免使用特殊值undefined。判断一个变量是否认义应当使用typeof操做符。前端

运算符间距

二元运算符先后必须使用一个空格保持表达式整洁，操做符包括运算符和逻辑运算符。java

//好的写法
var found = (value[i] === item);

if(found && (count > 10)){
  doSomething();
}

括号间距

使用括号时，紧接左括号以后和紧接右括号以前不该该有空格。git

对象直接量

起始左花括号应当同表达式保持一行
每一个属性的名值对应当保持一个缩进，第一个属性应当在左花括号后另起一行
每一个属性的名值对使用不含引号的属性名，其后紧跟冒号（以前不含空格）
若属性值是函数类型，函数体在属性名之下另起一行，并且其先后均应保留一个空行
一组相关属性先后可插入空行提高代码的可读性

结束的右花括号独占一行github

var object = {
 
 key1:value1,

 key2:value2,

 func:function() {
   //doSomething
 },

 key3 = value3
};

当对象字面量做为函数参数时，若值是变量，起始花括号应当同函数名在同一行。canvas

doSomething({
 key1:value1,
 key2:value2
});

注释

1.单行注释浏览器

独占一行的注释，用来解释下一行代码
在代码行的尾部的注释，用来解释它以前的代码
多行，用来注释掉一个代码块

代码行尾单行注释的状况，应该确保代码结尾同注释之间至少一个缩进
单行注释以前要空格安全

if (condition) {

  //若是代码执行到这里，代表经过了安全检查
   allowed();
}

行内注释
var result = something + somethingElse; // 行内注释网络

2.多行注释
每一个多行注释都至少包含以下三行

首行仅仅包括/*注释开始，该行不该当有其余内容
接下来的行以*开头并保持左对齐，这些行能够文字描述
最后一行以*/开头并同先前行保持对齐，不该该有文字

注释前空行，星号后空格

if (condition) {

     /*
      * 若是代码执行到这里
      * 说明经过了全部检测
      */
     allowed();
 }

变量声明

变量定义放在函数开头，使用var表达式每行一个变量
除首行，全部行都应该多一层缩进使变量名可以垂直方向对齐
初始化的变量应当在未初始化变量以前

var count = 10,
     name = "Nicoho",
     found = false,
     empty;

函数声明

函数名和开始圆括号之间不该该有空格
结束圆括号和右边起始花括号应该有空格，右侧花括号和函数关键字保持一行
参数名之间应当有在逗号以后保留一个空格
当即被调用的函数应当在调用的外层用圆括号包裹

function outer(arg1, arg2){

  var count = arg1,
      name = arg2,
      found = false,
      empty;
      
  function inner(){
      //代码
  }
  //调用inner()的代码
}

命名

变量命名应当采用驼峰命名格式，首字母小写，每一个单词首字母大写，第一个单词应当是一个名词，不要在变量命名中使用下划线
函数命名也采用驼峰命名格式，首字母小写，第一个单词应当是动词，和变量名进行区分
构造函数命名采用驼峰命名格式，首字母大写，以非动词开头
常量的命名应当是全部字母大写，不一样字母之间用单个下划线隔开
对象的属性和方法命名同变量和函数，私有属性或者方法，在前面加一个下划线

赋值

给变量赋值时，若是右侧是含有比较语句的表达式，须要用圆括号包裹

等号运算符

使用===（严格相等）和！==（严格不相等）替代相等（==）和不等（！=）来避免弱类型转换错误

三元操做符

三元操做符应当仅仅用在条件赋值语句中，而不要做为if语句的替代品

var value = condition ？ value1 ： value2;

语句

一、简单语句
每行最多只包含一条语句，全部简单的语句以分号（；）结束。
二、复合语句

括起来的语句应当比较复合语句多缩进一个层级
开始的大括号应当在复合语句所在行的末尾；结束的大括号独占一行，且与符合语句开始保持一样的缩进
如果if语句开始的关键字，其后紧跟一个空格，起始大括号在空格以后

if语句

if (condition) {
    statements
}

毫不容许在if语句中中省略花括号，单行语句一样须要花括号

if (condition) {
    statements
} else if (condition) {
    statements
} else {
    statements
}

for语句

for语句的初始化部分不该该有变量声明

var i,
    len;
    for (i=0, len=10; i < len; i++){
        //代码
    }

当使用for-in语句时，记得使用hasOwnProperty()进行双重检查来过滤出对象的成员.

switch语句

switch (value) {
    case 1:
        /*falls through*/
        
    case 2:
        doSomething();
        break;
        
    case 3:
        return true;
        
    default:
        throw new Error ("This shouldn't happen");
 }

留白

一、两行空行以下状况使用

在不一样的源代码文件之间
在类和接口定义之间

二、单行空行以下状况使用

方法之间
方法中局部变量和第一行语句之间
多行或者单行注释以前
方法中逻辑代码块之间以提高代码的可读性

三、空格在以下状况下使用

关键字后跟括号的状况应当用空格隔开
参数列表中逗号以后应当保留一个空格
全部的除了点（.）以外的二元运算符，其操做数都应该用空格隔开。单目运算符的操做数之间不该该用空白隔开
for语句中的表达式之间应当用空格隔开

HTML代码编写规范

HTML头部文档类型

建议使用 text/html 格式的 HTML。
避免使用XHTML，由于XHTML以及它的属性，好比application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限。
<!DOCTYPE html>

HTML标签的闭合

一、自闭合的标签无需闭合，如：<input>、<img>、<br>、<meta>、<link>和<hr> 等
不推荐方式：<input type="text" name="antzone"/></input>
推荐的方式：<input type="text" name="antzone"/>
二、可选闭合标签建议闭合，如：<body>、<li>
三、闭合标签必须闭合

HTML页面使用双引号，标签和标签属性统一使用小写形式

缩进

缩进使用soft tab（4个空格），嵌套的节点应该缩进；

HTML标签嵌套规则

一、HTML4/XHTML的嵌套规则
（1）内联元素不能嵌套块元素
（2）<p>元素和<h1>~<h6>元素不能嵌套块元素
（3）ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd
（4）a标签不能嵌套a；
二、HTML5元素嵌套规则
元素的分类再也不是块元素或内联元素这样来分类（其实历来就没有这样分），而是按照以下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）
使用语义化标签，尽可能少的使用毫无心义的标签，仅仅用于设置样式，语义化的HTML结构，有助于搜索引擎理解，另外一方面多人协做时，能迅速了解开发者意图

HTML多媒体回溯

页面中的图片、视频和canvas 动画等都要确保有替代的显示内容。
图片文件咱们可采用有意义的备选文本（alt属性规定），视频和音频文件咱们能够为其加上说明文字或字幕。
例如：<img src="antozen.jpg" alt="网络图谱">

代码格式规则

每个块状元素，列表元素和表格元素后，加上一新空白行。
内联元素写在一行内，块状元素还有列表和表格要另起一行。

内容、表现和行为分离

尽可能在文档和模板中只包含结构性的HTML；而将全部表现代码，移入样式表中；将全部动做行为，移入脚本之中。

此外，为使得它们之间的联系尽量的小，在文档和模板中也尽可能少地引入样式和脚本文件。

主要规则以下:

（1）.页面中尽可能不要引入超过两个样式表，例如main.css和vendor.css。

（2）.页面中保证只引入一个js文件（若是有多个文件，将它们合并压缩后引入）。

（3）.不要使用内联样式和内部样式。

（4）.不要使用表象元素，例如<b>, <u>, <center>, <font>和<b>等。

（5）.不使用元素中表象的属性，例如align="center"。
结构的搭建

采用HTML5标准时开头应该加上<!DOCTYPE html>

应在head标签中引入CSS文件，这样浏览器就能够在输出HTML以前获取CSS信息
在<body>标签的末尾引入JavaScript文件，这样能够在页面显示以后再编译JavaScript文件，以加快页面读取速度，同时有助于JavaScript对页面中的元素进行操做

对元素的操做应添加在JavaScript代码中，而不要在HTML中添加，下面这个例子就是错误的，这样后期难以维护

HTML布尔属性值

HTML5规范中 disabled、checked、selected 等属性不用设置值。

HTML代码注释

若是可能尽可能不写注释，尽量减小文档的体积；若是必需要添加注释，那么就要遵循以下规则:

（1）.详尽注释，解释代码解决问题、解决思路、是否为新鲜方案等。
（2）.模块注释，github建议不使用模块结束注释。
（3）.待办注释
如：
特别说明:注释文本与两端（--）之间要有一个空格。

网页标签语义化

如何判断网页标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性
语义化标签注意的一些问题：

尽量少的使用无语义标签div和span
语义不明显时，可用p也可用div的地方，尽可能使用p，由于p默认有上下边距，去除样式后的可读性更好，对兼容特殊终端有利
不要使用纯样式标签，例如bfontu,改用CSS设置语义上强调的文本能够包在strong和em标签里，strong的默认样式是加粗，而em的默认样式是斜体

部分标签的语义：
div 主要用于布局，分割页面的结构;
ul/ol 主要用于无序/有序列表;
dl/dt/dd 当页面中出现第一行为相似标题/简述，而后下面为详细描述的内容时应该使用该标签;
span 没有特殊的意义，能够用做排版的辅助，而后在css中定义span;
h1-h6 标题, 根据重要性依次递减;
h1 最重要的标题;
label 使表单更有亲和力并且能辅助表单排版;
不推荐使用的标签：
font 文字的外观，大小和颜色;
u 文本下划线;
center 居中对齐;
s 删除线;
strike 删除线;
noframes 无视框时的内容;
iframe 定义嵌入视图;
isindex 不建议使用（可搜寻，使用input代替）;
dir 目录式列举;
menu 菜单列表;
basefont 定义基本字体;
applet 定义java程序;
frame 定义个别视框;
frameset 视框格式总定义;

属性

1.HTML 属性应当按照如下给出的顺序依次排列，确保代码的易读性。

class(首位)
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role

2.id 和 class

class 用于标识高度可复用组件，所以应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），所以排在第二位。
id通常用于网页大体布局，好比标志、导航、主体内容、版权，规范命名为#logo , #nav, #content ,#copyright。

通常项目中class用于css中，id被js用来操做dom且不添加样式，（jq操做class通常不加样式）。

表单

每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在label标签中设置“for = someId"来让说明文本和相应的input关联起来