之前做開發(fā)的時候?qū)椖客耆珱]有一個整體的思考仆葡,需求來了就知道做,只關(guān)心自己做的那部分的功能追葡,做完拉到。但最近所做的項目中侈玄,遇到了不少問題,自己都忍不住吐槽起來了吟温。如:項目經(jīng)常性延期序仙、代碼冗余、添加一個很小的新功能都需要改動很多地方鲁豪,還對之前的代碼邏輯產(chǎn)生不小的影響潘悼。這使得我不得不對現(xiàn)有的項目進(jìn)行思考。
怎么樣才能把項目做的好一點(diǎn)或者更好爬橡?
首先治唤,在老板看來,他肯定希望今天提的需求可以立馬就上線堤尾。
然后肝劲,老板希望我們做出來的產(chǎn)品有很好的用戶體驗,有良好的性能郭宝。
最后辞槐,希望系統(tǒng)能夠穩(wěn)定運(yùn)行,出問題時能夠盡快修復(fù)粘室。
當(dāng)然榄檬,這只是我腦補(bǔ)出來的(我個人的想法,至于老板是不是這么想我就不清楚了)衔统。
從技術(shù)上來說就是:
- 可以快速搭建
- 擁有比較好的性能
- 邏輯清晰鹿榜,易于維護(hù)、拓展
- 快速解決線上問題
如何進(jìn)行快速搭建锦爵?
一舱殿、組件封裝:公共樣式、邏輯提取险掀。
有時候沪袭,我們需要做一個統(tǒng)一的自定義彈窗樣式,或者自定義的下拉框等樟氢。我們封裝成公共組件之后冈绊,其他地方需要用到時,只需引入組件和傳入數(shù)據(jù)即可使用埠啃,不需要再重復(fù)的去寫樣式或者邏輯死宣。有些甚至不需要設(shè)計再重新出圖,利用組件就可以完成我們的頁面開發(fā)了碴开。
封裝前:
多個頁面中毅该,同樣的頁面樣式和js邏輯無法復(fù)用博秫,需要在每個頁面中進(jìn)行代碼的復(fù)制粘貼,很可能會漏掉部分代碼眶掌。發(fā)生樣式或者js邏輯改動時需要每個頁面都改一遍台盯,很容易漏掉。
封裝后:
可進(jìn)行代碼復(fù)用畏线,多個頁面中静盅,同樣的頁面樣式和js邏輯直接引用封裝好的組件即可。發(fā)生樣式或者js邏輯改動時寝殴,只需要改一個地方即可蒿叠。
二、 項目的基礎(chǔ)搭建
新開一個項目的時候我們都需要先去做一些基礎(chǔ)搭建蚣常,比如說:項目目錄結(jié)構(gòu)市咽、登錄模塊封裝、http請求處理和其他輔助小工具等等抵蚊。這些東西我們可以做成一個npm包施绎,發(fā)到公司內(nèi)部的私有倉庫里,使用的時候直接一個npm install 就可以快速的完成項目的基礎(chǔ)搭建了贞绳。
邏輯清晰谷醉,易于維護(hù)、拓展
深入理解產(chǎn)品需求冈闭,將功能邏輯劃分俱尼,對應(yīng)成相應(yīng)的代碼邏輯:
- 哪一部分樣式可以封裝
- 哪一部分功能可以封裝
- 頁面里各個邏輯的關(guān)系:點(diǎn)擊一個按鈕,頁面中的其他展示要如何變動
- 各個頁面之間的邏輯關(guān)系:在當(dāng)前頁面操作萎攒,其他頁面需不需要做出相應(yīng)的變動
如果開發(fā)時不看需求文檔遇八,到了最后除了撕逼之外還得返工。
與其他功能模塊對接時盡量多考慮耍休,做成可拓展的通用模塊刃永。與某個模塊對接時,如何與當(dāng)前模塊完成對接是我們首要考慮的事情羊精∷构唬考慮完這方面的事情之后,我們還要考慮一下再有另外一個模塊或者多個模塊接入時我們要如何才能在代碼改動量最小的情況下進(jìn)行快速接入园匹。
關(guān)于注釋:
注釋是有必要的雳刺,這個對個人和他人都是有好處的劫灶。自己一個月之前寫的代碼裸违,沒有注釋再回去看時可能也不太懂,何況是別人呢本昏。
如果可以的話供汛,每個js文件的開頭簡單描述下當(dāng)面頁面的功能邏輯,讓維護(hù)的時候能快速的了解到當(dāng)前頁面上的東西。
關(guān)于文檔:
大家都去遵循一定的規(guī)范才能更好的去共同創(chuàng)造/維護(hù)一個東西怔昨,這些規(guī)范形成之后一定要遵循下去雀久。當(dāng)一個新的小伙伴加入到我們的時候,我們不可能把每一個規(guī)范都口頭的跟他講一般趁舀,我們自己也記不住那么多規(guī)范赖捌。所以,將這些規(guī)范整理成文檔很有必要矮烹,記不清楚或者不了解的時候可以重新去翻一翻越庇。還有我們封裝好的組件,其他人使用的時候也不可能花時間去看看你的源碼奉狈,或者總是來問你要怎么用卤唉。這樣會很浪費(fèi)大家的時間,阻礙整個項目的進(jìn)度仁期。所以桑驱,組件的用法、入?yún)?出參跛蛋、注意事項等等我們都需要再文檔里面描述清楚熬的。
擁有比較好的性能
根據(jù)當(dāng)前做的項目,使用的技術(shù)棧赊级,找出引起性能問題的點(diǎn)悦析,逐個進(jìn)行優(yōu)化。就拿我當(dāng)前做的這個原生小程序來說此衅,性能問題主要在以下幾點(diǎn):
- 頻繁的調(diào)用setData强戴。
- 在后臺進(jìn)行多個數(shù)據(jù)請求并進(jìn)行多個頁面setData操作。
- 首次加載小程序時包下載比較慢挡鞍。
解決方案
問題1: 避免頻繁的setData, 將可以合并的setData合并骑歹,不在頁面渲染的變量不在data里聲明,在page下的其他字段里聲明即可
問題2: 當(dāng)面頁面的改動需要刷新其他頁面時墨微,不需要立即對其他頁面進(jìn)行數(shù)據(jù)刷新的動作道媚,給需要刷新的頁面加個標(biāo)識,等到該頁面顯示時通過onShow聲明周期來判斷并刷新 數(shù)據(jù)翘县。
問題3: 使用小程序的分包加載最域,加載首頁時只需先下載分包即可,提高首頁加載速度锈麸。
快速解決線上問題
遇到線上的bug應(yīng)該快速的響應(yīng)和積極的定位問題出現(xiàn)的原因镀脂,從根本上去解決問題,而不是說這不是我的問題忘伞,我不用管薄翅。
盡早發(fā)現(xiàn)問題沙兰,在造成更大的影響之前解決問題:
自行搭建一個錯誤收集系統(tǒng),收集js腳本錯誤和接口請求錯誤的相關(guān)信息翘魄,為定位問題提供幫助鼎天,還可以根據(jù)錯誤的峰值來檢查當(dāng)前系統(tǒng)是否異常。怕麻煩暑竟,圖省事的還可以花錢使用fundebug斋射。
日前能想到和記得的就只有那么多吧, 先記著但荤,以免遺忘绩鸣。