ES6-21：編程風格、ECMAScript規格

良好的代碼編程習慣是一個優秀的軟件工程師的必備素養，也是一個團隊開發易於閱讀、高可維護性的大型項目的基礎；雖然Javascript弱語言的本質給前端開發者帶來了更大的靈活性，但從工程的角度來講這是很是不合理的，也是一個可維護性項目潛在的致命缺陷。爲了不出現‘‘連本身之前寫過的代碼都不忍睹視’’以及‘‘一個團隊成員休假或離職，形成整個項目癱瘓’’的尷尬局面，對於一個大型項目而言，項目的代碼風格，和項目的代碼具備同等重要的地位。

一、良好的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