JavaScript -- 代码规范

  1. 使用制表符进行缩进,推荐使用 4 个空格字符作为一个缩进层级。

  2. 建议每条语句以分号结尾,虽然 JavaScript 有自动分号插入(ASI) 机制,但是它的插入规则非常复杂难以记住,所以不推荐省略分号。

  3. 为了代码的可读性,建议将一行代码的长度保持在 80 字符以内。

  4. 当代码达到了单行最大字符限制时,需要将代码手动拆成两行,通常在元算符换行的时候,下一行最好增加两个层级的缩进。

     callFunction(elementOne, elementTwo, elementThree, elementFour,
             elementFive);
    

而且最好将一个运算符放置到行尾,这样的话,ASI 就不会自作主张的在行尾添加分号,也就避免了错误的发生。当然如果是在给变量赋值的时候换行,那么第二行的位置应当和赋值运算符的位置保持对齐。

        var result = elementOne + elementTwo + elementThree +
                     elementFive;
  1. 合理的使用空行将让你的代码更加易于阅读。在以下场景中添加空行是非常不错的主意。
    • 在方法之间
    • 在方法中的局部变量和第一条语句之间
    • 在单行或多行注释之前
    • 在方法的逻辑片段之间

下面是以上原则的实践。
if (true) {

            for (var i = 0; i < Things.length; i++) {
                var p = 1,
                    q = 2;

                if (true) {
                    
                }
            }
        }
  1. 命名是一门艺术,更是一门技术,通常来讲命名长度应当尽可能的短,并且抓住要点。为变量命名时,其前缀应该是名词。为函数命名时前缀应当是动词,比如 can, has, is, set, get 等。对于常量的命名,最好使用大写字母和下划线的组和来命名,比如说 MAX_LENGTH

  2. null 是一个特殊值,但是千万不要和 undefined 搞混,在下列场景中应当使用 null

    • 用来初始化一个变量,这个变量可能赋值为一个对象。
      var person = null;

    • 用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
      var person = getPerson();

        if (person !== null) {  
            doSomething();
        }
      
    • 当函数的参数期望是对象时,用作参数传入。
      function printPerson(person) {
      if (person !== null) {

                // print person
            }
        }
      
        printPerson(null);
      
    • 当函数的返回值期望是对象时,用作返回值传出。
      function getPerson() {
      if (condition) {
      return new Person("Hwaphon");
      } else {
      return null;
      }
      }

  3. 我们通常将 undefinednull 搞混, 那是因为 undefined == null 的结果是 true, 然而这二者的用途却各有不同。那些没有被初始化的变量都有一个初始值,即 defined, 表示这个变量等待被赋值。有一点值得注意的是,用 typeof 去检测变量,如果这个变量声明了没有初始化会返回 undefined, 二如果这个变量根本就没声明也会返回 undefined
    var person;

         console.log(typeof person); // undefined
         console.log(typeof animal); // undefined 
    
  4. JavaScrtipt 支持两种不同类型的注释,单行注释和多行注释。关于单行注释,有三种使用方式。

    • 独占一行的注释,用来解释下一行代码。这行注释之前总是有一个空行,且缩进层级和下一行代码保持一致。
      if (condition) {

           // This is a single line comment
           doSomething();
       }
      
    • 在代码行的尾部进行注释。 代码结束到注释之间至少有一个缩进。注释(包括之前的代码部分)不应该超过但行的最大字符数( 80 ) 限制,如果超过了,就将这条注释放置于当前代码行的上方。
      if (condition) {
      doSomething(); // This is a single line comment
      }

    • 被注释掉的是一大段代码。
      // if (condition) {
      // doSomething();
      // }

关于多行注释,,是通过 /* */ 来实现的,不过最好还是使用下面这样的风格实现多行注释。
/*
* First line
* Second line
* Third line
*/
至于什么时候使用注释,有一条指导原则,当代码不够清晰时添加注释,而当代码很明了时不应当添加注释。在以下情况会最好添加注释。

  • 难于理解的代码
  • 可能被误认为错误的代码
  • 浏览器特性 hack
  1. 使用 if 或者 for 语句时,不论块语句包含多行代码还是单行代码,都应当使用花括号。

  2. switch 语句中, 尽量不要使用 case 语句的连续执行,如果非要使用的话,最好添加注释。至于 default, 即使其什么都不做,最好也不腰省略,比如下面这样。
    switch(condition) {
    case "first":
    break;

            case "second":
                break;
    
            default:
                // no logic here
        }
    
  3. 尽量不要使用 continue, 用 if 语句替代 continue 的功能。

  4. for-in 循环是用来遍历对象属性的,可是存在一个问题,它不仅遍历对象的实例属性,同样还遍历从原型继承来的属性。 所以最好使用 hasOwnProperty() 方法来为 for-in 循环过滤出实例属性。

  5. 推荐在函数顶部使用单 var 语句声明接下来可能会使用到的变量,而且没有初始值的变量应该出现在 var 语句的尾部。

  6. 推荐先声明函数再使用函数。

  7. 不推荐使用全局的严格模式,推荐使用局部的严格模式。

  8. CSSJavaScript 中分离,当需要通过 JavaScript 来修改元素样式的时候,最佳的方法是操作 CSSclassName
    // original style
    element.className += " className";

        // HTML5 style
        element.classList.add("className");
    
  9. JavaScriptHTML 中抽离。可以自己创造一个 addListener() 函数添加行为,而不是在 HTML 结构中使用 onclick 之类的内嵌 JavaScript 代码。
    function addListener(target, type, handler) {
    if (target.addEventListener) {
    target.addEventListener(type, handler, false);
    } else if(target.attachEvent) {
    target.attachEvent("on" + type, handler);
    } else {
    target["on" + type] = handler;
    }
    }

  10. typeof 检测原始值, 用 instanceof 检测引用值。 在使用这两个运算符的时候不要加括号,那样会让它们看起来像函数。检测函数最好使用 typeof,下面是检测数组的一种方法。
    function isArray(value) {
    if (typeof Array.isArray === "function") {
    return Array.isArray(value);
    } else {
    return Object.prototype.toString.call(value) === "[object Array]";
    }
    }

  11. 对于一个对象,如果你想检测某个属性是否存在,有以下两种方式。
    var person = {
    name: "hwaphon",
    age: 21
    };

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

推荐阅读更多精彩内容