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

為什么選擇生物學(xué)作為參照？

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

——傅盛

從模仿蝙蝠發(fā)明了雷達(dá)，模仿蜻蜓發(fā)明了直升飛機(jī)，再到物聯(lián)網(wǎng)（Internet of Things），機(jī)器學(xué)習(xí)，神經(jīng)網(wǎng)絡(luò)等，都是不同程度上的仿生學(xué)的實(shí)踐，由此可以看出生物學(xué)領(lǐng)域?qū)τ诳萍及l(fā)展的指導(dǎo)性和重要性。更發(fā)散地，生物學(xué)思維也可以用在你需要的任何地方。以下是一些參考文章：

• 《為什么互聯(lián)網(wǎng)大佬都偏愛生物學(xué)思維？》
• 《“生物學(xué)思維”透視互聯(lián)網(wǎng)時(shí)代下的商業(yè)模式變革》

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

• 前端為什么需要工程化？
• 我們?cè)鯓幼銮岸斯こ袒?#xff1f;
• 前端工程化后還可以怎么發(fā)展？

前端為什么需要工程化？

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

將系統(tǒng)化的、嚴(yán)格約束的、可量化的方法應(yīng)用于前端頁面的開發(fā)、運(yùn)行和維護(hù)，即將工程化應(yīng)用于前端開發(fā)。

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

雖然我們?nèi)祟惾晕刺街?xì)胞分化的根本原因，但其中的規(guī)律，就足以引導(dǎo)我們理解“前端工程化”的重要性，并鼓勵(lì)我們將其落實(shí)到“前端工程化”大大小小的方面。

我們?cè)鯓幼銮岸斯こ袒?#xff1f;

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

規(guī)范就是“DNA”

名詞解釋：DNA又稱去氧核糖核酸，是一種生物大分子，可組成遺傳指令，引導(dǎo)生物發(fā)育與生命機(jī)能運(yùn)作。主要功能是信息儲(chǔ)存，可比喻為“藍(lán)圖”或“配方”

現(xiàn)代前端的涉及范圍非常廣，但在實(shí)際工作中，無論你使用哪種技術(shù)棧，都離不開一定的規(guī)范。比如toB業(yè)務(wù)的特點(diǎn)不會(huì)是“酷炫”、“狂野”。業(yè)務(wù)特點(diǎn)加上設(shè)計(jì)規(guī)范，有機(jī)合成了核心的DNA，指導(dǎo)整個(gè)工程化里里外外的各種活動(dòng)。

[ 規(guī)范就是“DNA” ]

雖然不會(huì)每個(gè)團(tuán)隊(duì)都會(huì)有設(shè)計(jì)師，但是，我們心中必須有這種自覺性，去根據(jù)業(yè)務(wù)特點(diǎn)，去總結(jié)歸納出一套規(guī)范，因?yàn)檫@將是我們后面行動(dòng)的指導(dǎo)思想，從始至終貫穿著我們的工作。

像“風(fēng)控管理系統(tǒng)”的核心業(yè)務(wù)特點(diǎn)就是：嚴(yán)謹(jǐn)，重復(fù)，復(fù)雜。其中，嚴(yán)謹(jǐn)就包含了數(shù)據(jù)校驗(yàn)多，校驗(yàn)規(guī)則復(fù)雜等規(guī)范，這將指導(dǎo)我們做組件時(shí)需要考慮這些問題。像qf-js 方法庫里面的方法，就包含了很多業(yè)務(wù)核心需要的計(jì)算，校驗(yàn)等方法。

有了業(yè)務(wù)規(guī)范，那還需要設(shè)計(jì)規(guī)范，如果你說你們沒有設(shè)計(jì)師，那就拿設(shè)計(jì)史上最經(jīng)典的一些規(guī)范，比如一些通識(shí)性的規(guī)范：

CRAP原則：對(duì)比，重復(fù)，對(duì)齊，親密性 ——《寫給大家看的設(shè)計(jì)書》

尼爾森十大可用性原則

當(dāng)業(yè)務(wù)規(guī)范與設(shè)計(jì)規(guī)范一結(jié)合，就形成了前端工程化的DNA。

[ 風(fēng)控前端“DNA” ]

但別以為DNA定下來了就不變了，因?yàn)檫€有基因突變這回事。像風(fēng)控業(yè)務(wù)中，國(guó)家監(jiān)管的調(diào)控，公司業(yè)務(wù)的變化，都是“基因變化”的誘因。未搞清楚業(yè)務(wù)特點(diǎn)的，也可以通過觀察外部來慢慢塑造形成自己的“DNA”。

業(yè)務(wù)就是“干細(xì)胞”

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

[ 業(yè)務(wù)就是“干細(xì)胞” ]

這里的“業(yè)務(wù)”指的是整個(gè)小組或者是整個(gè)部門最核心的業(yè)務(wù)，我們常常都高度概括成兩三個(gè)字，比如在我們部門就是“風(fēng)控”。文字簡(jiǎn)單，但是我們的所做的一切都是圍繞這一個(gè)目標(biāo)進(jìn)行。這整個(gè)業(yè)務(wù)需求就是相當(dāng)于一個(gè)胚胎干細(xì)胞，幾乎所有各種細(xì)化需求，延伸業(yè)務(wù)都圍繞其展開。

“干細(xì)胞”攜帶著“DNA”，指導(dǎo)著后續(xù)細(xì)胞的生長(zhǎng)，活動(dòng)，繁衍。

工具庫類似“組織”

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

在“干細(xì)胞”業(yè)務(wù)中，從業(yè)務(wù)提煉分裂出一些公共的庫，公共庫是某一類功能相似或者負(fù)責(zé)某項(xiàng)功能的資源的集合，其作用和定位與生物結(jié)構(gòu)中的“組織”非常類似。比如：iView是vue組件的集合，Mint UI是移動(dòng)端組件庫的集合，AntV則是圖表工具的集合。

[ 工具庫類似“組織” ]

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

公共庫間的關(guān)系如下圖：

[ 風(fēng)控前端的“組織” ]

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

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

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

[ iView測(cè)試用例 ]

[ qfView測(cè)試用例 ]

框架用“器官”來比喻

名詞解釋：器官是由多種組織構(gòu)成的能行使一定功能的結(jié)構(gòu)單位。器官是生物體中自己具有一定功能，承擔(dān)生物體一 定的工作，是生物結(jié)構(gòu)層次中比組織高一級(jí)的層次。器官由各種組織構(gòu)成。

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

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

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

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

[ 風(fēng)控前端的“器官” ]

系統(tǒng)就是“系統(tǒng)”

名詞解釋：能夠完成一種或者幾種生理功能的多個(gè)器官按照一定的次序組合在一起的結(jié)構(gòu)叫做系統(tǒng)。

[ 生物學(xué)上的系統(tǒng)與我們開發(fā)的系統(tǒng) ]

系統(tǒng)就是利用框架+庫+業(yè)務(wù)形成的具有一定功能的工具，它的組成有三種可能：

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

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

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

三種可能中，從1到3自定義程度越來越高，但工程化程度越來越低，它們的區(qū)別可以利用人體系統(tǒng)的工程化程度對(duì)比來分析優(yōu)劣，如下圖：

[ 工程化 與 非工程化 ]

很明顯地，左側(cè)工程化的結(jié)構(gòu)可以達(dá)到分工協(xié)作，層次分明，出了問題，生了病也可以很容易地找到問題所在點(diǎn)。而右側(cè)的非工程化結(jié)構(gòu)中，雖然看似靈活多變，但是結(jié)構(gòu)不穩(wěn)定，問題出現(xiàn)后需要全流程排查。除了以上的幾個(gè)優(yōu)缺點(diǎn)，兩者的差距還是非常大的。

整個(gè)業(yè)務(wù)形成了“個(gè)體”

[ 整個(gè)業(yè)務(wù)形成了“個(gè)體” ]

當(dāng)一個(gè)個(gè)系統(tǒng)建成，整個(gè)業(yè)務(wù)形成后，將成為一個(gè)個(gè)體，相當(dāng)于生物上的一個(gè)嬰兒。個(gè)體生成后，只是一個(gè)新的開始，仍然需要不斷地學(xué)習(xí)，成長(zhǎng)，外部環(huán)境的變化，也會(huì)導(dǎo)致很多從外到內(nèi)的變化。所以，無論我們的業(yè)務(wù)做得多么強(qiáng)大，框架做得多么成熟，仍然需要不斷地學(xué)習(xí)，成長(zhǎng)。

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

下圖是整個(gè)風(fēng)控前端工程化的示意圖，整個(gè)從上到下就是從干細(xì)胞 -> DNA -> 組織 -> 器官 -> 系統(tǒng) -> 個(gè)體 的一個(gè)結(jié)構(gòu)，其中，為了保證個(gè)體的反饋正常，保持生物活性，我們?cè)诮M織，器官部分加了自測(cè)，在系統(tǒng)層面也加了監(jiān)控和測(cè)試，它們的反饋將有益于個(gè)體各個(gè)方面的“自我調(diào)節(jié)”。

[ 風(fēng)控前端工程化 ]

前端工程化后還可以怎么發(fā)展？

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

隨著前端技術(shù)的飛速發(fā)展，我們前端開發(fā)似乎什么都要學(xué)，什么都要會(huì)。也有人曾經(jīng)問我，你是不是遇到什么就學(xué)習(xí)什么？前端發(fā)展得這么快這么廣，我只能由衷地回答了一句“確實(shí)是啊”。

但是我們心里應(yīng)該要知道的是，在如春筍般涌現(xiàn)的技術(shù)中，“有所倚靠”使我們可以少走一些彎路。我們需要倚靠科學(xué)的指導(dǎo)思想，去為新興領(lǐng)域指導(dǎo)與參謀。

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

開發(fā)新框架 or 維護(hù)老框架？

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

用生物學(xué)的思維，去判斷“是否需要做個(gè)新框架？”，還有“怎么挖掘老框架的拓展點(diǎn)？”，其實(shí)也是很容易的。老框架之所以為“老”，是因?yàn)槭褂玫恼Z言過時(shí)了？還是功能不滿足現(xiàn)在的需要了？如果光是語言過時(shí)了，我們給他換個(gè)新語言去實(shí)現(xiàn)，那也只是老細(xì)胞分裂出新細(xì)胞，換湯不換藥。如果是功能不滿足了，我們也要先思考，到底是我們對(duì)框架不熟悉，基礎(chǔ)知識(shí)不夠，還是別的原因。

后記

在一年前的組內(nèi)分享中，曾經(jīng)試過把我們做的前端工程化比作建房子：

• 所依賴的框架比作地下室，
• 把PC端和移動(dòng)端比作主臥和次臥，
• 把公共庫比作客廳，因?yàn)榭梢砸黄鹗褂谩?/li>

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。