面對(duì)重復(fù)的代碼、邏輯，如何提高開(kāi)發(fā)效率
在開(kāi)發(fā)迭代過(guò)程中，很多重復(fù)的代碼、邏輯讓會(huì)增加我們的工作量，讓我們很苦惱，面對(duì)這種情況，我們需要提高開(kāi)發(fā)效率，從重復(fù)中解放出來(lái)。
下面是面對(duì)重復(fù)的代碼、邏輯，如何提高開(kāi)發(fā)效率的一些解決方案，希望對(duì)大家有所幫助。
vscode中使用@沒(méi)有路徑提示
為了方便操作，我們經(jīng)常會(huì)在webpack中配置@指向項(xiàng)目的src目錄，但是vscode的路徑提示并不認(rèn)識(shí)@，導(dǎo)致寫(xiě)引入路徑時(shí)沒(méi)有提示，純手敲。
解決方案： 下載vscode插件Path Intellisense，并且在vscode setting文件中如下配置即可：
引入公共組件的代碼很繁瑣
公共組件每次使用的時(shí)候，都需要寫(xiě)引入的代碼：
- import Material from '@
- /components/common/Material'
解決方案： 把公共組件注冊(cè)成全局組件，就可以節(jié)省引入組件的工作量。
- // 注冊(cè)全局公共組件
- let context = require.context('@/components/common/', true, /\.vue$/)
- context.keys().map(key => {
- const component = context(key).default
- Vue.component(component.name, component)
- })
這里用到了require.context，根據(jù)公共組件目錄來(lái)引入所有的公共組件
使用公共組件的代碼很繁瑣
我們使用一個(gè)組件時(shí)，它的組件名、傳參、自定義事件等都需要手敲，如下：
- <Material
- title="議題材料"
- :materials.sync="material"
- :annotation.sync="annotation"
- :vAuth="() => 35"
- />
解決方案：
公共組件的代碼中，維護(hù)一個(gè)組件使用demo，以供使用時(shí)快速?gòu)?fù)制。以前的工作量減少到了只需要復(fù)制、修改綁定值即可。強(qiáng)烈建議在團(tuán)隊(duì)中執(zhí)行。
維護(hù)一個(gè)公共組件的文檔、示例頁(yè)
提供了以下功能：
- 維護(hù)組件的出參、入?yún)ⅰ⒎椒?。?dāng)然維護(hù)這些信息需要很大的精力，而且這些信息很容易落后于代碼。
- 但我創(chuàng)建組件文檔頁(yè)的主要目的，是為了讓開(kāi)發(fā)者了解到，當(dāng)前項(xiàng)目有哪些已經(jīng)封裝的組件，并且很直觀的看到它是什么樣子并且實(shí)現(xiàn)了什么功能。避免因?yàn)椴涣私?，而重?fù)開(kāi)發(fā)或者造輪子，讓公共組件發(fā)揮更大的價(jià)值。
- 提供demo代碼的復(fù)制功能，快捷引入組件，減少使用組件的工作量
- 沒(méi)有使用vuepress等框架： 為了把文檔頁(yè)整合進(jìn)項(xiàng)目中，而不是一個(gè)單獨(dú)的項(xiàng)目，這樣維護(hù)、瀏覽時(shí)很方便 對(duì)比與框架，這樣開(kāi)發(fā)便捷，自定義不受限制
有一些代碼片段，出現(xiàn)的很頻繁
項(xiàng)目開(kāi)發(fā)中，會(huì)發(fā)現(xiàn)一段js邏輯、html，在某種場(chǎng)景下，出現(xiàn)的很頻繁，但他們其實(shí)已經(jīng)很簡(jiǎn)潔，又不需要再去二次封裝，所以我們可以使用vscode的snippets來(lái)幫助我們節(jié)省工作量。 但vscode原生的snippets的使用體驗(yàn)非常不好：
我們需要把代碼根據(jù)逗號(hào)按行分隔開(kāi)作為輸入，不僅工作量很大，而且代碼這樣處理后已經(jīng)無(wú)法直觀地理解。
根據(jù)經(jīng)驗(yàn)，你能發(fā)現(xiàn)的問(wèn)題，一般情況下早已有了解決方案：
我們可以使用插件——snippets，它可以很快捷方便的新建、編輯、插入代碼片段。
