2015年 12條專業的JavaScript規則
免責聲明：下面的內容為了簡潔說的有些絕對，是的，在編程中所有的“規則”都有例外。
學習JavaScript是困難的。它發展的如此之快，以至于在任何一個特定的時刻，你都不清楚自己是否“做錯了”。有些時候，感覺像是壞的部分超過了好的部分。然而，討論這些并沒有意義，JavaScript正在征服世界，所以，我們也只能這么做了。
下面是我的一些建議：
1. JS應該放到 .js 文件中
“額，只有那么幾行而已…”，是的，我的意思是所有的 JS 都應該放在 .js 文件中。為什么呢？因為這有助于可讀性，節省帶寬。行內 JavaScript 在 每次 頁面加載時都會重新下載，相反的，單獨的 .js 文件則會被緩存起來。正如你所看到的，這個規則有助于支持如下一長串的其他規則。這就是為什么它的規則# 1。
2. JS 應該是靜態的
我看到過很多程序員喜歡動態的使用JavaScript。他們喜歡像使用服務器端語言如C#, Ruby, Java那樣來動態的使用JavaScript。 千萬不要這么做 。你失去了代碼著色、語法高亮顯示和智能感知的支持。記住，JavaScript 應該屬于一個 .js 文件(見規則 #1)。
然而，使用JSON引入動態行為。我把這稱為JavaScript配置對象模式。具體方法如下：把JSON注入到你應用程序的頭部，并根據業務邏 輯的需要利用這些數據。你可能會想：“嘿，這違背了規則 #1”。我把 JSON 看作是數據，而不是代碼，所以我破例，為了支持靜態的、單獨的JavaScript文件。
StackOverflow 使用的這種模式，Google 也是。你可以看下他們的代碼：
正如你看到的，StackOverflow 注入了一些個人的設置，如 isNoticesTabEnabled。這個簡單的JSON代碼片段為你使用靜態JavaScript文件自定義行為提供了 必要的數據支持。為了實現這一點，需要序列號服務器端類為JSON，然后放置在 <head> 中。然后你可以在靜態的JavaScript文件中根據需要參考這個數據結構，能夠使用它，是因為它被注入到 <head> 中。
3. JS 應該被壓縮
壓縮可以減小文件體積，從而提升頁面加載速度。記住， 性能也是一項功能 。因為，為了壓縮，你需要把 JS 放到一個單獨的文件中(見規則 #1)。壓縮JS曾經很麻煩，但現在完全是簡單自動化的。有一打的方式可以做到，而 Gulp 和 gulp-uglify 是一種低摩擦和自動化的辦法。
4. JS 應該位于頁面底部
如果你把 <script> 標簽放在 <head> 中，它會阻礙頁面渲染。位于 <head> 中的腳本必須在頁面顯示前加載，因此把 <script> 放在底部的 </body> 前面可以先顯示頁面，而不用等 JS 文件下載完畢。這有助于提升感知性能。如果你的JavaSctipe必須位于 <head> 中，可以考慮使用 jQuery 的 $(document).ready 這樣你的腳本可以等到 DOM 加載完畢后再執行。
5. JS 應該實時的 Linted
Linting 遵循代碼風格、發現錯別字、有助于避免錯誤。有很多這樣的工具，我建議使用 ESLint 。你可以使用 Gulp 的 gulp-eslint 來運行它。Gulp 可以查看你所有的 JS 文件，并在你每次保存的時候運行 linter。另外，你需要把你的 JS 代碼放在單獨的 .js 文件中才能運行 linter 。
6. JS應該有自動化測試
在過去的幾年中，我們知道了測試的重要性。但它在很大程度上忽略了在JavaScript，直到最近才被重視。現在典型的JavaScript應用需要測試的部分遠比你實際手動測試到的要多。使用JavaScript處理這么多的邏輯，關鍵的是具有自動測試。
您可以通過工具，如 Selenium 自動化集成測試。然而，集成測試往往是脆弱的，所以我建議專注于自動化單元測試。自動化單元測試有多種選擇。如果你是新手， 我建議你使用 Jasmine ，而如果你想要終極配置，可以使用 Mocha with Chai 。
7. 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'
9. Transpile to JS
最新版本的JavaScript， EcmaScript 2015 (被大家熟知的名字是ES6) 官方版本在 6月份發布了。瀏覽器還 不能很好的支持它的很多特性 ，但這并無關緊要。你可以用 Babel 來體驗它的 新特性 。Babel 把 ES6 transpile 到 ES5，如果你能忍受這么做，你現在就可以享受 ES6 的新特性。JavaScript預計一年發布一次的新版本了，所以你可能一直需要transpiling 。
或者你喜歡強類型？那么你可以考慮 TypeScript 。
10. JS應該自動構建
我們已經談到了 linting、壓縮、transpilation 和測試。但如何才能讓這一切自動發生？很簡單：使用自動構建。Gulp 就是這樣一個結合了所有功能的工具。不過你也可以選擇 Grunt 和 Webpack 。或者如果你是一個高手，你也可以使用 npm 來構建 。問題的關鍵是，不要指望人記得手動運行這些東西的，自動化是一個非常棒的選擇。
11. 使用框架或者庫
拿一些現成的東西來用。想保持輕量級？試試 Backbone 或 Knockout 。 或者 jQuery 就夠了。想要更多更全功能的？試試 Angular ， Ember ,，或者 React with Flux 。
關鍵是：
不要試圖從頭開始。站在巨人的肩膀上。
不管你選擇哪個框架，都應該分開你的關注，這就是下一點..
12. JS Should Separate Concerns
把 JS代碼放到一個文件中的習慣很容易養成，或者盲目跟從你的框架的意見。當你移動到客戶端的時候，不要忘記你在服務器端學到的經驗教訓。
這里并不僅僅意味著就像你在Angular 和 Knockout等 MVC 框架中那樣分離模型、視圖、控制器。編寫JavaScript的時候應該像服務器端開發者那樣思考問題。把你的業務邏輯和數據訪問分離出來。
這意味著AJAX調用都應該在一個地方。創建一個集中的客戶端“數據訪問層”。業務邏輯模塊應包含純JavaScript的。這使得邏輯易于重用，易于測試，升級也不受影響。
via： medium.com ，由Specs 翻譯整理，發布在Coder資源網，轉載請注明來源。