背景
??最近一個(gè)多月完成了公司的一個(gè)攻堅(jiān)戰(zhàn)項(xiàng)目工猜，項(xiàng)目?jī)?nèi)容就是對(duì)于公司現(xiàn)有業(yè)務(wù)的一個(gè)大版本的迭代。我負(fù)責(zé)的主要內(nèi)容是其中的三個(gè)模塊币狠，內(nèi)容不多游两，但是有些地方邏輯很繞。通過(guò)這次開發(fā)漩绵，攢下來(lái)了一些經(jīng)驗(yàn)贱案，特此記錄下來(lái)。
開發(fā)前的準(zhǔn)備
??做開發(fā)切記不要急躁止吐，道理就擺在這里宝踪，但是大多數(shù)人都做不到侨糟，我也是一樣。所以在開發(fā)之前需要做到兩件事：
- 看產(chǎn)品原型瘩燥，了解清楚需求邏輯秕重，并就模糊的地方與產(chǎn)品仔細(xì)溝通。這里要注意的是一些UI樣式要在這里與產(chǎn)品確認(rèn)好厉膀，例如頁(yè)面滾動(dòng)區(qū)域的高度等等溶耘。
- 畫思維導(dǎo)圖，拆分需求為一個(gè)個(gè)小的點(diǎn)站蝠，后續(xù)在開發(fā)中并實(shí)時(shí)同步汰具，這樣確保開發(fā)過(guò)程中考慮的更加全面卓鹿。同時(shí)在開發(fā)過(guò)程中遇到的問(wèn)題和其他待確定的東西菱魔，都可以同步到思維導(dǎo)圖上面去。從而保持整個(gè)開發(fā)思維上的完整吟孙，既有利于梳理思路也有利于后期修復(fù)bug澜倦。
開發(fā)前的準(zhǔn)備
?在這里反思一下自己做的不好的地方。這次開發(fā)我負(fù)責(zé)其中3個(gè)模塊A杰妓、B和C藻治，復(fù)雜度依次遞增。我從最簡(jiǎn)單的模塊A進(jìn)行開發(fā)巷挥，畫好了思維導(dǎo)圖桩卵，拆分了需求，解決了遇到的問(wèn)題倍宾，開發(fā)過(guò)程很順利雏节。再然后就是難度中等模塊B，開發(fā)過(guò)程中很順利高职。但是后續(xù)產(chǎn)品驗(yàn)收和上線的時(shí)候出了問(wèn)題钩乍，其中一些地方?jīng)]有考慮的深入貼合原型圖。甩鍋可以甩給原型沒(méi)說(shuō)清楚怔锌，但是自己還是明白寥粹，當(dāng)時(shí)自己圖省事沒(méi)有與對(duì)應(yīng)產(chǎn)品進(jìn)行仔細(xì)溝通。腦子里沒(méi)有做到全局層面上的考慮埃元，這對(duì)于前端開發(fā)談不上是一個(gè)大的缺點(diǎn)涝涤，但是如果后續(xù)提高自己的技術(shù)，學(xué)會(huì)從不同角度考慮需求岛杀，做到全面的審視整個(gè)產(chǎn)品是很重要的能力妄痪。引以為戒，全面考慮楞件，注重細(xì)微衫生。
?最后開發(fā)的是模塊C裳瘪，對(duì)應(yīng)后端很給力，基本沒(méi)有出現(xiàn)bug罪针。但是我前端這邊出了不少問(wèn)題彭羹，樣式上和兼容性上面。事后反思出了上面所講的偷懶不愿意多考慮細(xì)節(jié)之外泪酱，沒(méi)有對(duì)于邊界條件和不同機(jī)型的變化做一個(gè)「兼容性考慮」派殷。前端畫頁(yè)面，瀏覽器往往是不可信的墓阀，唯一值得相信的就是真機(jī)運(yùn)行毡惜。所以第二個(gè)得到的教訓(xùn)是開發(fā)過(guò)程中，使用真機(jī)測(cè)試斯撮，并且考慮邊界情況经伙，不要拖到測(cè)試提bug。
??好記性不如爛筆頭勿锅，這是這段時(shí)間我理解較深的一句話帕膜。人貴在有智慧，懂得利用工具改變做事情的難度溢十。對(duì)于這些可以利用外在工具進(jìn)行存儲(chǔ)的地方垮刹，就要大膽地利用，從而對(duì)自己的生活帶來(lái)便利性张弛。不要每一件東西都要努力記住荒典，人的大腦一時(shí)間是記不住很多東西的，就算記住了很快也就忘記了吞鸭。需要記住的是思想寺董，考慮問(wèn)題的思維方式和角度。
開發(fā)中的一些體會(huì)
??開發(fā)過(guò)程和以前開發(fā)基本是一樣的瞒大，但也有一些心得體會(huì)螃征。
??1. 在實(shí)踐中學(xué)習(xí)的知識(shí)是最牢固的。之前學(xué)習(xí)技術(shù)知識(shí)點(diǎn)透敌，要么看書敲demo盯滚，要么看視頻跟著學(xué)。這樣學(xué)習(xí)的好處是系統(tǒng)化酗电，缺點(diǎn)是不一定適合自己魄藕，一段時(shí)間后如果沒(méi)有使用，也漸漸淡忘了撵术。這次開發(fā)中背率，部門內(nèi)部推行了統(tǒng)一的git分支管理。其中最重要的就是使用cherry-pick(遴選)這個(gè)命令，保證了每個(gè)分支上commit的規(guī)范與完整性寝姿。在此之前交排，我對(duì)于git的使用很生疏，有點(diǎn)畏懼使用饵筑，因?yàn)樾睦锱掳汛a搞壞埃篓。經(jīng)過(guò)這次開發(fā)之后，對(duì)于git的熟練度上升了一個(gè)level根资。在實(shí)踐中學(xué)習(xí)知識(shí)架专，越是重要的實(shí)踐，學(xué)習(xí)到的知識(shí)越會(huì)牢牢記住玄帕。
??2. 靈活使用組件庫(kù)部脚，但不要依賴組件庫(kù)。前端開發(fā)中裤纹，不可避免地會(huì)使用組件庫(kù)委刘。原因是重復(fù)造輪子，自己寫一個(gè)交互效果要花費(fèi)很多時(shí)間并且不一定效果很好服傍。倒不如直接使用現(xiàn)有的組件庫(kù)钱雷，幾分鐘就能得到想要的效果骂铁。但是組件庫(kù)的使用也存在問(wèn)題吹零，這些問(wèn)題卻有意無(wú)意地被我們忽略。首先最淺顯的問(wèn)題就是拉庵，組件庫(kù)的樣式不一定是我們想要的灿椅。組件庫(kù)的通用性，就天然注定了具體項(xiàng)目中樣式的不適合钞支。我們需要在其基礎(chǔ)上進(jìn)行一些修改茫蛹，組件庫(kù)一般有著自己的scope，用來(lái)避免外來(lái)樣式的污染烁挟。遇到這種情況婴洼，首先需要打開控制臺(tái)，定位到具體dom元素撼嗓，找到對(duì)應(yīng)的class名柬采，在嘗試使用/deep/進(jìn)行樣式的重寫。
??除此之外且警，這次開發(fā)正式上線的那一刻遇到了組件庫(kù)的另一個(gè)問(wèn)題粉捻。那就是組件庫(kù)的樣式真機(jī)上出現(xiàn)bug，定位了多次還沒(méi)解決斑芜。最后再同事的幫助下肩刃，解決了。解決方案就是不完全使用組件庫(kù)提供的組件，部分內(nèi)容可以自己寫盈包。后面同事告訴我沸呐，組件庫(kù)忌諱的是嵌套層次太深，造成樣式的彼此覆蓋呢燥。以后使用組件庫(kù)時(shí)垂谢，能自己寫的就自己寫，不能自己寫的也要避免dom的層次不要太深疮茄。
??3. 使用合適的工具提高開發(fā)效率滥朱。以前對(duì)于這些話有點(diǎn)不以為然，心里覺(jué)得那些小工具沒(méi)什么太大用力试，自己也能做到徙邻。但這樣想其實(shí)是錯(cuò)誤的，開發(fā)中小工具的使用目的是保持思維的連貫性畸裳，使得不被無(wú)關(guān)的事情干擾缰犁。舉個(gè)例子，谷歌瀏覽器的Vue-devtools插件能夠在頁(yè)面中實(shí)時(shí)看到數(shù)據(jù)怖糊，這在調(diào)試的時(shí)候很有用帅容，避免一次次使用console.log大法，省下了時(shí)間去全神貫注解決bug伍伤。還有vscode中一些有用插件的使用很有幫助并徘，git-history插件直觀的展示了不同分支的commit情況，便于我們進(jìn)行g(shù)it操作扰魂，再也不擔(dān)心出錯(cuò)啦麦乞。
??4. 學(xué)習(xí)吸收別人的代碼思維和代碼風(fēng)格。在大項(xiàng)目開發(fā)過(guò)程中劝评，難免需要團(tuán)隊(duì)多人協(xié)作開發(fā)姐直。這也就難免會(huì)看到別人開發(fā)的代碼，首先不要害怕別人看到你的shit一樣的代碼蒋畜，或許人家早就習(xí)慣了呢声畏？大大方方寫代碼，看看別人的代碼書寫風(fēng)格姻成，覺(jué)得漂亮的就吸收過(guò)來(lái)插龄。一些邏輯用的很妙的地方，認(rèn)真請(qǐng)教學(xué)過(guò)來(lái)佣渴。將別人的長(zhǎng)處吸收辫狼，有意的形成自己的代碼規(guī)范和開發(fā)風(fēng)格。不練級(jí)辛润，怎么以后能升級(jí)呢膨处？
??5. 思考積累自己的代碼片段见秤。在開發(fā)過(guò)程中會(huì)遇到很多問(wèn)題，有的問(wèn)題同事已經(jīng)有了成熟的解決方案真椿，有的問(wèn)題還沒(méi)有鹃答。遇到問(wèn)題那就搜索找到問(wèn)題的解決辦法，最后將解決方法吸收突硝，存入自己的問(wèn)題解決庫(kù)测摔，積少成多，這就是以后自己的解決問(wèn)題的能力解恰。
結(jié)束的思考
??人都是懶的锋八，人都是喜歡好的東西。但是好的東西之所以號(hào)护盈，其中一個(gè)原因在于難以得到挟纱。為了得到好的東西需要付出努力，大多數(shù)人不是不知道這個(gè)道理腐宋，但是總是心存僥幸紊服，想要找到捷徑。結(jié)果就是時(shí)間過(guò)去了胸竞，人也荒廢了欺嗤，然后慢慢低頭屈服。最大的捷徑就是一點(diǎn)點(diǎn)辛苦的付出汗水卫枝，只此而已煎饼。
