JavaScript 功能非常強(qiáng)大，它為對象組合提供了原型繼承與函數(shù)式編程功能，使用 JavaScript 的這兩大支柱功能，而不執(zhí)著于經(jīng)典的面向?qū)ο竽Ｊ?，能夠有效發(fā)揮 JavaScript 的強(qiáng)勁功能。應(yīng)用的組合度與模塊化程度越高，今后就越容易重構(gòu)與擴(kuò)展。

2.越懶越好

現(xiàn)而今，NPM 上提供了超過20萬個(gè)模塊。時(shí)間就是金錢，你花在代碼維護(hù)上的時(shí)間越多，對雇主而言，你就越昂貴。更何況，許多代碼其實(shí)不用你親自編寫。

在這里，筆者還建議你使用第三方的運(yùn)維服務(wù)與工具。沒必要建立自己的分析平臺(tái)，除非你的應(yīng)用擴(kuò)展到非常大的規(guī)模，以致于 Google Analytics，Mixpanel，百度統(tǒng)計(jì)等 SaaS 營銷軟件無法滿足你的需求。使用這些服務(wù)處理相關(guān)任務(wù)，能促使你專注于真正重要的東西——產(chǎn)品，而且，現(xiàn)在研發(fā)的人力成本越來越高，使用適當(dāng)?shù)?APM 軟件也能減少開發(fā)維護(hù)網(wǎng)站的任務(wù)量，例如 OneAPM 、NewRelic、APPdynamic 等，這能讓工程師專注于生產(chǎn)價(jià)值，而不是管理代碼質(zhì)量。

3.保持一致性

導(dǎo)致生產(chǎn)力嚴(yán)重下滑的另一重要原因是面對陌生代碼時(shí)手足無措，四處翻找。采用統(tǒng)一的風(fēng)格指南，創(chuàng)建可辨明的樣式，就能解決這一難題。同樣的風(fēng)格與樣式意味著新的項(xiàng)目看起來也更為熟悉。

筆者尤其偏愛 Airbnb 的風(fēng)格指南。該指南的貢獻(xiàn)者超過 160 人，每個(gè)月有16.9萬次的下載。此外，它還提供了一個(gè) ESLint 插件，也就是說，如果你不準(zhǔn)備覆蓋什么的話，無需任何配置就能為你所用。

與成千上萬名 JavaScript 工程師共享樣式與風(fēng)格。

此外，使用 linter 以確保團(tuán)隊(duì)內(nèi)部的樣式一致。目前，ESLint 是筆者最愛的 linter，因?yàn)樗粌H提供了插件能力，還擁有來自開源社區(qū)的持續(xù)支持。幾乎針對每一種文本編輯器與 IDE，都有 ESLint 插件可用。

Yeoman 也可以幫你創(chuàng)建在新項(xiàng)目中使用的應(yīng)用模板，實(shí)現(xiàn)更為深入的一致性。有了 Yeoman，你可以在每個(gè)應(yīng)用中使用相同的基本依賴關(guān)系，編碼樣式以及風(fēng)格。

4.充分利用豐富的工具

JavaScript 是擁有最完備的工具生態(tài)系統(tǒng)的編程語言之一。請一定要利用這一點(diǎn)！iron-node,react devtools 和 redux devtools 都是不容錯(cuò)過的工具。

Electron 與 React Native 提供了訪問原始環(huán)境的能力，允許你為對種平臺(tái)創(chuàng)建應(yīng)用，而且，能有效提高代碼重用率。

三.編寫過程中的「坑」

1.盡可能保持小巧

將應(yīng)用分為許多小巧的模塊，能真正實(shí)現(xiàn)可組合的 JavaScript。遵循 FIRST 原則（Focused 專注，Independent 獨(dú)立，Reusable 可重用，Small 小巧，Testable 可測試），能夠降低應(yīng)用復(fù)雜度，同時(shí)提升測試能力與重用率。

「無論是客戶端組件還是服務(wù)器端的組件，無論是 Node 模塊還是一段可視化 UI，龐大的組件總是比小巧的組件更復(fù)雜，更難以維護(hù)。」 ——阿迪·奧斯馬尼

請記住，模塊的功能越小越好。事實(shí)上，模塊越小，其重用率就越高。

2.充分利用 ES2015

將其用于 APIs，SPAs，以及兩者的所有中間環(huán)節(jié)。類似 Bable的工具能給你帶來極大的優(yōu)勢。在今天，使用 ES2015 的能力意味著你可以用更少、更整潔的代碼創(chuàng)建應(yīng)用。不要因?yàn)楹ε鹿?yīng)商鎖定或這些工具不容易找到而放棄使用它們。

老實(shí)說，現(xiàn)在已經(jīng)沒有理由不適用 Babel 了！Bable 既可以處理普通的 JavaScript，也可以處理任何類型的編譯代碼。這意味著，你可以隨時(shí)將模塊移回 ES5。

建立能與 JavaScript 完好擴(kuò)展的服務(wù)并非易事。應(yīng)用越大，快速運(yùn)行并適應(yīng)新變化就越難。請確保你正在建造的服務(wù)是高度可用，且支持自動(dòng)擴(kuò)展的。

3.建立支持 JavaScript 應(yīng)用的基礎(chǔ)架構(gòu)

JavaScript 是一種單線程的語言。這意味著，在沒有集群的情況下，你的應(yīng)用只能使用單個(gè) CPU。筆者喜歡將負(fù)載平衡工作留給代理或 NGINX 之類的負(fù)載平衡器，而不是交由 Node 的集群模塊處理。此外，筆者還偏好使用較小的服務(wù)器來運(yùn)行應(yīng)用。這樣，當(dāng)需要更多資源時(shí)，筆者只需增加服務(wù)器的數(shù)量就能輕易實(shí)現(xiàn)橫向擴(kuò)展。這能幫助筆者最小化當(dāng)前的運(yùn)營成本。

4.集裝箱化！集裝箱化！集裝箱化！

以下是部分原因：

集裝箱化會(huì)迫使你遵從應(yīng)用開發(fā)12大原則。

通過集裝箱化，可以實(shí)現(xiàn)開發(fā)、階段、測試以及生產(chǎn)環(huán)境的對等。

集裝箱非常易于橫向擴(kuò)展。

你可以輕易將應(yīng)用轉(zhuǎn)移到其他云服務(wù)上。（防止供應(yīng)商鎖定，使用其他支出服務(wù)。）

實(shí)現(xiàn)環(huán)境集裝箱化的理由還有很多很多，一旦掌握了基本知識(shí)，集裝箱化就不難實(shí)現(xiàn)。如果你想打造在任何平臺(tái)都能使用的靈活應(yīng)用，集裝箱化是必須掌握的第一步。而且，由于集裝箱在外部是無狀態(tài)的，可以支持無限次復(fù)制。

5.打造易于擴(kuò)展與維護(hù)的應(yīng)用

對于 APIs 與服務(wù)，選擇 Hapi 作為服務(wù)器框架，Joi 用于校驗(yàn)，hapi-swagger 插件用于維護(hù)活文檔，是相當(dāng)不錯(cuò)的組合。

Hapi 特別適用于模塊化的大型應(yīng)用，同時(shí)也能為簡單的應(yīng)用提供支持。此外，最讓它與眾不同的是其提供的封裝能力。Hapi 提供了許多通過依賴注入訪問服務(wù)器的「插件」。這樣，你可以將業(yè)務(wù)邏輯按照緊密程度進(jìn)行分組。將應(yīng)用分解到這些插件中，能極大地提高擴(kuò)展能力。項(xiàng)目的操縱也變得極為直白，原因是不需要學(xué)習(xí)自定義的插件架構(gòu)，而 Hapi 本身又提供了豐富的文檔資料。

Joi 是一種驗(yàn)證模塊，與 Hapi 出自同一班工程師之手（Walmart Labs）。Joi 的 API 與其卓越的功能使得驗(yàn)證變成小菜一碟。你知道如何建立驗(yàn)證模式，因此創(chuàng)建驗(yàn)證模塊也變得非常簡單。用于驗(yàn)證 UI 中某個(gè)表格的一段代碼也可以用來驗(yàn)證一個(gè)傳入的請求、一個(gè)模塊，或測試。的確是非常令人驚奇。

將 hapi-swagger 插入服務(wù)器后，你可以輕易地將任意路徑標(biāo)記為 API 的一部分，hapi-swagger 會(huì)幫你生成活文檔。更不用說，hapi-swagger 會(huì)讀取 Joi 驗(yàn)證，為開發(fā)者提供細(xì)致的 API 文檔，而你不用費(fèi)吹灰之力。不過，使用 Express 或 Koa 也可能得到相同的效果，但筆者仍舊認(rèn)為 Hapi 是非常驚人的工具。

四.關(guān)于后續(xù)

本文主要講的是關(guān)于 JavaScript 使用過程中的一些基礎(chǔ)性的心得體驗(yàn)，不一定適合每一個(gè)人，但是確實(shí)也是作者的「踩坑之得」，大家在閱讀之后如果有什么想分享的也可以在討論區(qū)進(jìn)行回復(fù)，閉門造車總是不行的。

本文的下一個(gè)姊妹篇，主要講的內(nèi)容預(yù)計(jì)為關(guān)于 JavaScript 使用過程中如何提高用戶體驗(yàn)和性能優(yōu)化這方面的內(nèi)容，敬請期待~

Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術(shù)文章，請?jiān)L問OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自 OneAPM 官方博客