前端 JAVASCRIPT规范

目录

1.前言

制定良好的统一的JavaScript代码规范,提高代码质量和团队合作的效率。

2. 注释

  • As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性。
  • As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。
  • 函数/方法注释
    (1).函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识;
    (2).参数和返回值注释必须包含类型信息和说明;
    (3).当函数是内部函数,外部不可访问时,可以使用 @inner 标识;
    /**
     * 函数描述
     *
     * @param {string} p1 参数1的说明
     * @param {string} p2 参数2的说明,比较长
     * 那就换行了.
     * @param {number=} p3 参数3的说明(可选)
     * @return {Object} 返回值描述
     **/
    function foo(p1, p2, p3) {
        var p3 = p3 || 10;
        return {
            p1: p1,
            p2: p2,
            p3: p3
        };
    }

3.缩进

缩进使用4个空格(四个空格在所有编辑器上显示缩进一致)

4.分号

4.1 在语句(Statement)的结尾加分号

    // bad
    (function() {
      var name = 'Skywalker'
      return name
    })()

    // good
    (function() {
      var name = 'Skywalker';
      return name;
    })();

4.2 这几种情况后需加分号:变量声明 表达式 return throw break continue do-while。

    /* 示例 */
    /* var declaration */
    var x = 1;

    /* expression statement */
    x++;

    /* do-while */
    do {
        x++;
    } while (x < 10);

5.逗号

行首不要出现逗号。

    // bad
    var demo = [
        app
      , icon
      , alive
    ];

    // good
    var demo = [
      app,
      icon,
      alive
    ];

6.引号

最外层统一使用单引号。

    // not good
    var x = "test";

    // good
    var y = 'foo',
    z = '<div id="test"></div>';

7.变量

7.1变量命名

  • 标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
    //示例
    var thisIsMyName;
  • 'ID'在变量名中全大写
    //示例
    var thisID;
  • 'URL'在变量名中全大写
    //示例
    var reportURL;
  • 'Android'在变量名中大写第一个字母
    //示例
    var AndroidVersion;
  • 'iOS'在变量名中小写第一个,大写后两个字母
    //示例
    var iOSVersion;
  • 常量全大写,用下划线连接
    //示例
    var MAX_COUNT = 10;
  • jquery对象必须以'$'开头命名
    //not good
    var body = $('body');
    // good
    var $body=$('body');

7.2 变量声明

var 语句

  • 使用变量之前必须先定义,不要定义全局变量。
    //bad
    count = 10; //严格模式中报错
    console.log(global.count); //10

    //good
    var count = 10;
  • 使用 var 声明每一个变量。
    这样做的好处是增加新变量将变的更加容易,而且你永远不用再担心调换错分号跟逗号。
    // not good
    var uname,
        uid,
        upwd;
    //good  
    var uname;
    var uid='';
    var upwd='';

8.对象

  • 使用字面值创建对象
    // bad
    var test = new Object();

    // good
    var test = {};
    // bad
    var superman = {
      class: 'superhero',
      default: { clark: 'kent' },
      private: true
    };

    // good
    var superman = {
      klass: 'superhero',
      defaults: { clark: 'kent' },
      hidden: true
    };

9.数组

  • 使用字面值创建数组
    // bad
    var items = new Array();

    // good
    var items = [];
  • 向数组增加元素时使用 Array#push 来替代直接赋值。
    var arrayList = [];
    // bad
    arrayList[arrayList.length] = '111111';

    // good
    arrayList.push('1111111');
  • 当你需要拷贝数组时,使用 Array#slice。参见jsperf
    var len = items.length;
    var itemsCopy = [];
    var i;

    // bad
    for (i = 0; i < len; i++) {
      itemsCopy[i] = items[i];
    }

    // good
    itemsCopy = items.slice();

10.字符串

  • 使用单引号 '' 包裹字符串。
    // bad
    var test = "sakjas";

    // good
    var test = 'adas dasdas';
  • 超过 100 个字符的字符串应该使用连接符写成多行。 但是,如果过度使用,通过连接符连接的长字符串可能会影响性能。jsPerf & 讨论.
    // bad
    var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

    // bad
    var errorMessage = 'This is a super long error that was thrown because \
    of Batman. When you stop to think about how Batman had anything to do \
    with this, you would get nowhere \
    fast.';

    // good
    var errorMessage = 'This is a super long error that was thrown because ' +
      'of Batman. When you stop to think about how Batman had anything to do ' +
      'with this, you would get nowhere fast.';

11.比较运算符 和 等号

  • 优先使用 === 和 !== 而不是 == 和 !=. 使用 === 可以避免等于判断中隐式的类型转换。
    // bad
    if (number == 10) {
        // ......
    }

    // good
    if (number === 10) {
        // ......
    }  
  • 条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则: 1.对象 被计算为 true 2.Undefined 被计算为 false 3.Null 被计算为 false 4.布尔值 被计算为 布尔的值 5.数字 如果是 +0、-0 或 NaN 被计算为 false,否则为 true 6.字符串 如果是空字符串 '' 被计算为 false,否则为 true

  • 尽量使用简介的表达方式.

    // bad  
    if (name !== '') {  
      // 字符串是否为空
    }

    // good  
    if (name) {  
      // 字符串是否为空
    }

    // bad  
    if (collection.length > 0) {  
      // 数组是否为空  
    }

    // good  
    if (collection.length) {  
      // 数组是否为空  
    }  

了解更多信息在 Truth Equality and JavaScript by Angus Croll.

12.类型转换

  • 字符串:
    //  => this.num = 2;  

    // bad  
    var total = this.num + '';  

    // good  
    var total = '' + this.num;  

    // bad  
    var total = '' + this.num + ' total score';  

    // good  
    var total = this.num + ' total score';    
  • 使用 parseInt 转换数字时总是带上类型转换的基数。
    var inputValue = '4';  

    // bad  
    var val = new Number(inputValue);  

    // bad  
    var val = +inputValue;  
    // bad  
    var val = parseInt(inputValue);  

    // good  
    var val = Number(inputValue);  

    // good 
    var val = parseInt(inputValue, 10);  
  • 转换成布尔类型:
    var page = 0;  

    // bad  
    var tpage = new Boolean(page);

    // good
    var tpage = Boolean(page);  

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

推荐阅读更多精彩内容