導語：看過《人類簡史》一書的人都知道，該書從物理學，化學，生物學，政治學等學科角度，對整個人類歷史做出了全方位的考察和預測，總結歸納出超越歷史層面的規律和深刻意義。同樣地，我們能否也從跨學科的聯想中為前端工作找到一盞指路明燈呢？本文將試著從生物學的角度來做一次前端領域的小幻想。

為什么選擇生物學作為參照？

生物學是一門能打通很多跨界知識的學科。相比物理學等自然科學，生物學更深刻地揭示了世界的底層規律，其思想放之四海而皆準。

——傅盛

從模仿蝙蝠發明了雷達，模仿蜻蜓發明了直升飛機，再到物聯網（Internet of Things），機器學習，神經網絡等，都是不同程度上的仿生學的實踐，由此可以看出生物學領域對于科技發展的指導性和重要性。更發散地，生物學思維也可以用在你需要的任何地方。以下是一些參考文章：

• 《為什么互聯網大佬都偏愛生物學思維？》
• 《“生物學思維”透視互聯網時代下的商業模式變革》

我們將以生物學作為“線索”，套用生物學上的一些理論，試著解決以下問題：

• 前端為什么需要工程化？
• 我們怎樣做前端工程化？
• 前端工程化后還可以怎么發展？

前端為什么需要工程化？

《我們是怎么進行前端工程化的》一文中，從理論和宏觀的角度，闡述了前端工程化的必要性，其中也具體提及了“多系統管理瓶頸”，“人員協作困難”等原因。其中對于前端工程化經典的描述是：

將系統化的、嚴格約束的、可量化的方法應用于前端頁面的開發、運行和維護，即將工程化應用于前端開發。

至于在生物學的角度上來說，可以參考“細胞的工程化”。例如，生物書上，關于植物細胞中線粒體，葉綠體的經典配合，有條不紊地使植物進行呼吸作用和光合作用，也是一種工程化；再比如，細胞靠分化形成組織，再組裝出各種器官去實現更豐富的功能，這是一種工程化。若沒有工程化的建設，則將以有機物的形態存在。單細胞也算不上。

雖然我們人類仍未探知細胞分化的根本原因，但其中的規律，就足以引導我們理解“前端工程化”的重要性，并鼓勵我們將其落實到“前端工程化”大大小小的方面。

我們怎樣做前端工程化？

下面將以我們風控的前端工程化作為本體，以我們最熟悉的多細胞生物體的結構層次——細胞，組織，器官，系統，個體，作為喻體，詳細分析一下該怎么結合生物學與前端工程化。這里并不主要介紹和推廣我們的工具，而是生物學化地解讀他們的形成，思考與發展。

規范就是“DNA”

名詞解釋：DNA又稱去氧核糖核酸，是一種生物大分子，可組成遺傳指令，引導生物發育與生命機能運作。主要功能是信息儲存，可比喻為“藍圖”或“配方”

現代前端的涉及范圍非常廣，但在實際工作中，無論你使用哪種技術棧，都離不開一定的規范。比如toB業務的特點不會是“酷炫”、“狂野”。業務特點加上設計規范，有機合成了核心的DNA，指導整個工程化里里外外的各種活動。

[ 規范就是“DNA” ]

雖然不會每個團隊都會有設計師，但是，我們心中必須有這種自覺性，去根據業務特點，去總結歸納出一套規范，因為這將是我們后面行動的指導思想，從始至終貫穿著我們的工作。

像“風控管理系統”的核心業務特點就是：嚴謹，重復，復雜。其中，嚴謹就包含了數據校驗多，校驗規則復雜等規范，這將指導我們做組件時需要考慮這些問題。像qf-js 方法庫里面的方法，就包含了很多業務核心需要的計算，校驗等方法。

有了業務規范，那還需要設計規范，如果你說你們沒有設計師，那就拿設計史上最經典的一些規范，比如一些通識性的規范：

CRAP原則：對比，重復，對齊，親密性 ——《寫給大家看的設計書》

尼爾森十大可用性原則

當業務規范與設計規范一結合，就形成了前端工程化的DNA。

[ 風控前端“DNA” ]

但別以為DNA定下來了就不變了，因為還有基因突變這回事。像風控業務中，國家監管的調控，公司業務的變化，都是“基因變化”的誘因。未搞清楚業務特點的，也可以通過觀察外部來慢慢塑造形成自己的“DNA”。

業務就是“干細胞”

名詞解釋：干細胞（英語：stem cell）是原始且未特化的細胞，它是未充分分化、具有再生各種組織器官的潛在功能的一類細胞。

[ 業務就是“干細胞” ]

這里的“業務”指的是整個小組或者是整個部門最核心的業務，我們常常都高度概括成兩三個字，比如在我們部門就是“風控”。文字簡單，但是我們的所做的一切都是圍繞這一個目標進行。這整個業務需求就是相當于一個胚胎干細胞，幾乎所有各種細化需求，延伸業務都圍繞其展開。

“干細胞”攜帶著“DNA”，指導著后續細胞的生長，活動，繁衍。

工具庫類似“組織”

名詞解釋：由形態相似、功能相同的一群細胞和細胞間質組合起來，稱為組織。在高等動物體(或人體)具有很多不同形態和不同機能的組織。通常把這些組織歸納起來分為四大基本組織：上皮組織、結締組織、神經組織和肌肉組織。

在“干細胞”業務中，從業務提煉分裂出一些公共的庫，公共庫是某一類功能相似或者負責某項功能的資源的集合，其作用和定位與生物結構中的“組織”非常類似。比如：iView是vue組件的集合，Mint UI是移動端組件庫的集合，AntV則是圖表工具的集合。

[ 工具庫類似“組織” ]

在風控業務里，則逐漸分裂分化出各種“組織”：qf-view 組件庫，qf-chart 圖表庫，qf-js 方法庫，qf-css 樣式庫，等等，他們的功能跟“組織”一樣，單獨存在的時候似乎沒什么用，但是卻在整體里面不可或缺；一眼看上去聯系不大，但協作起來則令人驚喜。就像一小塊上皮組織似乎作用不大，但是當上皮組織按照一定的規律組合起來，包裹著整個人體的時候，就起到了保護人體等各種作用。

公共庫間的關系如下圖：

[ 風控前端的“組織” ]

是否被圖中的綠色菱形“test”吸引了呢？這就要說起“細胞組織的自我修復能力”了，說白了就是反饋與再生。

公共庫如果光是一個集合，那是遠遠不夠的。就像上皮組織，如果不具有修復能力，那將無法進行日常新陳代謝，傷口也將永遠不會好。所以，作為一個合格的公共庫，應該具有自己的完整的開發，測試，發布流程。開發需要有測試保證，測試需要反饋開發，保證庫的持續交付能力。

所以，如果你看到一個組件庫的測試用例不完整時，你也可以說它是“不合格”的。比如iView組件庫，它的測試中，雖然包含了若干個復雜組件的測試用例，但是卻沒有覆蓋全，這可能會導致加入新功能后，影響了存量代碼的功能。而像qf-view 組件庫中，則把測試用例補全，提高組件庫的“自我修復能力”。

[ iView測試用例 ]

[ qfView測試用例 ]

框架用“器官”來比喻

名詞解釋：器官是由多種組織構成的能行使一定功能的結構單位。器官是生物體中自己具有一定功能，承擔生物體一 定的工作，是生物結構層次中比組織高一級的層次。器官由各種組織構成。

[ 框架用“器官”來比喻 ]

先舉例看看我們最熟悉的器官之一——胃，的組成。胃的內表面由上皮細胞構成，屬于上皮組織．胃壁里面主要是肌肉組織，能收縮和舒張促進胃的蠕動來消化食物．整個的胃布滿了豐富的血管和神經，血管里的血液屬于結締組織，神經屬于神經組織．因此胃是由上皮組織、肌肉組織、結締組織和神經組織按照一定的次序結合在一起構成的一個器官。

類似地，這里的框架，就是常常說的開發腳手架，比如：vue-cli，iview-project，iview-admin，他們由各種組織（公共庫）組成。比如iview-project的介紹就是This project is build for Vue.js 2 + vue-router + webpack2 + iView 3，各個庫履行著各自的職責。

更類似的是，器官中的組織可以被替換，而腳手架中的庫也可以被取代。如果iview-project想把webpack換成其他構建工具，也要調研一下是否會發生“移植排斥”，“排斥反映”的嚴重程度是否能夠接受，移植完成后，也要對新組織慢慢作出一些“修改”，使其能與原器官相適配。

[ 風控前端的“器官” ]

系統就是“系統”

名詞解釋：能夠完成一種或者幾種生理功能的多個器官按照一定的次序組合在一起的結構叫做系統。

[ 生物學上的系統與我們開發的系統 ]

系統就是利用框架+庫+業務形成的具有一定功能的工具，它的組成有三種可能：

由腳手架再加各種庫組合而成

沒有用腳手架，自選各種庫組合而成

不用庫或者用很少庫，大多數代碼自定義生成

三種可能中，從1到3自定義程度越來越高，但工程化程度越來越低，它們的區別可以利用人體系統的工程化程度對比來分析優劣，如下圖：

[ 工程化 與 非工程化 ]

很明顯地，左側工程化的結構可以達到分工協作，層次分明，出了問題，生了病也可以很容易地找到問題所在點。而右側的非工程化結構中，雖然看似靈活多變，但是結構不穩定，問題出現后需要全流程排查。除了以上的幾個優缺點，兩者的差距還是非常大的。

整個業務形成了“個體”

[ 整個業務形成了“個體” ]

當一個個系統建成，整個業務形成后，將成為一個個體，相當于生物上的一個嬰兒。個體生成后，只是一個新的開始，仍然需要不斷地學習，成長，外部環境的變化，也會導致很多從外到內的變化。所以，無論我們的業務做得多么強大，框架做得多么成熟，仍然需要不斷地學習，成長。

在這個世界上，沒有一勞永逸的答案，也沒有完美的世界圖式。認為一個人、一個概念，一次訴訟就可以徹底解決現實問題，如果不是無知，就是智力上的懶惰。—— 柴靜《看見》

下圖是整個風控前端工程化的示意圖，整個從上到下就是從干細胞 -> DNA -> 組織 -> 器官 -> 系統 -> 個體 的一個結構，其中，為了保證個體的反饋正常，保持生物活性，我們在組織，器官部分加了自測，在系統層面也加了監控和測試，它們的反饋將有益于個體各個方面的“自我調節”。

[ 風控前端工程化 ]

前端工程化后還可以怎么發展？

如上文諸多舉例，我們的發展道路要“有所倚靠”。

隨著前端技術的飛速發展，我們前端開發似乎什么都要學，什么都要會。也有人曾經問我，你是不是遇到什么就學習什么？前端發展得這么快這么廣，我只能由衷地回答了一句“確實是啊”。

但是我們心里應該要知道的是，在如春筍般涌現的技術中，“有所倚靠”使我們可以少走一些彎路。我們需要倚靠科學的指導思想，去為新興領域指導與參謀。

自己做了一個庫，不知道好不好，拿出來開源又怕被人吐槽，就可以在生物學上類比一下，噢，我是不是缺個問題反饋機制？是不是缺個自我檢測機制？或者你覺得你已經做得足夠好了，還可以想想生物器官，輸入輸出是否足夠的方便？獨立性是否足夠好？可發展性是不是足夠強？

開發新框架 or 維護老框架？

生物世界的編程語言只有一種，那就是DNA，它既然可以成為億萬年間的唯一通用語言，那它的原理，它的運維肯定都有很多值得我們學習的地方。

用生物學的思維，去判斷“是否需要做個新框架？”，還有“怎么挖掘老框架的拓展點？”，其實也是很容易的。老框架之所以為“老”，是因為使用的語言過時了？還是功能不滿足現在的需要了？如果光是語言過時了，我們給他換個新語言去實現，那也只是老細胞分裂出新細胞，換湯不換藥。如果是功能不滿足了，我們也要先思考，到底是我們對框架不熟悉，基礎知識不夠，還是別的原因。

后記

在一年前的組內分享中，曾經試過把我們做的前端工程化比作建房子：

• 所依賴的框架比作地下室，
• 把PC端和移動端比作主臥和次臥，
• 把公共庫比作客廳，因為可以一起使用……

這種描述固然貼切且沒什么毛病，但受制于當時的人力物力眼力，主要體現了當時急于展現“我們有什么”。但讓人細思極恐的是，房子的大小是固定不變的啊，你只能在它里面添油加醋！若是照這樣發展下去，很快就可以看見天花板了，從而陷入焦慮。

而現在，模仿當年海明威寫一整篇《老人與海》去比喻去吐槽自己出作品的辛酸，我們也拿生物學去比喻，倚靠生物學去思考，以細胞生長作為喻體，則意味著我們的工程化，將是一個能夠自我管理，生長，傳承的過程。在長天大地中，生生不息，折騰不止。

總結

以上是生活随笔為你收集整理的从生物学的角度浅谈前端工程化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。