JavaScript專業規則12條

時間 2019-11-22

原文原文鏈接

　　學習JavaScript是困難的。它發展的如此之快，以致於在任何一個特定的時刻，你都不清楚本身是否「作錯了」。有些時候，感受像是壞的部分超過了好的部分。然而，討論這些並無意義，JavaScript正在征服世界，因此，咱們也只能這麼作了。javascript

下面是個人一些建議：java

一、JS應該放到 .js 文件中

　　「額，只有那麼幾行而已…」，是的，個人意思是全部的 JS 都應該放在 .js 文件中。爲何呢？由於這有助於可讀性，節省帶寬。行內 JavaScript 在每次頁面加載時都會從新下載，相反的，單獨的 .js 文件則會被緩存起來。正如你所看到的，這個規則有助於支持以下一長串的其餘規則。這就是爲何它的規則# 1。react

二、JS 應該是靜態的

　　我看到過不少程序員喜歡動態的使用JavaScript。他們喜歡像使用服務器端語言如C#, Ruby, Java那樣來動態的使用JavaScript。千萬不要這麼作。你失去了代碼着色、語法高亮顯示和智能感知的支持。記住，JavaScript 應該屬於一個 .js 文件(見規則 #1)。程序員

　　然而，使用JSON引入動態行爲。我把這稱爲JavaScript配置對象模式。具體方法以下：把JSON注入到你應用程序的頭部，並根據業務邏輯的須要利用這些數據。你可能會想：「嘿，這違背了規則 #1」。我把 JSON 看做是數據，而不是代碼，因此我破例，爲了支持靜態的、單獨的JavaScript文件。web

StackOverflow 使用的這種模式，Google 也是。你能夠看下他們的代碼：npm

　　正如你看到的，StackOverflow 注入了一些我的的設置，如 isNoticesTabEnabled。這個簡單的JSON代碼片斷爲你使用靜態JavaScript文件自定義行爲提供了必要的數據支持。爲了實現這一點，須要序列號服務器端類爲JSON，而後放置在 <head> 中。而後你能夠在靜態的JavaScript文件中根據須要參考這個數據結構，可以使用它，是由於它被注入到 <head> 中。gulp

三、JS 應該被壓縮

　　壓縮能夠減少文件體積，從而提高頁面加載速度。記住，性能也是一項功能。由於，爲了壓縮，你須要把 JS 放到一個單獨的文件中(見規則 #1)。壓縮JS曾經很麻煩，但如今徹底是簡單自動化的。有一打的方式能夠作到，而Gulp 和 gulp-uglify 是一種低摩擦和自動化的辦法。瀏覽器

四、JS 應該位於頁面底部

　　若是你把 <script> 標籤放在 <head> 中，它會阻礙頁面渲染。位於 <head> 中的腳本必須在頁面顯示前加載，所以把 <script> 放在底部的 </body> 前面能夠先顯示頁面，而不用等 JS 文件下載完畢。這有助於提高感知性能。若是你的JavaSctipe必須位於 <head> 中，能夠考慮使用 jQuery 的 $(document).ready 這樣你的腳本能夠等到 DOM 加載完畢後再執行。緩存

五、JS 應該實時的 Linted

　　Linting 遵循代碼風格、發現錯別字、有助於避免錯誤。有不少這樣的工具，我建議使用 ESLint。你可使用 Gulp 的 gulp-eslint 來運行它。Gulp 能夠查看你全部的 JS 文件，並在你每次保存的時候運行 linter。另外，你須要把你的 JS 代碼放在單獨的 .js 文件中才能運行 linter 。服務器

六、JS應該有自動化測試

　　在過去的幾年中，咱們知道了測試的重要性。但它在很大程度上忽略了在JavaScript，直到最近才被重視。如今典型的JavaScript應用須要測試的部分遠比你實際手動測試到的要多。使用JavaScript處理這麼多的邏輯，關鍵的是具備自動測試。

　　您能夠經過工具，如 Selenium 自動化集成測試。然而，集成測試每每是脆弱的，因此我建議專一於自動化單元測試。自動化單元測試有多種選擇。若是你是新手，我建議你使用Jasmine，而若是你想要終極配置，可使用Mocha with Chai。

七、JS 須要封裝

　　前些年咱們瞭解了全局變量的風險，值得慶幸的是，如今有不少的方法來封裝JS：

Immediately Invoked Function Expressions (aka IIFE)
Revealing Modules
AMD (typically via RequireJS)
CommonJS (used by Node.js, use in browser via Browserify or Webpack)
ES6 modules

　　ES6模塊是將來。好消息是，雖然在瀏覽器中還不能很好的支持，但你能夠用 Babel 來使用它。

　　若是你不想 transpile， CommonJS多是你最佳的選擇。因爲 Node 使用的 CommonJS 模式，因此你可使用npm 來下載數千個包。CommonJS 不能在瀏覽器中運行，因此你可能須要 Browserify，Webpack, or JSPM.

8. JS 依賴應當明確

　　這條規則與上述規則緊密相關。一旦你開始封裝JavaScript，您須要一個簡單的方法來引用其餘模塊。這就是常說的現代模塊系統CommonJS和ES6模塊的好處。你只須要在文件頂部指定依賴，就像 Java 或 C# 那樣一句聲明：

//CommonJS var react = require('react'); //ES6 Modules import React from 'React'

九、Transpile to JS

　　最新版本的JavaScript，EcmaScript 2015(被你們熟知的名字是ES6) 官方版本在 6月份發佈了。瀏覽器還不能很好的支持它的不少特性，但這並沒有關緊要。你能夠用 Babel 來體驗它的新特性。Babel 把 ES6 transpile 到 ES5，若是你能忍受這麼作，你如今就能夠享受 ES6 的新特性。JavaScript預計一年發佈一次的新版本了，因此你可能一直須要transpiling 。

　　或者你喜歡強類型？那麼你能夠考慮 TypeScript。

十、JS應該自動構建

　　咱們已經談到了 linting、壓縮、transpilation 和測試。但如何才能讓這一切自動發生？很簡單：使用自動構建。Gulp 就是這樣一個結合了全部功能的工具。不過你也能夠選擇 Grunt 和 Webpack。或者若是你是一個高手，你也可使用 npm 來構建。問題的關鍵是，不要期望人記得手動運行這些東西的，自動化是一個很是棒的選擇。