一.前言
很多情況下昆烁，產(chǎn)品的設(shè)計與開發(fā)人員一直想打造一套高品質(zhì)的解決方案，從而快速缎岗、平穩(wěn)地適應(yīng)產(chǎn)品迭代善玫。速度是衡量產(chǎn)品適應(yīng)性的真正且唯一的標準，而且密强，這并不是筆者的一家之言。
「速度是衡量適應(yīng)能力的真正指標蜗元』虿常」 ——艾瑞克·埃利奧特
許多公司選擇 JavaScript，就是看中了它靈活奕扣、快速的優(yōu)點薪鹦。盡管此言非虛，但如果你在構(gòu)建 JavaScript 系統(tǒng)時考慮得不夠周全惯豆，靈活與高速的特性反而可能將你帶入歧途池磁。
一些值得特別關(guān)注的問題包括：
- 代碼重復(fù)
- 樣式或風(fēng)格不一致
- 無法隨意擴展
- 工具與模塊選擇阻礙了生產(chǎn)力
- 測試程序不可靠或缺失
- 深度繼承(猩猩/香蕉問題)
原作者曾在多個側(cè)重 JavaScript 的開發(fā)環(huán)境中工作了一段時間之后，幾乎經(jīng)歷了所有擴展 JavaScript 應(yīng)用可能導(dǎo)致的問題楷兽，客戶端與服務(wù)器端均不能幸免地熄。以下是對這些問題的總結(jié)，希望能幫助大家少走一些彎路芯杀。
二.基礎(chǔ)性原則
在探討與上下文相關(guān)的 JavaScript 問題之前端考，以下是一些與平臺相獨立的建議，肯定能幫助你減輕工作負擔(dān)揭厚。
1.避免經(jīng)典的面向?qū)ο竽Ｊ?/strong>
JavaScript 功能非常強大却特，它為對象組合提供了原型繼承與函數(shù)式編程功能，使用 JavaScript 的這兩大支柱功能筛圆，而不執(zhí)著于經(jīng)典的面向?qū)ο竽Ｊ搅衙鳎軌蛴行Оl(fā)揮 JavaScript 的強勁功能。應(yīng)用的組合度與模塊化程度越高太援，今后就越容易重構(gòu)與擴展闽晦。
2.越懶越好
現(xiàn)而今扳碍，NPM 上提供了超過20萬個模塊。時間就是金錢尼荆，你花在代碼維護上的時間越多左腔，對雇主而言，你就越昂貴捅儒。更何況液样，許多代碼其實不用你親自編寫。
在這里巧还，筆者還建議你使用第三方的運維服務(wù)與工具鞭莽。沒必要建立自己的分析平臺，除非你的應(yīng)用擴展到非常大的規(guī)模麸祷，以致于 Google Analytics澎怒，Mixpanel，百度統(tǒng)計等 SaaS 營銷軟件無法滿足你的需求阶牍。使用這些服務(wù)處理相關(guān)任務(wù)喷面，能促使你專注于真正重要的東西——產(chǎn)品，而且走孽，現(xiàn)在研發(fā)的人力成本越來越高惧辈，使用適當(dāng)?shù)?APM 軟件也能減少開發(fā)維護網(wǎng)站的任務(wù)量，例如 OneAPM 磕瓷、NewRelic盒齿、APPdynamic 等，這能讓工程師專注于生產(chǎn)價值困食，而不是管理代碼質(zhì)量边翁。
3.保持一致性
導(dǎo)致生產(chǎn)力嚴重下滑的另一重要原因是面對陌生代碼時手足無措，四處翻找硕盹。采用統(tǒng)一的風(fēng)格指南符匾，創(chuàng)建可辨明的樣式，就能解決這一難題莱睁。同樣的風(fēng)格與樣式意味著新的項目看起來也更為熟悉待讳。
筆者尤其偏愛 Airbnb 的風(fēng)格指南。該指南的貢獻者超過 160 人仰剿，每個月有16.9萬次的下載创淡。此外，它還提供了一個 ESLint 插件南吮，也就是說琳彩，如果你不準備覆蓋什么的話，無需任何配置就能為你所用。
與成千上萬名 JavaScript 工程師共享樣式與風(fēng)格露乏。
此外碧浊，使用 linter 以確保團隊內(nèi)部的樣式一致。目前瘟仿，ESLint 是筆者最愛的 linter箱锐，因為它不僅提供了插件能力，還擁有來自開源社區(qū)的持續(xù)支持劳较。幾乎針對每一種文本編輯器與 IDE驹止，都有 ESLint 插件可用。
Yeoman 也可以幫你創(chuàng)建在新項目中使用的應(yīng)用模板观蜗，實現(xiàn)更為深入的一致性臊恋。有了 Yeoman，你可以在每個應(yīng)用中使用相同的基本依賴關(guān)系墓捻，編碼樣式以及風(fēng)格抖仅。
4.充分利用豐富的工具
JavaScript 是擁有最完備的工具生態(tài)系統(tǒng)的編程語言之一。請一定要利用這一點砖第！iron-node,react devtools 和 redux devtools 都是不容錯過的工具撤卢。
Electron 與 React Native 提供了訪問原始環(huán)境的能力，允許你為對種平臺創(chuàng)建應(yīng)用梧兼，而且凸丸，能有效提高代碼重用率。
三.編寫過程中的「坑」
1.盡可能保持小巧
將應(yīng)用分為許多小巧的模塊袱院，能真正實現(xiàn)可組合的 JavaScript。遵循 FIRST 原則（Focused 專注瞭稼，Independent 獨立忽洛，Reusable 可重用，Small 小巧环肘，Testable 可測試）欲虚，能夠降低應(yīng)用復(fù)雜度，同時提升測試能力與重用率悔雹。
「無論是客戶端組件還是服務(wù)器端的組件复哆，無論是 Node 模塊還是一段可視化 UI，龐大的組件總是比小巧的組件更復(fù)雜腌零，更難以維護梯找。」 ——阿迪·奧斯馬尼
請記住益涧，模塊的功能越小越好锈锤。事實上，模塊越小，其重用率就越高久免。
2.充分利用 ES2015
將其用于 APIs浅辙，SPAs，以及兩者的所有中間環(huán)節(jié)阎姥。類似 Bable的工具能給你帶來極大的優(yōu)勢记舆。在今天，使用 ES2015 的能力意味著你可以用更少呼巴、更整潔的代碼創(chuàng)建應(yīng)用泽腮。不要因為害怕供應(yīng)商鎖定或這些工具不容易找到而放棄使用它們。
老實說伊磺，現(xiàn)在已經(jīng)沒有理由不適用 Babel 了盛正！Bable 既可以處理普通的 JavaScript，也可以處理任何類型的編譯代碼屑埋。這意味著豪筝，你可以隨時將模塊移回 ES5。
建立能與 JavaScript 完好擴展的服務(wù)并非易事摘能。應(yīng)用越大续崖，快速運行并適應(yīng)新變化就越難。請確保你正在建造的服務(wù)是高度可用团搞，且支持自動擴展的严望。
3.建立支持 JavaScript 應(yīng)用的基礎(chǔ)架構(gòu)
JavaScript 是一種單線程的語言。這意味著逻恐，在沒有集群的情況下像吻，你的應(yīng)用只能使用單個 CPU。筆者喜歡將負載平衡工作留給代理或 NGINX 之類的負載平衡器复隆，而不是交由 Node 的集群模塊處理拨匆。此外，筆者還偏好使用較小的服務(wù)器來運行應(yīng)用挽拂。這樣惭每，當(dāng)需要更多資源時，筆者只需增加服務(wù)器的數(shù)量就能輕易實現(xiàn)橫向擴展亏栈。這能幫助筆者最小化當(dāng)前的運營成本台腥。
4.集裝箱化！集裝箱化绒北！集裝箱化黎侈！
以下是部分原因：
- 集裝箱化會迫使你遵從應(yīng)用開發(fā)12大原則。
- 通過集裝箱化闷游，可以實現(xiàn)開發(fā)蜓竹、階段箕母、測試以及生產(chǎn)環(huán)境的對等。
- 集裝箱非常易于橫向擴展俱济。
- 你可以輕易將應(yīng)用轉(zhuǎn)移到其他云服務(wù)上嘶是。（防止供應(yīng)商鎖定，使用其他支出服務(wù)蛛碌。）
實現(xiàn)環(huán)境集裝箱化的理由還有很多很多聂喇，一旦掌握了基本知識，集裝箱化就不難實現(xiàn)蔚携。如果你想打造在任何平臺都能使用的靈活應(yīng)用希太，集裝箱化是必須掌握的第一步。而且酝蜒，由于集裝箱在外部是無狀態(tài)的誊辉，可以支持無限次復(fù)制。
5.打造易于擴展與維護的應(yīng)用
對于 APIs 與服務(wù)亡脑，選擇 Hapi 作為服務(wù)器框架堕澄，Joi 用于校驗，hapi-swagger 插件用于維護活文檔霉咨，是相當(dāng)不錯的組合蛙紫。
Hapi 特別適用于模塊化的大型應(yīng)用，同時也能為簡單的應(yīng)用提供支持途戒。此外坑傅，最讓它與眾不同的是其提供的封裝能力。Hapi 提供了許多通過依賴注入訪問服務(wù)器的「插件」喷斋。這樣唁毒，你可以將業(yè)務(wù)邏輯按照緊密程度進行分組。將應(yīng)用分解到這些插件中星爪，能極大地提高擴展能力枉证。項目的操縱也變得極為直白，原因是不需要學(xué)習(xí)自定義的插件架構(gòu)移必，而 Hapi 本身又提供了豐富的文檔資料。
Joi 是一種驗證模塊毡鉴，與 Hapi 出自同一班工程師之手（Walmart Labs）崔泵。Joi 的 API 與其卓越的功能使得驗證變成小菜一碟。你知道如何建立驗證模式猪瞬，因此創(chuàng)建驗證模塊也變得非常簡單憎瘸。用于驗證 UI 中某個表格的一段代碼也可以用來驗證一個傳入的請求、一個模塊陈瘦，或測試幌甘。的確是非常令人驚奇。
將 hapi-swagger 插入服務(wù)器后，你可以輕易地將任意路徑標記為 API 的一部分锅风，hapi-swagger 會幫你生成活文檔酥诽。更不用說，hapi-swagger 會讀取 Joi 驗證皱埠，為開發(fā)者提供細致的 API 文檔肮帐，而你不用費吹灰之力。不過边器，使用 Express 或 Koa 也可能得到相同的效果训枢，但筆者仍舊認為 Hapi 是非常驚人的工具。
四.關(guān)于后續(xù)
本文主要講的是關(guān)于 JavaScript 使用過程中的一些基礎(chǔ)性的心得體驗忘巧，不一定適合每一個人恒界，但是確實也是作者的「踩坑之得」，大家在閱讀之后如果有什么想分享的也可以在討論區(qū)進行回復(fù)砚嘴，閉門造車總是不行的十酣。
本文的下一個姊妹篇，主要講的內(nèi)容預(yù)計為關(guān)于 JavaScript 使用過程中如何提高用戶體驗和性能優(yōu)化這方面的內(nèi)容枣宫，敬請期待~
Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺婆誓，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化也颤；支持瀏覽器洋幻、微信、App 瀏覽 HTML 和 HTML5 頁面翅娶。想閱讀更多技術(shù)文章文留，請訪問OneAPM 官方技術(shù)博客。
本文轉(zhuǎn)自 OneAPM 官方博客
