JavaScript编码规范

作者: 恍若如梦hzpeng | 来源:发表于2019-06-14 20:23 被阅读0次

    一个人的一生应该是这样度过的:当他回首往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞耻;这样,在临死的时候,他就能够说:“我的整个生命和全部精力都已经献给世界上最壮丽的事业——为人类的解放而斗争。” ——《钢铁是怎样炼成的》

    作为一名程序开发人员,我觉得规范和良好的编码习惯有非常有必要的。每次看到不规范的编码,总是忍不住想动手改过来。所以就想着写一篇js编码规范的文章,一来方便自己不断总结,二是希望有不足的地方能被指正。

    • 变量名

    变量名使用驼峰法(camelCase)命名

    var firstName = 'Tom';  // 推荐
    var firstname = 'Tom';  // 不推荐
    var Firstname = 'Tom';  // 不推荐
    

    尽量用let取代var,如果可以用const代替let
    const用来定义常量
    命名语义化,变量是名词,函数是动词

    let username = 'Jack';  // 推荐
    let sayHello = 'hello';  // 不推荐
    
    function username() {          // 不推荐
        alert('my name is Jack');
    }
    function sayHello() {          // 推荐
        alert('hello world');
    }
    
    • 空格与运算符

    运算符前后留一个空格

    let x = a + b;  // 推荐
    for (let i = 0; i <= 10; i++) {    // 推荐
        console.log(i);
    }
    for (let i=0;i<=10;i++) {    // 不推荐
        console.log(i);
    }
    let y=c+d;  // 不推荐
    
    • 语句规则
      一条语句通常以分号作为结束符
    let list = ['a', 'b', 'c'];
    const Person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };
    

    复杂语句规则:

    • 将左花括号放在第一行的结尾。
    • 左花括号前添加一空格。
    • 将右花括号独立放在一行。
    • 不要以分号结束一个复杂的声明。
    // 函数
    function toCelsius(fahrenheit) {
        return (5 / 9) * (fahrenheit - 32);
    }
    
    // 循环
    for (i = 0; i < 5; i++) {
        x += i;
    }
    
    // 条件语句
    if (time < 20) {
        greeting = "Good day";
    } else {
        greeting = "Good evening";
    }
    
    • 判断
      尽量使用精确判断
    name === 'Tom'    // 推荐
    code !== '200'    // 推荐
    name == 'Tom'    // 不推荐
    code != '200'    // 不推荐
    
    • 字符串
      静态字符串使用反引号或单引号,不使用双引号。动态字符串使用反引号
    // bad
    const a = "foobar";
    const b = 'foo' + a + 'bar';
    
    // acceptable
    const c = `foobar`;
    
    // good
    const a = 'foobar';
    const b = `foo${a}bar`;
    
    • 使用箭头函数

    对一些简单的函数使用箭头函数替代

    setTimeout(() => {
        alert('hello');
    }, 1000)
    

    使用箭头函数绑定this

    const _this = this;
    const sayHello = function() {
        return _this.a;
    }
    
    // 使用箭头函数替代
    const sayHello = () => ( this.a )
    
    • 构造函数和类名首字母大写
    function Person() {
        ...
    }
    
    class Person() {
      ...
    }
    

    尽量使用class

    更多关于ES6的编程风格:http://es6.ruanyifeng.com/#docs/style
    菜鸟教程Javascript编码规范:https://www.runoob.com/w3cnote/javascript-coding-standard.html

    相关文章

      网友评论

        本文标题:JavaScript编码规范

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