摘要：怎么樣才能把項(xiàng)目做的好一點(diǎn)或者更好首先，在老板看來(lái)，他肯定希望今天提的需求可以立馬就上線。關(guān)于注釋注釋是有必要的，這個(gè)對(duì)個(gè)人和他人都是有好處的。

之前做開(kāi)發(fā)的時(shí)候?qū)?xiàng)目完全沒(méi)有一個(gè)整體的思考，需求來(lái)了就知道做，只關(guān)心自己做的那部分的功能，做完拉到。但最近所做的項(xiàng)目中，遇到了不少問(wèn)題，自己都忍不住吐槽起來(lái)了。如：項(xiàng)目經(jīng)常性延期、代碼冗余、添加一個(gè)很小的新功能都需要改動(dòng)很多地方，還對(duì)之前的代碼邏輯產(chǎn)生不小的影響。這使得我不得不對(duì)現(xiàn)有的項(xiàng)目進(jìn)行思考。

怎么樣才能把項(xiàng)目做的好一點(diǎn)或者更好？
首先，在老板看來(lái)，他肯定希望今天提的需求可以立馬就上線。
然后，老板希望我們做出來(lái)的產(chǎn)品有很好的用戶體驗(yàn)，有良好的性能。
最后，希望系統(tǒng)能夠穩(wěn)定運(yùn)行，出問(wèn)題時(shí)能夠盡快修復(fù)。

當(dāng)然，這只是我腦補(bǔ)出來(lái)的（我個(gè)人的想法，至于老板是不是這么想我就不清楚了）。

從技術(shù)上來(lái)說(shuō)就是：

可以快速搭建

擁有比較好的性能

邏輯清晰，易于維護(hù)、拓展

快速解決線上問(wèn)題

一、組件封裝：公共樣式、邏輯提取。
有時(shí)候，我們需要做一個(gè)統(tǒng)一的自定義彈窗樣式，或者自定義的下拉框等。我們封裝成公共組件之后，其他地方需要用到時(shí)，只需引入組件和傳入數(shù)據(jù)即可使用，不需要再重復(fù)的去寫樣式或者邏輯。有些甚至不需要設(shè)計(jì)再重新出圖，利用組件就可以完成我們的頁(yè)面開(kāi)發(fā)了。
封裝前：
多個(gè)頁(yè)面中，同樣的頁(yè)面樣式和js邏輯無(wú)法復(fù)用，需要在每個(gè)頁(yè)面中進(jìn)行代碼的復(fù)制粘貼，很可能會(huì)漏掉部分代碼。發(fā)生樣式或者js邏輯改動(dòng)時(shí)需要每個(gè)頁(yè)面都改一遍，很容易漏掉。
封裝后：
可進(jìn)行代碼復(fù)用，多個(gè)頁(yè)面中，同樣的頁(yè)面樣式和js邏輯直接引用封裝好的組件即可。發(fā)生樣式或者js邏輯改動(dòng)時(shí)，只需要改一個(gè)地方即可。

二、 項(xiàng)目的基礎(chǔ)搭建
新開(kāi)一個(gè)項(xiàng)目的時(shí)候我們都需要先去做一些基礎(chǔ)搭建，比如說(shuō)：項(xiàng)目目錄結(jié)構(gòu)、登錄模塊封裝、http請(qǐng)求處理和其他輔助小工具等等。這些東西我們可以做成一個(gè)npm包，發(fā)到公司內(nèi)部的私有倉(cāng)庫(kù)里，使用的時(shí)候直接一個(gè)npm install 就可以快速的完成項(xiàng)目的基礎(chǔ)搭建了。

深入理解產(chǎn)品需求，將功能邏輯劃分，對(duì)應(yīng)成相應(yīng)的代碼邏輯：

哪一部分樣式可以封裝

哪一部分功能可以封裝

頁(yè)面里各個(gè)邏輯的關(guān)系：點(diǎn)擊一個(gè)按鈕，頁(yè)面中的其他展示要如何變動(dòng)

各個(gè)頁(yè)面之間的邏輯關(guān)系：在當(dāng)前頁(yè)面操作，其他頁(yè)面需不需要做出相應(yīng)的變動(dòng)

如果開(kāi)發(fā)時(shí)不看需求文檔，到了最后除了撕逼之外還得返工。

與其他功能模塊對(duì)接時(shí)盡量多考慮，做成可拓展的通用模塊。與某個(gè)模塊對(duì)接時(shí)，如何與當(dāng)前模塊完成對(duì)接是我們首要考慮的事情?？紤]完這方面的事情之后，我們還要考慮一下再有另外一個(gè)模塊或者多個(gè)模塊接入時(shí)我們要如何才能在代碼改動(dòng)量最小的情況下進(jìn)行快速接入。

關(guān)于注釋：
注釋是有必要的，這個(gè)對(duì)個(gè)人和他人都是有好處的。自己一個(gè)月之前寫的代碼，沒(méi)有注釋再回去看時(shí)可能也不太懂，何況是別人呢。
如果可以的話，每個(gè)js文件的開(kāi)頭簡(jiǎn)單描述下當(dāng)面頁(yè)面的功能邏輯，讓維護(hù)的時(shí)候能快速的了解到當(dāng)前頁(yè)面上的東西。

關(guān)于文檔：
大家都去遵循一定的規(guī)范才能更好的去共同創(chuàng)造/維護(hù)一個(gè)東西，這些規(guī)范形成之后一定要遵循下去。當(dāng)一個(gè)新的小伙伴加入到我們的時(shí)候，我們不可能把每一個(gè)規(guī)范都口頭的跟他講一般，我們自己也記不住那么多規(guī)范。所以，將這些規(guī)范整理成文檔很有必要，記不清楚或者不了解的時(shí)候可以重新去翻一翻。還有我們封裝好的組件，其他人使用的時(shí)候也不可能花時(shí)間去看看你的源碼，或者總是來(lái)問(wèn)你要怎么用。這樣會(huì)很浪費(fèi)大家的時(shí)間，阻礙整個(gè)項(xiàng)目的進(jìn)度。所以，組件的用法、入?yún)?出參、注意事項(xiàng)等等我們都需要再文檔里面描述清楚。

根據(jù)當(dāng)前做的項(xiàng)目，使用的技術(shù)棧，找出引起性能問(wèn)題的點(diǎn)，逐個(gè)進(jìn)行優(yōu)化。就拿我當(dāng)前做的這個(gè)原生小程序來(lái)說(shuō)，性能問(wèn)題主要在以下幾點(diǎn)：

頻繁的調(diào)用setData。

在后臺(tái)進(jìn)行多個(gè)數(shù)據(jù)請(qǐng)求并進(jìn)行多個(gè)頁(yè)面setData操作。

首次加載小程序時(shí)包下載比較慢。

解決方案
問(wèn)題1: 避免頻繁的setData, 將可以合并的setData合并，不在頁(yè)面渲染的變量不在data里聲明，在page下的其他字段里聲明即可
問(wèn)題2: 當(dāng)面頁(yè)面的改動(dòng)需要刷新其他頁(yè)面時(shí)，不需要立即對(duì)其他頁(yè)面進(jìn)行數(shù)據(jù)刷新的動(dòng)作，給需要刷新的頁(yè)面加個(gè)標(biāo)識(shí)，等到該頁(yè)面顯示時(shí)通過(guò)onShow聲明周期來(lái)判斷并刷新 數(shù)據(jù)。
問(wèn)題3: 使用小程序的分包加載，加載首頁(yè)時(shí)只需先下載分包即可，提高首頁(yè)加載速度。

遇到線上的bug應(yīng)該快速的響應(yīng)和積極的定位問(wèn)題出現(xiàn)的原因，從根本上去解決問(wèn)題，而不是說(shuō)這不是我的問(wèn)題，我不用管。
盡早發(fā)現(xiàn)問(wèn)題，在造成更大的影響之前解決問(wèn)題：
自行搭建一個(gè)錯(cuò)誤收集系統(tǒng)，收集js腳本錯(cuò)誤和接口請(qǐng)求錯(cuò)誤的相關(guān)信息，為定位問(wèn)題提供幫助，還可以根據(jù)錯(cuò)誤的峰值來(lái)檢查當(dāng)前系統(tǒng)是否異常。怕麻煩，圖省事的還可以花錢使用fundebug。

日前能想到和記得的就只有那么多吧， 先記著，以免遺忘。