在開(kāi)發(fā)迭代過(guò)程中，很多重復(fù)的代碼、邏輯讓會(huì)增加我們的工作量，讓我們很苦惱，面對(duì)這種情況，我們需要提高開(kāi)發(fā)效率，從重復(fù)中解放出來(lái)。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有榕江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

下面是面對(duì)重復(fù)的代碼、邏輯，如何提高開(kāi)發(fā)效率的一些解決方案，希望對(duì)大家有所幫助。

vscode中使用@沒(méi)有路徑提示

為了方便操作，我們經(jīng)常會(huì)在webpack中配置@指向項(xiàng)目的src目錄，但是vscode的路徑提示并不認(rèn)識(shí)@，導(dǎo)致寫引入路徑時(shí)沒(méi)有提示，純手敲。

解決方案： 下載vscode插件Path Intellisense，并且在vscode setting文件中如下配置即可：

引入公共組件的代碼很繁瑣

公共組件每次使用的時(shí)候，都需要寫引入的代碼：

 
 
 
 

  
  
  
  
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í)，它的組件名、傳參、自定義事件等都需要手敲，如下：

 
 
 
 

  
  
  
  

  
  
  
  
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，它可以很快捷方便的新建、編輯、插入代碼片段。

本文題目：面對(duì)重復(fù)的代碼、邏輯，如何提高開(kāi)發(fā)效率
標(biāo)題來(lái)源：http://uogjgqi.cn/article/dpsceds.html