切圖崽的自我修養－[ES6] 編程風格規範

前言

沒有規矩 不成方圓

---

1. 用let替換var來定義變量. 若是是常量，使用const

2. 靜態字符串統一用單引號'' , 動態拼接成的字符串統一用反引號``

   let staticString = 'This is a static string';
   
   let d = 'dynamic';
   let dynamicString = `This is a ${d} string`;

3. 使用數組成員對變量賦值時，儘可能用解構賦值

   let arr = [1,2,3,4];
   let [arr1,arr2] = arr;
    
   //arr1 =1,  arr2 = 2;

4. 往對象裏添加/修改屬性時，使用Object.assign，而不用鬆散的.語法

   const objectA = {};
   Object.assign(objectA, { attr1: 3 });
   
   //objectA{attr1:3}

5. 面向對象的寫法一概寫成class的形式，摒棄原生的prototype的書寫方法

   class A{
       constructor(){}
       prototypeFunA(){}
       static staticFunA(){}
       ...
   }

6. 用extends實現單繼承， 摒棄原生的prototype鏈書寫方法的繼承

   class A{
       constructor(){}
       prototypeFunA(){}
       static staticFunA(){}
       ...
   }
   
   class B extends A{
       constructor(){
           super();
       }
   }
   
   let b = new B();     
   b.prototypeFunA();
   B.staticFunA();

7. 用mixin修飾器的方式能夠多繼承(es5中能夠用call來實現多繼承，不過call/apply方法都屬於奇技淫巧，不推薦使用了)，實際上在js中多繼承的應用場景並很少見

8. 模塊的書寫, 相似CommonJs規範. 暴露方法/屬性統一用export

   //moduleA.js
   
   export let name = 'Xie Min'; 
   export function fun1(){xxx}
   export function fun1(){xxx}
   
   //或者這樣寫        
   //moduleA.js
   
    let name = 'Xie Min'; 
    function fun1(){xxx}
    function fun1(){xxx}
    
    export{
        name,
        fun1,
        fun2,
    }

1. 引用模塊統一用import，摒棄掉require . 這裏特別注意，import模塊的時候路徑必須寫成相對路徑的形式, 好比要寫成 import {xx} from './moduleA' 而不是 import {xx} from 'moduleA'

   //index.js
   
   import * as moduleA from './moduleA';
   
   moduleA.name;    
   moduleA.fun1();                        
   moduleA.fun2();

---

結語

部分參考自 阮一峯《ECMAScript 6入門》 其餘細節待補充