ES6-21：编程风格、ECMAScript规格

良好的代码编程习惯是一个优秀的软件工程师的必备素养，也是一个团队开发易于阅读、高可维护性的大型项目的基础；虽然Javascript弱语言的本质给前端开发者带来了更大的灵活性，但从工程的角度来说这是非常不合理的，也是一个可维护性项目潜在的致命缺陷。为了避免出现‘‘连自己以前写过的代码都不忍睹视’’以及‘‘一个团队成员休假或离职，造成整个项目瘫痪’’的尴尬局面，对于一个大型项目而言，项目的代码风格，和项目的代码具有同等重要的地位。

1、良好的ES6新语法代码风格

• 1》块级作用域：
  • let取代var：提高js变量先声名、后定义的规范性(var存在变量提升，而let命令会因为暂时性死区报错，没有变量提升效果)；
  • const优先于let：①提醒代码阅读人该变量不应该修改；②被无意中修改时报错；(let、const的本质区别是编译器内部处理不同；Javascript编译器会对const进行优化，提升程序运行效率)；
• 2》字符串：
  • 静态字符串使用单引号''或者反引号,不适用双引号
  • 动态字符串使用反引号+变量表达式;
• 3》解构赋值
  • 数组成员变量：使用数组成员变量时，优先使用解构赋值，如：const arr=[1,2,3,4];const [first,second]=arr;;
  • 函数的对象参数：使用解构赋值，如：const person={name:'lili',age:12}; function sayHi({name,age}){ ...}; ;
• 4》对象
  • 对象尽量静态化：对象一旦定义就不得随意添加新的属性；
  • 对象动态属性采用属性表达式;
  • 对象的属性采用简洁表达式；
  • 单行定义的对象，最后一个属性后不以逗号结尾；
  • 多行定义的对象，最后一个属性以逗号结尾；

       // ① 动态属性表达式
           const obj={id:2,
                           name:'San FranciSco',
                           [getKey('eabled')]:true
           }
       // ②简洁表达式
       let ref='it is  a string'; 
       const atom={ref,
                           value:1,
                           addValue(value){
                               return atom.value+value
                           };
       // ③单行定义对象
       let obj={k1:k1,k2:k2:k3:k3};
       // ④多行定义对象
       let obj2={
           k1:'k1',
           k2:'k2',
           k3:'k3',
       }
     ```
    

• 5》数组
  • 复制数组：使用扩展运算符...;
  • 类数组转换成数组：使用Array.from();

        // 复制：数组==>数组
        let itemsCopy=[...Array1];
        // 转换：类数组==>数组
        let foo=document.querySelectorAll('.foo');
        let nodes=Array.from(foo);
    

• 6》函数：
  • 采用箭头函数：①箭头函数更简洁；②箭头函数默认绑定this,可取代Function.prototype.bind功能；
  • 使用默认值语法设置函数默认值;
  • 函数参数所有配置项集中在最后一个对象,布尔值不可直接作为参数；
  • 使用rest运算符...替换arguments变量；

        // ①箭头函数取代 function.prototype.bind
        let boundMethod=(...prams)=>method.apply(this,params);
        // ②布尔参数：不能直接作为默认参数、可放在最后一个对象
        function (a,b,{option:false}={}){//....}
    

• 7》Map结构：区分Object和Map
  • 模拟实体对象使用Object；
  • 只需要key:value的数据结构使用Map：Map內建有便利机制；
• 8》Calss类
  • 采用类Class取代需要propertype的操作：class的语法更简洁；
  • 采用extends实现继承：extend语法更简洁，且不存在破坏instance运算的危险；

        // ① 采用 Class取代property操作
            // 使用原型方法propertype
         function Queue(arr=[]){
            this._queue=[...arr];
        }
        Queue.propertype.pop=function(){
            let item=this._queue[0];
            this._queue.splice(0,1);
            return item;
        }
        //使用类 class实现
        class Queue{
            constructor(arr=[]){
                this._queue=[...arr];
            }
            pop(){
                let item=this._queue[0];
                this._queue.splice(0,1);
                return item;
            }
        }
       // ②使用extends实现继承
        // 采用instance算法
        function PeekableQueue(contents){
            Queue.apply(this,contents);
        }
        inherits(PeekableQueue,Queue);
        PeekableQueue.prototype.peek=function(){
            return this._queue[0];
        }
        // 采用extends语法实现继承
        class PeekableQueue extends Queue{
            peek(){
                return this._queue[0];
            }
        }
    

• 9》模块

  • 使用import语法替代require语法：Module语法是JavaScript模块的标准语法；

  • 使用export语法取代nodule.exports语法：module.exports是CommonJs语法；

  • 模块输出的函数，函数名采用驼峰命名法；

  • 模块输出的对象，对象名首字母大写；

  • 单个输出值采用export default语法；

  • 多个输出值采用 export {obj1,obj2}：不可同时使用多个export default、不可用export default与普通export共用；

    // ①一个模块输出多个模块
    import { fn1,fn2} from 'ModuleA';
    // ② export取代module.exports语法
     let Person={};
      module.exports=Person; // CommonJS语法 
      export default Person;   // JavaScript语法
    // ③输出函数
    function makeStyleGuide(){};
    export default makeStleGuide;
    // ④输出类、对象
    let StyleGuid={es6:{test:'',include:''}};
    export default StyleGuid;
    

2.常用代码检测工具

• JSlint：一个JavaScript代码检验工具，非开源;
• Eslint：一个可组装的JavaScript和JSX检验工具，官网
• Tslint：一个TypeSctip代码检测工具，官网

PS：各大公司风格规范链接jscs.info