JavaScript 代码规范

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 编程风格指南规定使用制表符缩进

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容