如果說后端的特點(diǎn)是以數(shù)據(jù)為核心媳拴，那么前端的特點(diǎn)就是能在保證穩(wěn)定性的基礎(chǔ)上做的快速迭代
如何做到穩(wěn)定呢黄橘？以下是自己的總結(jié)
1. 將組件原子化
按功能來說就是一個(gè)組件的功能越單一越好，比如下圖搜索欄
功能單一則不易出bug屈溉，也有利于組件的組合復(fù)用塞关，拼接成功能復(fù)雜的組件
2. 明確組件的應(yīng)用場景（一個(gè)組件只對應(yīng)一種場景）
參考上圖，某天要改成另一個(gè)場景要怎么辦子巾？帆赢，在原組件上改小压，加參數(shù)判斷？如果傳1就顯示第一個(gè)椰于，如果傳2就顯示第二個(gè)怠益？還是另外新建一個(gè)組件？
我更推薦第二種方法瘾婿，如果在原組件上改很可能導(dǎo)致其他應(yīng)用了該組件的場景產(chǎn)生新的bug（風(fēng)險(xiǎn)很大）,如果類似的改變多了蜻牢，原組件會變得很臃腫、無法維護(hù)
但是直接新建一個(gè)組件也會導(dǎo)致新的問題偏陪，如果兩個(gè)場景功能類似抢呆，就會產(chǎn)生大量的重復(fù)代碼
比較上下兩張圖片我們會發(fā)現(xiàn)，兩張圖片只是外觀變了笛谦，相同的是要實(shí)現(xiàn)搜索
所以我們可以再以上兩個(gè)應(yīng)用場景的基礎(chǔ)上抽離出一個(gè)基礎(chǔ)搜索欄組件
看完代碼抱虐，要實(shí)現(xiàn)場景二的功能最好的方法是：基于基礎(chǔ)組件重寫一個(gè)組件，也可以重寫場景一組件slot（不推薦）
3. 歸納用戶的操作流程
寫代碼之前必須要做的事情饥脑，預(yù)防有未覆蓋的用戶操作梯码，如圖
4. 梳理邏輯，讓每一步都可預(yù)期
- 熟知每一行代碼好啰，怕忘記就加注釋
-
必須保證代碼的執(zhí)行順序轩娶，一般情況下隊(duì)列調(diào)用優(yōu)先級Promise.then(非異步)>setTimeout(默認(rèn)30ms)>異步
例如a依賴b，則b必須在a之前執(zhí)行
盡量少將有嚴(yán)格流程規(guī)定的代碼放入watch()監(jiān)聽框往、change事件中執(zhí)行鳄抒。例如場景一中的時(shí)間選擇組件,因?yàn)樗阉魇录强縞hange觸發(fā)，就導(dǎo)致流程很不好控制椰弊，
比如：第n次進(jìn)入組件時(shí)许溅，我希望清空搜索條件，然后在執(zhí)行查詢秉版，但是change事件的觸發(fā)條件是文本框內(nèi)的內(nèi)容改變了才會觸發(fā)贤重，這是不可預(yù)期的，比起change我更希望是click清焕；組件內(nèi)過多的用watch也是同樣的道理
image.png
5. 寫代碼
注重規(guī)范
6. 測試
注重基礎(chǔ)組件的測試
7. 寫使用文檔
文檔是給自己看的也是給團(tuán)隊(duì)看的
