前端代码编写规范

Posted 10manongit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端代码编写规范相关的知识,希望对你有一定的参考价值。

前端代码规范

javascript代码编写规范

缩进

每一层级由4个空格组成,避免使用制表符(Tab)进行缩进。

行的长度

每行长度不应该超过80个字符,多于80个字符,应该在运算符后换行,下一行增加两级缩进(8个字符)

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

原始值

1、字符串应当始终使用双引号且保持一行。
2、特殊值null在以下情况下可用:
(1)用来初始化一个可能被赋值为对象的变量时使用。
(2)用来和一个已经初始化的变量比较,这个变量有可能是对象。
(3)当函数的参数期望是对象时,,被用作参数传入。
(4)当函数的返回值期望是对象时,被用作返回值传入。
其余情况避免使用null
3、避免使用特殊值undefined。判断一个变量是否定义应当使用typeof操作符。

运算符间距

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

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

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

括号间距

使用括号时,紧接左括号之后和紧接右括号之前不应该有空格。

对象直接量

  • 起始左花括号应当同表达式保持一行
  • 每个属性的名值对应当保持一个缩进,第一个属性应当在左花括号后另起一行
  • 每个属性的名值对使用不含引号的属性名,其后紧跟冒号(之前不含空格)
  • 若属性值是函数类型,函数体在属性名之下另起一行,而且其前后均应保留一个空行
  • 一组相关属性前后可插入空行提升代码的可读性
  • 结束的右花括号独占一行

    var object = {
     
     key1:value1,
    
     key2:value2,
    
     func:function() {
       //doSomething
     },
    
     key3 = value3
    };

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

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;

语句

1、简单语句
每行最多只包含一条语句,所有简单的语句以分号(;)结束。
2、复合语句

  • 括起来的语句应当比较复合语句多缩进一个层级
  • 开始的大括号应当在复合语句所在行的末尾;结束的大括号独占一行,且与符合语句开始保持同样的缩进
  • 若是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");
 }

留白

1、两行空行如下情况使用

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

2、单行空行如下情况使用

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

3、空格在如下情况下使用

  • 关键字后跟括号的情况应当用空格隔开
  • 参数列表中逗号之后应当保留一个空格
  • 所有的除了点(.)之外的二元运算符,其操作数都应该用空格隔开。单目运算符的操作数之间不应该用空白隔开
  • for语句中的表达式之间应当用空格隔开

html代码编写规范

HTML头部文档类型

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

HTML标签的闭合

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

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

缩进

缩进使用soft tab(4个空格),嵌套的节点应该缩进;

HTML标签嵌套规则

1、HTML4/XHTML的嵌套规则
(1)内联元素不能嵌套块元素
(2)<p>元素和<h1>~<h6>元素不能嵌套块元素
(3)ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;ul、ol下都只能跟li,dl下只能跟dt.dd
(4)a标签不能嵌套a;
2、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).待办注释
    如:<!-- TODO:待办事项 -->
    特别说明:注释文本与两端(--)之间要有一个空格。

    网页标签语义化

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

    • 尽可能少的使用无语义标签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关联起来

    以上是关于前端代码编写规范的主要内容,如果未能解决你的问题,请参考以下文章

    VS Code配置snippets代码片段快速生成html模板,提高前端编写效率

    编写灵活稳定高质量的前端代码的规范一(推荐收藏)

    编写灵活稳定高质量的前端代码的规范二(推荐收藏)

    9个前端代码规范秘籍 你也能写出诗一样的代码

    前端代码规范

    怎么提高代码质量?——来自阿里的前端代码规范