如何把前端項(xiàng)目寫成一座屎山？

大廠技術(shù)??高級前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

作者：阿佛加德奔

原文：https://juejin.cn/post/7086735198942920712

前言

最近幾年前端發(fā)展的非?？?，SPA的繁榮讓前端的工程化也越來越重。在很多場景下，前端的復(fù)雜度和難度也早已經(jīng)超過了后端。但快速的發(fā)展下，前端也逐漸暴露出了許多問題。眾所周知，前端從業(yè)人員很少談程序的設(shè)計原則或設(shè)計思想。設(shè)計模式也頂多是在八股面試時千篇一律的問答“觀察者模式”和“發(fā)布訂閱者模式”?！皟?nèi)聚”和“解耦”這樣的詞語也很少從前端嘴里蹦出。

這就難免導(dǎo)致前端代碼寫成一座大屎山。而這還是在基于類MVVM框架開發(fā)模式的前提下，前端代碼天然具有了組件級別的抽象，如果是刀耕火種的MVC時代，更是難以想象。

同事負(fù)責(zé)的一個前端項(xiàng)目頻頻爆出bug，已經(jīng)到了修1個bug產(chǎn)生3個bug的程度，甚至很多bug無法定位。問了同事原因，回答項(xiàng)目比較復(fù)雜。竊以為項(xiàng)目復(fù)雜不是寫成屎山的理由（舉一個極端的例子，你的項(xiàng)目再難再復(fù)雜也不會超過Chrome瀏覽器，那如果Chrome瀏覽器項(xiàng)目可以被維護(hù)的非常得體，難度更低的項(xiàng)目一定也能找到好的技術(shù)方案和架構(gòu)來應(yīng)對。）。

出于好奇大致瀏覽了這個項(xiàng)目的代碼，發(fā)現(xiàn)這就是一座典型的前端大屎山。除了作者本人應(yīng)該沒有任何人可以或愿意接住該項(xiàng)目，未來的命運(yùn)就只能是招個新人從0開始重構(gòu)，甚至一行代碼都沒法參考（我經(jīng)歷過這事?。?。

純粹從編寫軟件的角度，其實(shí)目前有很多成熟的代碼規(guī)范可以參考，甚至規(guī)范到變量命名等等。但這里我們暫且只討論前端這個領(lǐng)域的屎山堆積技巧。

精華教程

• 拒絕Ts

堅決不用Ts，甚至將Ts寫的項(xiàng)目重構(gòu)成Js代碼。去年我被空降了一個leader（多年前就是阿里P7級別）。在看了一眼我維護(hù)的富文本編輯器項(xiàng)目之后，告訴我需要重構(gòu)該項(xiàng)目，重構(gòu)目標(biāo)是拋棄Ts，用Js重寫。我在糾結(jié)了好幾天之后，做出了一個艱難的決定。。。

• 拒絕hooks

所有組件都用Class組件，拒絕函數(shù)組件，拒絕hooks。

• 全面擁抱狀態(tài)管理器

所有狀態(tài)都通過類似Redux或Mobx等狀態(tài)管理器去管理。

• 不做模塊抽象和復(fù)用

每個功能都從0開始實(shí)現(xiàn)，不抽象任何公共組件，不把高頻出現(xiàn)的邏輯抽象成hooks，不抽象出工具函數(shù)，堅決不復(fù)用任何邏輯。

• 把JSX結(jié)構(gòu)掰開揉碎

直接在JSX上寫長函數(shù)和復(fù)雜參數(shù)，至少需要達(dá)到一眼看上去稀碎，完全無法在腦中構(gòu)建出頁面的樣子。

• 編寫長長長長長的組件

一整個頁面只編寫1個組件去維護(hù)，單個組件代碼行數(shù)輕松寫到1000行以上。

• 父子組件多傳參，盡可能多層傳遞

父組件給子組件傳非常多參數(shù)，然后子組件繼續(xù)又將這些參數(shù)層層往下傳遞。

• 單文件開發(fā)

將狀態(tài)、數(shù)據(jù)、類型、工具函數(shù)、網(wǎng)絡(luò)請求和組件等等全部放入一個文件中。

• 打破文件組織結(jié)構(gòu)與組件結(jié)構(gòu)關(guān)系

雖然組件天然是一個多叉樹結(jié)構(gòu)，但相應(yīng)的文件全部平鋪到1層。

• 不封裝網(wǎng)絡(luò)請求函數(shù)

每次請求都創(chuàng)建新的Axios實(shí)例，網(wǎng)絡(luò)請求錯誤不統(tǒng)一攔截，全部單獨(dú)catch。

• 樣式混用和強(qiáng)行覆蓋

內(nèi)聯(lián)樣式與css文件樣式混用和覆蓋。類名隨便起，不要透露結(jié)構(gòu)信息，相同的css代碼在各個類上直接復(fù)制黏貼一份。遇到?jīng)_突的樣式強(qiáng)行再覆蓋一層。

• 到處修改UI組件庫內(nèi)部樣式

為了達(dá)到設(shè)計要求，通過導(dǎo)出類名強(qiáng)行覆蓋UI組件庫的內(nèi)部css樣式，多用![]mportant魔法。

• 多用Js代替CSS實(shí)現(xiàn)效果

偽類偽元素等堅決不用，動畫過渡等效果也必須通過Js實(shí)現(xiàn)。

• 到處使用微前端

盡可能的把頁面拆成一個個單一功能的微前端應(yīng)用。

• 不要argue需求

對于產(chǎn)品或設(shè)計給到的需求全盤接受，盡力實(shí)現(xiàn)交互復(fù)雜混亂繁冗的功能，獲得技術(shù)成就感，做一只不挑食的小白兔。

• 評論區(qū)補(bǔ)充xdm看家絕技，聞?wù)呗錅I

收益

• 每次提交上線，產(chǎn)品測試后端都圍著你充當(dāng)鼓勵師，唯恐出現(xiàn)生產(chǎn)事故大家一起背3.25警告。
• 每天都看起來非常忙，大家排隊求你分一點(diǎn)時間處理各種技術(shù)問題，都哭著叫你大佬，飽受尊敬。
• 老板對你印象深刻，認(rèn)為是個技術(shù)牛逼的救火隊員，夸你勤奮不摸魚下班晚，周報總是滿滿當(dāng)當(dāng)。
• 公司地位無可撼動，除了你這個項(xiàng)目沒人有能力或愿意接住，只能給你加錢，生怕你離職。

一則舊聞

魏文王問扁鵲：“你們家兄弟 3 人，都精于醫(yī)術(shù)，到底哪一位最好呢 ? ” 扁鵲答：“我的大哥醫(yī)術(shù)最好，二哥次之，我最差?！?文王再問：“那么為什么你最出名呢 ? ” 扁鵲答道：“我大哥治病，是治病于病情發(fā)作之前的時候，由于一般人不知道他能事先鏟除病因，反而覺得他的治療沒什么明顯的效果，所以他的名氣無法傳出去，只有我們家的人才知道。我二哥治病，是治病于病情初起的時候，看上去以為他只能治輕微的小病，所以他的名氣只能在我們鄉(xiāng)里流傳。而我扁鵲治病，是治病于病情已經(jīng)嚴(yán)重的時候。一般人看到我在經(jīng)脈上穿針放血，在皮膚上敷藥，用麻藥讓人昏迷，做的都是些不可思議的大手術(shù)，自然以為我的醫(yī)術(shù)高明，因此名氣響遍全國，遠(yuǎn)遠(yuǎn)大于我的兩位哥哥?！?/p>

xdm，還有什么堆屎效果奇佳的好手段？可以留言補(bǔ)充啊！

Node 社群



我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。


如果你覺得這篇內(nèi)容對你有幫助，我想請你幫我2個小忙：
1. 點(diǎn)個「在看」，讓更多人也能看到這篇文章
2. 訂閱官方博客?www.inode.club?讓我們一起成長

點(diǎn)贊和在看就是最大的支持