【精】如何把前端項(xiàng)目寫成一座屎山 ?
前言
最近幾年前端發(fā)展的非???,SPA的繁榮讓前端的工程化也越來(lái)越重。在很多場(chǎng)景下,前端的復(fù)雜度和難度也早已經(jīng)超過(guò)了后端。但快速的發(fā)展下,前端也逐漸暴露出了許多問(wèn)題。眾所周知,前端從業(yè)人員很少談程序的設(shè)計(jì)原則或設(shè)計(jì)思想。
設(shè)計(jì)模式也頂多是在八股面試時(shí)千篇一律的問(wèn)答“觀察者模式”和“發(fā)布訂閱者模式”?!皟?nèi)聚”和“解耦”這樣的詞語(yǔ)也很少?gòu)那岸俗炖锉某觥?br>
這就難免導(dǎo)致前端代碼寫成一座大屎山。而這還是在基于類MVVM框架開發(fā)模式的前提下,前端代碼天然具有了組件級(jí)別的抽象,如果是刀耕火種的MVC時(shí)代,更是難以想象。
同事負(fù)責(zé)的一個(gè)前端項(xiàng)目頻頻爆出bug,已經(jīng)到了修1個(gè)bug產(chǎn)生3個(gè)bug的程度,甚至很多bug無(wú)法定位。問(wèn)了同事原因,回答項(xiàng)目比較復(fù)雜。竊以為項(xiàng)目復(fù)雜不是寫成屎山的理由(舉一個(gè)極端的例子,你的項(xiàng)目再難再?gòu)?fù)雜也不會(huì)超過(guò)Chrome瀏覽器,那如果Chrome瀏覽器項(xiàng)目可以被維護(hù)的非常得體,難度更低的項(xiàng)目一定也能找到好的技術(shù)方案和架構(gòu)來(lái)應(yīng)對(duì)。)。
出于好奇大致瀏覽了這個(gè)項(xiàng)目的代碼,發(fā)現(xiàn)這就是一座典型的前端大屎山。除了作者本人應(yīng)該沒(méi)有任何人可以或愿意接住該項(xiàng)目,未來(lái)的命運(yùn)就只能是招個(gè)新人從0開始重構(gòu),甚至一行代碼都沒(méi)法參考(我經(jīng)歷過(guò)這事!)。
純粹從編寫軟件的角度,其實(shí)目前有很多成熟的代碼規(guī)范可以參考,甚至規(guī)范到變量命名等等。但這里我們暫且只討論前端這個(gè)領(lǐng)域的屎山堆積技巧。
精華教程
拒絕Ts
堅(jiān)決不用Ts,甚至將Ts寫的項(xiàng)目重構(gòu)成Js代碼。去年我被空降了一個(gè)leader(多年前就是阿里P7級(jí)別)。在看了一眼我維護(hù)的富文本編輯器項(xiàng)目之后,告訴我需要重構(gòu)該項(xiàng)目,重構(gòu)目標(biāo)是拋棄Ts,用Js重寫。我在糾結(jié)了好幾天之后,做出了一個(gè)艱難的決定。。。
拒絕hooks
所有組件都用Class組件,拒絕函數(shù)組件,拒絕hooks。
全面擁抱狀態(tài)管理器
所有狀態(tài)都通過(guò)類似Redux或Mobx等狀態(tài)管理器去管理。
不做模塊抽象和復(fù)用
每個(gè)功能都從0開始實(shí)現(xiàn),不抽象任何公共組件,不把高頻出現(xiàn)的邏輯抽象成hooks,不抽象出工具函數(shù),堅(jiān)決不復(fù)用任何邏輯。
把JSX結(jié)構(gòu)掰開揉碎
直接在JSX上寫長(zhǎng)函數(shù)和復(fù)雜參數(shù),至少需要達(dá)到一眼看上去稀碎,完全無(wú)法在腦中構(gòu)建出頁(yè)面的樣子。
編寫長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)的組件
一整個(gè)頁(yè)面只編寫1個(gè)組件去維護(hù),單個(gè)組件代碼行數(shù)輕松寫到1000行以上。
父子組件多傳參,盡可能多層傳遞
父組件給子組件傳非常多參數(shù),然后子組件繼續(xù)又將這些參數(shù)層層往下傳遞。
單文件開發(fā)
將狀態(tài)、數(shù)據(jù)、類型、工具函數(shù)、網(wǎng)絡(luò)請(qǐng)求和組件等等全部放入一個(gè)文件中。
打破文件組織結(jié)構(gòu)與組件結(jié)構(gòu)關(guān)系
雖然組件天然是一個(gè)多叉樹結(jié)構(gòu),但相應(yīng)的文件全部平鋪到1層。
不封裝網(wǎng)絡(luò)請(qǐng)求函數(shù)
每次請(qǐng)求都創(chuàng)建新的Axios實(shí)例,網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤不統(tǒng)一攔截,全部單獨(dú)catch。
樣式混用和強(qiáng)行覆蓋
內(nèi)聯(lián)樣式與css文件樣式混用和覆蓋。類名隨便起,不要透露結(jié)構(gòu)信息,相同的css代碼在各個(gè)類上直接復(fù)制黏貼一份。遇到?jīng)_突的樣式強(qiáng)行再覆蓋一層。
到處修改UI組件庫(kù)內(nèi)部樣式
為了達(dá)到設(shè)計(jì)要求,通過(guò)導(dǎo)出類名強(qiáng)行覆蓋UI組件庫(kù)的內(nèi)部css樣式,多用![]mportant魔法。
多用Js代替CSS實(shí)現(xiàn)效果
偽類偽元素等堅(jiān)決不用,動(dòng)畫過(guò)渡等效果也必須通過(guò)Js實(shí)現(xiàn)。
到處使用微前端
盡可能的把頁(yè)面拆成一個(gè)個(gè)單一功能的微前端應(yīng)用。
不要argue需求
對(duì)于產(chǎn)品或設(shè)計(jì)給到的需求全盤接受,盡力實(shí)現(xiàn)交互復(fù)雜混亂繁冗的功能,獲得技術(shù)成就感,做一只不挑食的小白兔。
評(píng)論區(qū)補(bǔ)充xdm看家絕技,聞?wù)呗錅I
作者:阿佛加德奔
https://juejin.cn/post/7086735198942920712
作者:阿佛加德奔
歡迎關(guān)注微信公眾號(hào) :前端開發(fā)愛(ài)好者