JavaScript 踩坑心得— 為了高速(上)

一.前言

很多情況下,產品的設計與開發人員一直想打造一套高品質的解決方案,從而快速、平穩地適應產品迭代。速度是衡量產品適應性的真正且唯一的標準,而且,這并不是筆者的一家之言。

「速度是衡量適應能力的真正指標。」 ——艾瑞克·埃利奧特

許多公司選擇 JavaScript,就是看中了它靈活、快速的優點。盡管此言非虛,但如果你在構建 JavaScript 系統時考慮得不夠周全,靈活與高速的特性反而可能將你帶入歧途。

一些值得特別關注的問題包括:

  • 代碼重復
  • 樣式或風格不一致
  • 無法隨意擴展
  • 工具與模塊選擇阻礙了生產力
  • 測試程序不可靠或缺失
  • 深度繼承(猩猩/香蕉問題)

原作者曾在多個側重 JavaScript 的開發環境中工作了一段時間之后,幾乎經歷了所有擴展 JavaScript 應用可能導致的問題,客戶端與服務器端均不能幸免。以下是對這些問題的總結,希望能幫助大家少走一些彎路。

二.基礎性原則

在探討與上下文相關的 JavaScript 問題之前,以下是一些與平臺相獨立的建議,肯定能幫助你減輕工作負擔。

1.避免經典的面向對象模式

JavaScript 功能非常強大,它為對象組合提供了原型繼承與函數式編程功能,使用 JavaScript 的這兩大支柱功能,而不執著于經典的面向對象模式,能夠有效發揮 JavaScript 的強勁功能。應用的組合度與模塊化程度越高,今后就越容易重構與擴展。

2.越懶越好

現而今,NPM 上提供了超過20萬個模塊。時間就是金錢,你花在代碼維護上的時間越多,對雇主而言,你就越昂貴。更何況,許多代碼其實不用你親自編寫。

在這里,筆者還建議你使用第三方的運維服務與工具。沒必要建立自己的分析平臺,除非你的應用擴展到非常大的規模,以致于 Google Analytics,Mixpanel,百度統計等 SaaS 營銷軟件無法滿足你的需求。使用這些服務處理相關任務,能促使你專注于真正重要的東西——產品,而且,現在研發的人力成本越來越高,使用適當的 APM 軟件也能減少開發維護網站的任務量,例如 OneAPMNewRelicAPPdynamic 等,這能讓工程師專注于生產價值,而不是管理代碼質量。

3.保持一致性

導致生產力嚴重下滑的另一重要原因是面對陌生代碼時手足無措,四處翻找。采用統一的風格指南,創建可辨明的樣式,就能解決這一難題。同樣的風格與樣式意味著新的項目看起來也更為熟悉。

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

與成千上萬名 JavaScript 工程師共享樣式與風格。

此外,使用 linter 以確保團隊內部的樣式一致。目前,ESLint 是筆者最愛的 linter,因為它不僅提供了插件能力,還擁有來自開源社區的持續支持。幾乎針對每一種文本編輯器與 IDE,都有 ESLint 插件可用。

Yeoman 也可以幫你創建在新項目中使用的應用模板,實現更為深入的一致性。有了 Yeoman,你可以在每個應用中使用相同的基本依賴關系,編碼樣式以及風格。

4.充分利用豐富的工具

JavaScript 是擁有最完備的工具生態系統的編程語言之一。請一定要利用這一點!iron-node,react devtools 和 redux devtools 都是不容錯過的工具。

Electron 與 React Native 提供了訪問原始環境的能力,允許你為對種平臺創建應用,而且,能有效提高代碼重用率。

三.編寫過程中的「坑」
1.盡可能保持小巧

將應用分為許多小巧的模塊,能真正實現可組合的 JavaScript。遵循 FIRST 原則(Focused 專注,Independent 獨立,Reusable 可重用,Small 小巧,Testable 可測試),能夠降低應用復雜度,同時提升測試能力與重用率。

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

請記住,模塊的功能越小越好。事實上,模塊越小,其重用率就越高。

2.充分利用 ES2015

將其用于 APIs,SPAs,以及兩者的所有中間環節。類似 Bable的工具能給你帶來極大的優勢。在今天,使用 ES2015 的能力意味著你可以用更少、更整潔的代碼創建應用。不要因為害怕供應商鎖定或這些工具不容易找到而放棄使用它們。

老實說,現在已經沒有理由不適用 Babel 了!Bable 既可以處理普通的 JavaScript,也可以處理任何類型的編譯代碼。這意味著,你可以隨時將模塊移回 ES5。

建立能與 JavaScript 完好擴展的服務并非易事。應用越大,快速運行并適應新變化就越難。請確保你正在建造的服務是高度可用,且支持自動擴展的。

3.建立支持 JavaScript 應用的基礎架構

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

4.集裝箱化!集裝箱化!集裝箱化!

以下是部分原因:

  1. 集裝箱化會迫使你遵從應用開發12大原則
  2. 通過集裝箱化,可以實現開發、階段、測試以及生產環境的對等。
  3. 集裝箱非常易于橫向擴展。
  4. 你可以輕易將應用轉移到其他云服務上。(防止供應商鎖定,使用其他支出服務。)

實現環境集裝箱化的理由還有很多很多,一旦掌握了基本知識,集裝箱化就不難實現。如果你想打造在任何平臺都能使用的靈活應用,集裝箱化是必須掌握的第一步。而且,由于集裝箱在外部是無狀態的,可以支持無限次復制。

5.打造易于擴展與維護的應用

對于 APIs 與服務,選擇 Hapi 作為服務器框架,Joi 用于校驗,hapi-swagger 插件用于維護活文檔,是相當不錯的組合。

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

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

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

四.關于后續

本文主要講的是關于 JavaScript 使用過程中的一些基礎性的心得體驗,不一定適合每一個人,但是確實也是作者的「踩坑之得」,大家在閱讀之后如果有什么想分享的也可以在討論區進行回復,閉門造車總是不行的。

本文的下一個姊妹篇,主要講的內容預計為關于 JavaScript 使用過程中如何提高用戶體驗和性能優化這方面的內容,敬請期待~

Browser Insight 是一個基于真實用戶的 Web 前端性能監控平臺,能夠幫大家定位網站性能瓶頸,網站加速效果可視化;支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章,請訪問OneAPM 官方技術博客

本文轉自 OneAPM 官方博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,030評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,310評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,951評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,796評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,566評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,055評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,142評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,303評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,799評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,683評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,899評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,409評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,135評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,520評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,757評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,528評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,844評論 2 372

推薦閱讀更多精彩內容