美文网首页
JavaScript 代码规范

JavaScript 代码规范

作者: 晚溪呀 | 来源:发表于2019-03-15 00:36 被阅读0次

    1、缩进

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

    2、行的长度

    每行长度不超过 80 个字符,如果超过,应当在一个运算符(逗号,加号等)后换行。下一行应当增加两级缩进( 80个空格)

    3、运算符的行间距

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

            1 + 2 = 3
    

    4、括号间距

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

            if (num > 1)
    

    5、对象直接量

    对象直接量应当使用如下格式

    • 起始左花括号应当同表达式保持一行

    • 每个属性的名值对应当保持一个缩进,第一个属性应当在左花括号后另起一行

    • 每个属性的名值对应当使用不含引号的属性名,其后紧跟一个冒号(之前不含空格) ,而后是值

    • 倘若属性值是函数类型,函数体应当在属性名之下另起一行,而且其前后就均保留一个空格

    • 一组相关的属性前后可以插入空行以提升代码的可读性结束的右花括号应当独占一行

            let obj = {
                // 插入空行
                a: 1,
    
                fun: function () {
    
                }
            }
    

    6、注释

    频繁地使用注释有助于他人理解你的代码,如下情况应当使用注释

    • 代码晦涩难懂

    • 可能被误认为错误的代码

    • 必要但并不明显的针对特定浏览器的代码

    • 对于对象、方法或者属性,生成文档是有必要的(使用恰当的文档注释)

    6.1 单行注释

    单行注释单行注释应当用来说明一行或者一组相关的代码。 单行注释可能有如下三种使用方式

    • 独占一行的注释,用来解释下一行代码

    • 在代码行的尾部注释,用来解释它之前的代码

    • 多行,用来注释掉一个代码块

    • 对于行尾的情况,代码和注释间至少一个空格

            // 独占一行的注释
            let num = 1; // 代码行的尾部注释
    
    6.2 多行注释

    多行注释应当在代码需要更多的文字去解释的时候使用。每个多行注释应当有如下三行

    • 首行仅仅包含 / 注释开始,该行不能有其他文件

    • 接下来的行 * 开头并保持左对齐。这些行可以有文字描述

    • 最后一行以 * 结束并与先前行对齐,也不应再有其他文字

    多行注释应当保持同它描述的代码一样的缩进,后续每个 * 后加一个空格

            /*
            * 这是描述
            * 这是描述
            * 这是描述
            */
    

    7、变量声明

    所有变量在使用前都应当事先定义,使用一个var
    未初始化值得变量在后面

    8、函数声明

    函数应当在使用前提前定义,不是作为对象的方法的函数,应当使用函数声明的格式( function 声明)

    函数内的函数声明,应当在 var 声明后,立即定义

    匿名函数的自执行

            (function () {} {})
    

    9、命名

    变量和函数命名时要小心。命名应仅限于数字字母字符。某些情况可以使用下划线。最好不好用美元符号 ($) 和反斜杠 (\)
    变量命名采用驼峰式,首字母小写,每个单词首字母大写,变量名的第一个单词应当是一个名词(而非动词)以避免和函数混淆,不要再变量名中使用下划线。

    函数名也使用驼峰,第一个单词应当是动词(而非名词) ,也不要使用下划线

    构造函数才能首字母大写,名称应当非动词开头

    常量(值不会被改变的变量)命名应当是全部大写,不同单词用下划线隔开

            const NUM = 1;
    

    对象的属性同变量的命名规则相同。对象的方法同函数的命名规则相同,如果属性或者方法是私有(不希望别人访司) ,应当在之前加一个下划

    10、严格模式

    严格模式应当仅限在函数内部使用,千万不要在全局使用。

    11、赋值

    当给变量赋值时,如果右侧时含有比较语句的表达式,需要使用圆括号包裹

           let a = 2;
           let b = 2;
           let num = (a > b) ? a : b;
    

    12、等号运算符

    使用 === (严格等于)和 ! == (严格不相等)代替 == (相等)和 != (不等)来避免弱类型转换错误。

    13、三元运算符

    三元运算符应当仅仅用在条件赋值语句中,而不要作为 if 的替代品。

           let num = (a > b) ? a : b;
    

    14、语句

    14.1 简单语句

    每行最多只包含一条语句。所有简单的语句都应该以分号结束

    14.2 返回语句

    返回语句当返回一个值的时候不应当使用圆括号包裹,除非在某些情况下这么做可以让返回值更容易理解,

    14.3 复合语句

    复合语句时大括号括起来得语句列表。

    • 括起来的语句应当较符合语句多缩进一个层级

    • 开始的大括号应当在符合语句所在行的末尾;结束的大括号应当独占一行且同复合语句的开始保持一样的缩进

    • 当语句是控制结构的一部分时,诸如 if 或者 for 语句,所有的语句都需要用大括号括起来,也包括单个语句。这个约定是让我们更加方便地添加语句而不用担心忘记加括号而引起 bug

    • if 一样的语句的开始的关键词,其后应该紧跟一个空格,起始大括号应当在空格之后

    14.3.1 if语句

    if 语句应当是下面的格式

           if (判断条件) {
                // 输出
           } else {
                // 输出
           }
    
    14.3.2 for 语句

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

    14.3.3 while 语句
    14.3.4 switch 语句

    如果一个 switch 不包含 default 的情况,应当用注释代替

            switch (key) {
                case value:
                    // code
                    break;
            
                case value:
                    // code
                    break;
            
               // 没有default
            }
    

    15、留白

    在逻辑相关的代码块之间添加空行可以提高代码的可读性。

    两行空行双限在如下情况中使用

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

    单行空行仅限在如下情况中使用

    • 方法之间

    • 方法中局部变量和第一行语句中间

    • 多行或者单行注释之前

    • 方法中逻辑代码块之间以提升代码的可读性

    空格应当在如下情况中使用

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

    16、需要避免的

    • 切勿使用像 String 一类的原始包装类型创建新的对象。
    • 避免使用eval()
    • 避免使用 with 语句(其实该语句已经被废除了,所以老夫就不教你们了)

    写在最后:风格这种东西,有很多,就拿缩进来说:

    • jQuery 核心风格指南明确规定使用制表符缩进
    • Daiglas CrockfordJavaScript 代码规范规定使用 4 个空格字符缩进
    • SproutCore 风格指南规定使用2个空格缩进
    • GoogleJavascript 风格指南规定使用 2 个空格缩进
    • Dojo 编程风格指南规定使用制表符缩进

    所以啊,风格很多,大概的了解一下,一切以你所在的团队风格为准。

    相关文章

      网友评论

          本文标题:JavaScript 代码规范

          本文链接:https://www.haomeiwen.com/subject/zxlkmqtx.html