良好的编程规范是打造优秀代码的基础,以下是fidding个人编码规范整理,使用ECMAScript 6.0(ES6)标准,并借鉴了许多文章与书籍的优秀编码习惯,本人也将持续更新与改进。

变量与常量

  1. 使用const定义常量

    // bad
    var foo = 1;
    // good
    const foo = 1;
  2. 使用let替代var
    // bad
    var foo = 1;
    // good
    let foo = 1;

对象Object

  1. 使用{}直接创建对象

    // bad
    const object = new Object();
    // good
    const object = {};
  2. 键名移除多余的''""符号
    // bad
    const bad = {
        'foo': 3,
        'bar': 4,
        'data-blah': 5
    };
    // good
    const good = {
        foo: 3,
        bar: 4,
        'data-blah': 5
    };

数组Array

  1. 使用[]直接创建数组

    // bad
    const array = new Array();
    // good
    const array = [];
  2. 使用push添加数组项

    const array = [];
    // bad
    array[array.length] = 'abc';
    // good
    array.push('abc');
  3. 使用数组展开符...拷贝数组
    // bad
    const len = array.length;
    const arrayCopy = [];
    let i;
    for (i = 0; i < len; i++) {
        arrayCopy[i] = array[i];
    }
    // good
    const arrayCopy = [...array];

字符串String

  1. 使用单引号替代双引号''

    // bad
    const string = "Hong. Jiahuang";
    // good
    const string = 'Hong. Jiahuang';
  2. 尽可能使用模版代替字符串串联拼接

    // bad
    function sayHi(name) {
        return 'How are you, ' + name + '?';
    }
    // bad
    function sayHi(name) {
        return ['How are you, ', name, '?'].join();
    }
    // bad
    function sayHi(name) {
        return `How are you, ${ name }?`;
    }
    // good
    function sayHi(name) {
        return `How are you, ${name}?`;
    }
  3. 拒绝使用eval()来解析字符串,会造成很多安全问题。

函数Function

  1. 当需要立即调用函数时,使用以下写法

    (function () {
        console.log('Welcome to the Internet. Please follow me.');
    }());
  2. 拒绝在if,while等逻辑块中直接声明函数

    // bad
    if (currentUser) {
        function test() {
            console.log('fidding.');
        }
    }
    // good
    let test;
    if (currentUser) {
        test = () => {
            console.log('fidding.');
        };
    }
  3. 函数定义风格

    // bad
    const f = function(){};
    const g = function (){};
    const h = function() {};
    // good
    const x = function () {};
    const y = function a() {};
  4. 时刻进行参数检查,避免参数冲突

    // bad
    function f1(obj) {
        obj.key = 1;
    };
    // good
    function f2(obj) {
        const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
    };
  5. 参数分配,检测参数是否存在
    // bad
    function f1(a) {
        a = 1;
    }
    function f2(a) {
        if (!a) { a = 1; }
    }
    // good
    function f3(a) {
        const b = a || 1;
    }
    function f4(a = 1) {
    }

比较操作

  1. 尽量使用===!==代替==!=

  2. 避免冗赘

    // bad
    if (name !== '') {
    }
    // good
    if (name) {
    }
    // bad
    if (array.length > 0) {
    }
    // good
    if (array.length) {
    }
  3. 尽量避免三重嵌套(分开写)并且嵌套不应该分行

    // bad
    const foo = maybe1 > maybe2
        ? "bar"
        : value1 > value2 ? "baz" : null;
    // better
    const maybeNull = value1 > value2 ? 'baz' : null;
    const foo = maybe1 > maybe2
        ? 'bar'
        : maybeNull;
    // best
    const maybeNull = value1 > value2 ? 'baz' : null;
    const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
  4. 避免多余的三元运算符
    // bad
    const foo = a ? a : b;
    const bar = c ? true : false;
    const baz = c ? false : true;
    // good
    const foo = a || b;
    const bar = !!c;
    const baz = !c;

注释

  1. 使用/** ... */多行注释并包含描述以及指定所有参数和返回值的类型

    // bad
    // make() returns a new element
    // based on the passed in tag name
    //
    // @param {String} tag
    // @return {Element} element
    function make(tag) {
    return element;
    }
    // good
    /**
    * make() returns a new element
    * based on the passed in tag name
    *
    * @param {String} tag
    * @return {Element} element
    */
    function make(tag) {
        return element;
    }
  2. 使用//单行注释,注释符//后添加一个空格并单独一行,如果注释不是位于第一行的话需要在注释前再空出一行

    // bad
    const active = true;  // is current tab
    // good
    // is current tab
    const active = true;
    // bad
    function getType() {
        console.log('fetching type...');
        // set the default type to 'no type'
        const type = this._type || 'no type';
    
        return type;
    }
    // good
    function getType() {
        console.log('fetching type...');
    
        // set the default type to 'no type'
        const type = this._type || 'no type';
    
        return type;
    }
    // also good
    function getType() {
        // set the default type to 'no type'
        const type = this._type || 'no type';
    
        return type;
    }
  3. 使用// FIXME:注释问题

    class Calculator extends Abacus {
        constructor() {
            super();
    
    // FIXME: shouldn't use a global here
            total = 0;
        }
    }
  4. 使用// TODO:注释待做

    class Calculator extends Abacus {
        constructor() {
            super();
    
        // TODO: total should be configurable by an options param
            this.total = 0;
        }
    }

空格

  1. 使用4空格间隔(fidding个人喜好)

    // bad
    function foo() {
    ∙const name;
    }
    // bad
    function bar() {
    ∙∙const name;
    }
    // good
    function baz() {
    ∙∙∙∙const name;
    }
  2. ) , :前添加一个空格间隔

    // bad
    function test(){
        console.log('test');
    }
    // good
    function test() {
        console.log('test');
    }
    // bad
    dog.set('attr',{
        age: '1 year',
        breed: 'Bernese Mountain Dog'
    });
    // good
    dog.set('attr', {
        age: '1 year',
        breed: 'Bernese Mountain Dog'
    });
  3. if while等控制语句前以及大括号前添加一个空格间隔,函数声明的参数列表和函数名称之间没有空格

    // bad
    if(isJedi) {
        fight ();
    }
    // good
    if (isJedi) {
        fight();
    }
    // bad
    function fight () {
        console.log ('Swooosh!');
    }
    // good
    function fight() {
        console.log('Swooosh!');
    }
  4. 在运算符前添加空格

    // bad
    const x=y+5;
    // good
    const x = y + 5;
  5. 块和在下一个语句之前,留下一个空白行

    // bad
    const obj = {
        foo() {
        },
        bar() {
        }
    };
    // good
    const obj = {
        foo() {
        },
    
        bar() {
        }
    };
    // bad
    const arr = [
        function foo() {
        },
        function bar() {
        }
    ];
    // good
    const arr = [
        function foo() {
        },
    
        function bar() {
        }
    ];

逗号,

  1. 对象或数组结束行不附加,(个人习惯,兼容emacs js2-mode)
    // bad
    const hero = {
        firstName: 'Dana',
        lastName: 'Scully',
    };
    const heroes = [
        'Batman',
        'Superman',
    ];
    // good
    const hero = {
        firstName: 'Dana',
        lastName: 'Scully'
    };
    const heroes = [
        'Batman',
        'Superman'
    ];

jQuery

  1. 使用$来命名jQuery对象
    // bad
    const sidebar = $('.sidebar');
    // good
    const $sidebar = $('.sidebar');
    // good
    const $sidebarBtn = $('.sidebar-btn');

相关链接

  1. ECMAScript 6

  2. AirBnb JS编码规范

happy coding!