良好的JS編碼習慣與風格

fxm547發表於2018-01-22
JS

首發於fxm5547的部落格

格式

每句js後無需加; 賦值=號前後加空格 示例:

const RECEIVE_ZEN = 'RECEIVE_ZEN'
const REQUEST_ZEN = 'REQUEST_ZEN'
const CLEAR_ZEN = 'CLEAR_ZEN'
複製程式碼

使用Babel來寫ES6/7程式碼

ES6/7新增了很多新特性，讓我們可以更好的來編寫javascript 使用Babel我們可以編寫ES6/7最終編譯成ES5，保證不存在相容性問題

儘可能減少使用jQuery

jQuery已經慢慢淡出我們的視線了 youmightnotneedjquery You-Dont-Need-jQuery

使用函數語言程式設計吧

JS函數語言程式設計指南 Javascript函數語言程式設計風格

使用ES6的模組機制

引入 import foo from 'module' 匯出

const foo = {
  ...
}
export default foo
複製程式碼

defer與async

<script src="script.js"></script> 沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，“立即”指的是在渲染該 script 標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行。

<script async src="script.js"></script> 有 async，載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行（非同步）。

<script defer src="script.js"></script> 有 defer，載入後續文件元素的過程將和 script.js 的載入並行進行（非同步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。

它倆的差別在於指令碼下載完之後何時執行，顯然 defer 是最接近我們對於應用指令碼載入和執行的要求的

關於 defer，關鍵一點在於它是按照載入順序執行指令碼的，這一點要善加利用

async 則是一個亂序執行的主，反正對它來說指令碼的載入和執行是緊緊挨著的，所以不管你宣告的順序如何，只要它載入完了就會立刻執行

仔細想想，async 對於應用指令碼的用處不大，因為它完全不考慮依賴（哪怕是最低階的順序執行），不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的，最典型的例子：Google Analytics

所以我們工作中大多數載入script的地方都可以用defer取代

相關文章