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的。這使得邏輯易于重用，易于測試，升級也不受影響。
來自：http://www.uml.org.cn/AJAX/201609094.asp