如何充分利用Composition API對Vue3項目進行代碼抽離

本文代碼略多，希望大家耐心觀看

背景介紹

在2020年，Vue3的學習一直被我鴿到了11月份，在學完以後，我自己做了一個Vue3的小項目nav-url，也整理了我對於如何快速上手Vue3的幾篇博客，很高興受到了大家的指點和喜歡：

• 自己設計的Vue3的實用項目（內含對項目亮點的實現思路與介紹）(237+ 個👍)

• 公衆號：前端印象
• 不定時有送書活動，記得關注~
• 關注後回覆對應文字領取：【面試題】、【前端必看電子書】、【數據結構與算法完整代碼】、【前端技術交流羣】

在上一篇博客中，我詳細介紹了一下我發的第一版項目的特色、亮點以及所有核心功能的實現，希望大家可以前往閱讀體驗一下（記得用電腦打開，因爲這是一個PC端的項目）

然而，這項目只是實現了一些功能，但我感覺並沒有很好地利用Composition API去對代碼進行整合管理。要知道，Composition API的出現就是爲了解決Options API導致相同功能代碼分散的現象，也有很多大佬對其做了很多的動畫展示（這裏我借用一下大帥搞全棧大佬精心製作的動畫，他的這篇文章可以說是好評連連，大家可以觀摩一下：做了一夜動畫，就爲讓大家更好的理解Vue3的Composition Api）

看了一下我項目初版的代碼，簡直是沒有體現出Composition API的優勢，可以給大家看一下某個組件內的代碼

<template>
  <aside id="tabs-container">
      <div id="logo-container">
          {
  
  { navInfos.navName }}
      </div>
      <ul id="tabs">
          <li class="tab tab-search" @click="showSearch">
              <i class="fas fa-search tab-icon"/>
              <span>快速搜索</span>
          </li>
          <li class="tab tab-save" @click="showSaveConfigAlert">
              <i class="fas fa-share-square tab-icon"></i>
              <span>保存配置</span>
          </li>
          <li class="tab tab-import" @click="showImportConfigAlert">
              <i class="fas fa-cog tab-icon"></i>
              <span>導入配置</span>
          </li>
          <br>
          <li v-for="(item, index) in navInfos.catalogue" 
              :key="index"
              class="tab"
              @click="toID(item.id)">
                <span class="li-container">
                  <i :class="['fas', `fa-${item.icon}`, 'tab-icon']" />
                  <span>{
  
  { item.name }}</span>
                  <i class="fas fa-angle-right tab-icon tab-angle-right"/>
                </span>
          </li>
          <li class="tab add-tab" @click="addTabShow">
              <i class="fas fa-plus"/>
          </li>
      </ul>
      <!--    添加標籤彈框     -->
      <tabAlert />
      <!--    保存配置彈框     -->
      <save-config @closeSaveConfigAlert="closeSaveConfigAlert" :isShow="isShowSaveAlert"/>
      <!--    導入配置彈框     -->
      <import-config @closeImportConfigAlert="closeImportConfigAlert" :isShow="isShowImportAlert"/>
  </aside>
</template>

<script>
import {
    
    ref} from 'vue'
import {
    
    useStore} from 'vuex'
import tabAlert from '../public/tabAlert/tabAlert'
import saveConfig from './childCpn/saveConfig'
import importConfig from './childCpn/importConfig'
export default {
    
    
    name: 'tabs',
    components: {
    
    
        tabAlert,
        saveConfig,
        importConfig
    },
    setup() {
    
    
        const store = useStore()     
        let navInfos = store.state    // Vuex的state對象
        let isShowSaveAlert = ref(false)           // 保存配置彈框是否展示
        let isShowImportAlert = ref(false)         // 導入配置彈框是否展示
        
        // 展示"添加標籤彈框"
        function addTabShow() {
    
    
            store.commit('changeTabInfo', [
                {
    
    key: 'isShowAddTabAlert', value: true},
                {
    
    key: 'alertType', value: '新增標籤'}
            ])
        }
        // 關閉"保存配置彈框"
        function closeSaveConfigAlert(value) {
    
    
            isShowSaveAlert.value = value
        }
        // 展示"保存配置彈框"
        function showSaveConfigAlert() {
    
    
            isShowSaveAlert.value = true
        }
        // 展示"導入配置彈框"
        function showImportConfigAlert() {
    
    
            isShowImportAlert.value = true
        }
        // 關閉"導入配置彈框"
        function closeImportConfigAlert(value) {
    
    
            isShowImportAlert.value = value
        }
        // 展示搜索框
        function showSearch() {
    
    
            if(store.state.moduleSearch.isSearch) {
    
    
                store.commit('changeIsSearch', false)
                store.commit('changeSearchWord', '')
            } else {
    
    
                store.commit('changeIsSearch', true)
            }
                      
        }
        // 跳轉到指定標籤
        function toID(id) {
    
    
            const content = document.getElementById('content')
            const el = document.getElementById(`${
      
      id}`)
            let start = content.scrollTop
            let end = el.offsetTop - 80
            let each = start > end ? -1 * Math.abs(start - end) / 20 : Math.abs(start - end) / 20
            let count = 0
            let timer = setInterval(() => {
    
    
                if(count < 20) {
    
    
                    content.scrollTop += each
                    count ++
                } else {
    
    
                    clearInterval(timer)
                }
            }, 10) 
        }
        
        return {
    
    
            navInfos,
            addTabShow, 
            isShowSaveAlert, 
            closeSaveConfigAlert, 
            showSaveConfigAlert,
            isShowImportAlert,
            showImportConfigAlert,
            closeImportConfigAlert,
            showSearch,
            toID
        }
    }
}
</script>

上述代碼是我項目中側邊欄中所有的變量以及方法，雖說變量和方法都同時存在於setup函數中了，但是仍看起來雜亂無章，若是這個組件的業務需求越來越複雜，這個setup內的代碼可能更亂了

於是，我便開始構思如何抽離我的代碼。後來在掘金的沸點上說了一下我的思路，並且詢問了一下其他掘友的建議

其實最後一位老哥的回答對我啓發很大，因此我也借鑑了一下它的思路對我的項目代碼進行了抽離

準備工作

首先我得思考一個問題：抽離代碼時，是按照組件單獨抽離？還是按照整體功能抽離？

最後我決定按照整體的功能去抽離代碼，具體功能列表如下：

• 搜索功能
• 新增/修改標籤功能
• 新增/修改網址功能
• 導入配置功能
• 導出配置功能
• 編輯功能

開始抽出代碼

上述的每一個功能都會通過一個JS文件去存儲該功能對應的變量以及方法。然後所有的JS文件都是放在src/use下的，如圖

就拿 新增/修改標籤功能 來舉例子，用一個動圖給大家看看該功能的全部效果

很明顯，我是做了一個彈窗組件，當點擊側邊欄中的 + 號後，彈窗顯示；然後我輸入了想要新增標籤的名稱，並且選擇了合適的圖標，最後點擊了確認，於是一個標籤就添加好了，彈窗也隨之隱藏；

最後我又去編輯模式下點擊修改標籤，彈窗再次顯示，與此同時把對應標籤的名稱與圖標都渲染了出來；待我修改了名字後，點擊了確認，於是標籤的信息就被我改好了，彈窗又隨之隱藏了。

所以總結以下涉及到的功能就有以下幾個：

1. 彈窗的展示
2. 彈窗的隱藏
3. 點擊確認後新增或修改標籤內容

按照傳統的寫法，實現上述三個功能是這個樣子的（我修改並簡化了代碼，大家理解意思就行）：

• 側邊欄組件內容

<!-- 側邊欄組件內容 -->
<template>
    <aside>
    	<div @click="show">新增標籤</div>
        <tab-alert :isShow="isShow" @closeTabAlert="close"/>
    </aside>
</template>

<script>
import {
    
     ref } from 'vue'
import tabAlert from '@/components/tabAlert/index'
export default {
    
    
    name: "tab",
    components: {
    
    
    	tabAlert
    },
    setup() {
    
    
    	// 存儲標籤彈框的展示情況
    	const isShow = ref(false)   
        
        // 展示標籤彈框
        function show() {
    
    
            isShow.value = true
        }
        
        // 隱藏標籤彈框
        function close() {
    
    
            isShow.value = false
        }
        
        return {
    
     isShow, show, close }
    }
}
</script>

• 標籤彈框組件內容

<!-- 標籤彈框組件內容 -->
<template>
    <div v-show="isShow">
    	<!-- 此處省略一部分不重要的內容代碼 -->
        <div @click="close">取消</div>
        <div @click="confirm">確認</div>
    </div>
</template>

<script>
export default {
    
    
    name: "tab",
    props: {
    
    
    	isShow: {
    
    
            type: Boolean,
            default: false
        }
    },
    setup(props, {
    
    emit}) {
    
    
    
    	// 隱藏標籤彈框
    	function close() {
    
    
            emit('close')
        }
        
        // 點擊確認後的操作
        function confirm() {
    
    
        
            /* 此處省略點擊確認按鈕後更新標籤內容的業務代碼 */
            
            close()
        }
        
        
        return {
    
     close, confirm }
    }
}
</script>

看完了我上面舉例的代碼後可以發現，簡簡單單的一個功能的實現，卻涉及到兩個組件，而且還需要父子組件相互通信來控制一些狀態，這樣不就把功能打散了嘛，即不夠聚合。所以按照功能來抽離這些功能代碼時，我會爲他們創建一個 tabAlert.js 文件，裏面存儲着關於這個功能所有的變量與方法。

tabAlert.js文件中的大致結構是這樣的：

// 引入依賴API
import {
   
    ref } from 'vue'

// 定義一些變量
const isShow = ref(false)     // 存儲標籤彈框的展示狀態

export default function tabAlertFunction() {
   
   
    /* 定義一些方法 */
    
    // 展示標籤彈框
    function show() {
   
   
    	isShow.value = true
    }
    
    // 關閉標籤彈框
    function close() {
   
   
    	isShow.value = false
    }
    
    // 點擊確認按鈕以後的操作
    function confirm() {
   
   
        /* 此處省略點擊確認按鈕後更新標籤內容的業務代碼 */
        
        close()
    }
    
    return {
   
   
    	isShow,
        show,
        close,
        confirm,
    }
}

對於爲何設計這樣的結構，先從導出的方法來說，我把跟該功能相關的所有方法放在了一個函數中，最後通過return導出，是因爲有時候這些方法會依賴於外部其它的變量，所以用函數包裹了一層，例如：

// example.js
export default function exampleFunction(num) {
   
   
	
    function log1() {
   
   
    	console.log(num + 1)
    }
    
    function log2() {
   
   
    	console.log(num + 2)
    }
    
    return {
   
   
    	log1,
        log2,
    }
}

從這個文件中我們發現，log1和log2方法都是依賴於變量num的，但我們並沒有在該文件中定義變量num，那麼可以在別的組件中引入該文件時，給最外層的exampleFunction方法傳遞一個參數num即可

<template>
    <button @click="log1">打印加1</button>
    <button @click="log2">打印加2</button>
</template>

<script>
import exampleFunction from './example'
import {
    
     num } from './getNum'  // 假設num是從別的模塊中獲取到的
export default {
    
    
    setup() {
    
    
    	let {
    
     log1, log2 } = exampleFunction(num)
    	
        return {
    
     log1, log2 }
    }
}
</script>

然後再來說說爲什麼變量的定義在我們導出函數的外部。再繼續看我上面舉的我項目中標籤頁功能的例子吧，用於存儲標籤彈框展示狀態的變量isShow是在某個組件中定義的，同時標籤組件也需要獲取這個變量來控制展示的狀態，這之間用到了父子組件通信，那麼我們不妨把這個變量寫在一個公共的文件中，無論哪個組件需要用到的時候，只需要導入獲取就好了，因爲每次獲取到的都是同一個變量

這樣一來，豈不是連父子組件通信都省了嘛？

我們把剛剛封裝好的tabAlert.js用到組件中去，看看是什麼效果

• 側邊欄組件內容

<!-- 側邊欄組件內容 -->
<template>
    <aside>
    	<div @click="show">新增標籤</div>
        <tab-alert/>
    </aside>
</template>

<script>
import tabAlert from '@/components/tabAlert/index'
import tabAlertFunction from '@/use/tabAlert'
export default {
    
    
    name: "tab",
    components: {
    
    
    	tabAlert
    },
    setup() {
    
    
    	
        let {
    
     show } = tabAlertFunction()
        
        return {
    
     show }
    }
}
</script>

• 標籤彈框組件內容

<!-- 標籤彈框組件內容 -->
<template>
    <div v-show="isShow">
    	<!-- 此處省略一部分不重要的內容代碼 -->
        <div @click="close">取消</div>
        <div @click="confirm">確認</div>
    </div>
</template>

<script>
import tabAlertFunction from '@/use/tabAlert'
export default {
    
    
    name: "tab",
    setup() {
    
    
        
        let {
    
     isShow, close, confirm } = tabAlertFunction() 
        
        return {
    
     isShow, close, confirm }
    }
}
</script>

這時候再翻上去看看最初的代碼，有沒有感覺代碼抽離後，變得非常規整，而且組件中少了很多的代碼量。

這樣通過功能來將變量和代碼聚集在一起的方法，我個人認爲是比較好管理的，倘若之後有一天想在該功能上新增什麼小需求，只要找到tabAlert.js這個文件，在裏面寫方法和變量即可

展示環節

我就是按照這樣的方法，對我原本的代碼進行了抽離，下面給大家看幾組抽離前和抽離後的代碼對比

對比一

• 抽離前

<template>
  <div class="import-config-container" v-show="isShow">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="closeAlert"></div>
      <div class="import-config-alert-title">導入配置</div>
      <div class="import-config-alert-remind">說明：需要上傳之前保存導出的xxx.json配置文件，文件中的信息會完全覆蓋當前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上傳配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">確認上傳</lp-button>
    </div>
  </div>
</template>

<script>
import {
    
    ref, inject} from 'vue'
import lpButton from '../../public/lp-button/lp-button'
export default {
    
    
    props: {
    
    
      isShow: {
    
    
        type: Boolean,
        default: true
      }
    },
    components: {
    
    
        lpButton
    },
    setup(props, {
    
    emit}) {
    
    
        const result = ref('none')     // 導入的結果
        const isUpload = ref(false)    // 判斷是否上傳配置文件
        const isImport = ref(false)    // 判斷配置是否導入成功
        const isLoading = ref(false)   // 判斷按鈕是否處於加載狀態
        const inputFile = ref(null)    // 獲取文件標籤
        const hasFile = ref(0)         // 判斷文件的傳入情況。0：未傳入  1: 格式錯誤  2：格式正確
        const $message = inject('message')
        // 導入配置
        function importConfig() {
    
    
          let reader = new FileReader()
          let files = inputFile.value.files
          if(hasFile.value == 0) {
    
    
            $message({
    
    
              type: 'warning',
              content: '請先上傳配置文件'
            })
          }
          else if(hasFile.value == 1) {
    
    
            $message({
    
    
              type: 'warning',
              content: '請上傳正確格式的文件，例如xx.json'
            })
          }
          else if(hasFile.value == 2) {
    
    
            reader.readAsText(files[0])
            reader.onload = function() {
    
    
              let data = this.result
              window.localStorage.navInfos = data
              location.reload()
            }
          }
        }
        // 關閉彈窗
        function closeAlert() {
    
    
          emit('closeImportConfigAlert', false)
          hasFile.value = 0
        }
        function fileChange(e) {
    
    
          let files = e.target.files
          if(files.length === 0) {
    
    
            $message({
    
    
              type: 'warning',
              content: '請先上傳配置文件'
            })
          }
          else {
    
    
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
    
    
              hasFile.value = 1
              $message({
    
    
                type: 'warning',
                content: '請確認文件格式是否正確'
              })
            } else {
    
    
              hasFile.value = 2
              $message({
    
    
                type: 'success',
                content: '文件格式正確'
              })
            }
          }
        }
        
        return {
    
    
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>

• 抽離後

<template>
  <div class="import-config-container" v-show="isShowImportAlert">
    <div class="import-config-alert">
      <div class="close-import-config-alert" @click="handleImportConfigAlert(false)"></div>
      <div class="import-config-alert-title">導入配置</div>
      <div class="import-config-alert-remind">說明：需要上傳之前保存導出的xxx.json配置文件，文件中的信息會完全覆蓋當前信息</div>
      <form action="" class="form">
        <label for="import_config_input" class="import-config-label">
          上傳配置文件
          <i v-if="hasFile == 1" class="fas fa-times-circle uploadErr uploadIcon"/>
          <i v-else-if="hasFile == 2" class="fas fa-check-circle uploadSuccess uploadIcon"/>
        </label>
        <input id="import_config_input" type="file" class="select-file" ref="inputFile" @change="fileChange">
      </form>
      <lp-button type="primary" class="import-config-btn" @_click="importConfig">確認上傳</lp-button>
    </div>
  </div>
</template>

<script>
/* API */
import {
    
     inject } from 'vue'
/* 組件 */
import lpButton from '@/components/public/lp-button/lp-button'
/* 功能模塊 */
import importConfigFunction from '@/use/importConfig'
export default {
    
    
    components: {
    
    
        lpButton
    },
    setup() {
    
    
        const $message = inject('message')
        
        const {
    
     
          isShowImportAlert,
          handleImportConfigAlert,
          result,  
          isUpload, 
          isImport, 
          isLoading, 
          importConfig, 
          closeAlert, 
          inputFile, 
          fileChange, 
          hasFile 
        } = importConfigFunction($message)
        
        return {
    
    
          isShowImportAlert,
          handleImportConfigAlert,
          result, 
          isUpload,
          isImport, 
          isLoading,
          importConfig, 
          closeAlert,
          inputFile,
          fileChange,
          hasFile
        }
    }
}
</script>

• 抽離出的代碼文件

// 導入配置功能
import {
   
    ref } from 'vue'

const isShowImportAlert = ref(false),   // 導入配置彈框是否展示
      result = ref('none'),             // 導入的結果
      isUpload = ref(false),            // 判斷是否上傳配置文件
      isImport = ref(false),            // 判斷配置是否導入成功
      isLoading = ref(false),           // 判斷按鈕是否處於加載狀態
      inputFile = ref(null),            // 獲取文件元素
      hasFile = ref(0)                  // 判斷文件的傳入情況。0：未傳入  1: 格式錯誤  2：格式正確
      
export default function importConfigFunction($message) {
   
   
  
    // 控制彈框的展示
    function handleImportConfigAlert(value) {
   
   
        isShowImportAlert.value = value
        if(!value) hasFile.value = 0
    }

    // 上傳的文件內容發生改變
    function fileChange(e) {
   
   
        let files = e.target.files
        if(files.length === 0) {
   
   
            $message({
   
   
            type: 'warning',
            content: '請先上傳配置文件'
            })
        }
        else {
   
   
            let targetFile = files[0]
            if(!/\.json$/.test(targetFile.name)) {
   
   
                hasFile.value = 1
                $message({
   
   
                    type: 'warning',
                    content: '請確認文件格式是否正確'
                })
            } else {
   
   
            hasFile.value = 2
                $message({
   
   
                    type: 'success',
                    content: '文件格式正確'
                })
            }
        }
    }

    // 導入配置
    function importConfig() {
   
   
        let reader = new FileReader()
        let files = inputFile.value.files
        if(hasFile.value == 0) {
   
   
          $message({
   
   
            type: 'warning',
            content: '請先上傳配置文件'
          })
        }
        else if(hasFile.value == 1) {
   
   
          $message({
   
   
            type: 'warning',
            content: '請上傳正確格式的文件，例如xx.json'
          })
        }
        else if(hasFile.value == 2) {
   
   
          reader.readAsText(files[0])
          reader.onload = function() {
   
   
            let data = this.result
            window.localStorage.navInfos = data
            location.reload()
          }
        }
    }

    return {
   
   
        isShowImportAlert,
        result,
        isUpload,
        isImport,
        isLoading,
        inputFile,
        hasFile,
        handleImportConfigAlert,
        fileChange,
        importConfig,
    }
}

對比二

• 抽離前

<template>
    <!-- 此處因代碼太多，暫時省略，詳情可以點擊文末的項目源碼查看 -->
</template>

<script>
import {
    
    ref, inject} from 'vue'
import {
    
    useStore} from 'vuex'
import urlAlert from '../public/urlAlert/urlAlert'
import tagAlert from '../public/tabAlert/tabAlert'
import carousel from './childCpn/carousel'
import search from './childCpn/search'
import {
    
     exchangeElements } from '../../utils/utils'
export default {
    
    
    components: {
    
    
        urlAlert,
        tagAlert,
        carousel,
        search,
    },
    setup() {
    
    
        const store = useStore()
        const catalogue = store.state.catalogue
        const moduleUrl = store.state.moduleUrl
        const moduleSearch = store.state.moduleSearch
        const $message = inject('message')
        const $confirm = inject('confirm')
        const editWhich = ref(-1)
        
        
        // 彈出添加URL的框
        function addMoreUrl(id) {
    
    
            store.commit('changeUrlInfo', [
                {
    
    key: 'isShow', value: true},
                {
    
    key: 'whichTag', value: id},
                {
    
    key: 'alertType', value: '新增網址'}
            ])
        }
        // 處理無icon或icon加載失敗的圖片，令其使用默認svg圖標
        function imgLoadErr(e) {
    
    
            let el = e.target
            el.style.display = 'none'
            el.nextSibling.style.display = 'inline-block'
        }
        function imgLoadSuccess(e) {
    
    
            let el = e.target
            el.style.display = 'inline-block'
            el.nextSibling.style.display = 'none'
        }
        // 進入編輯狀態
        function enterEdit(id) {
    
    
            if(id != editWhich.value) {
    
    
                editWhich.value = id
            } else {
    
    
                editWhich.value = -1
            }     
        }
        // 修改標籤彈框彈出
        function editTagAlertShow(tab) {
    
    
            store.commit('changeTabInfo', [
                {
    
    key: 'isShowAddTabAlert', value: true},
                {
    
    key: 'tagName', value: tab.name},
                {
    
    key: 'trueIcon', value: tab.icon},
                {
    
    key: 'isSelected', value: true},
                {
    
    key: 'currentIcon', value: tab.icon},
                {
    
    key: 'id', value: tab.id},
                {
    
    key: 'alertType', value: '修改標籤'}
            ])
        }
        // 刪除標籤以及標籤下的所有網址
        function deleteTag(id) {
    
    
            $confirm({
    
    
                content: '確定刪除該標籤以及該標籤下所有網址嗎？'
            })
            .then(() => {
    
    
                store.commit('remove', id)
                $message({
    
    
                    type: 'success',
                    content: '標籤頁及子網址刪除成功'
                })
            })
            .catch(() => {
    
    })
        }
        // 刪除某個網址
        function deleteUrl(id) {
    
    
            $confirm({
    
    
                content: '確定刪除該網址嗎？'
            })
            .then(() => {
    
    
                store.commit('remove', id)
                $message({
    
    
                    type: 'success',
                    content: '網址刪除成功'
                })
            })
            .catch(() => {
    
    })      
        }
        // 彈出修改URL的彈框
        function editUrl(url) {
    
    
            store.commit('changeUrlInfo', [
                {
    
    key: 'url', value: url.url},
                {
    
    key: 'icon', value: url.icon},
                {
    
    key: 'id', value: url.id},
                {
    
    key: 'name', value: url.name},
                {
    
    key: 'isShow', value: true},
                {
    
    key: 'alertType', value: '修改網址'}
            ])
        }
        
        function judgeTabIsShow(i) {
    
    
            const URLS = catalogue[i]['URLS']
            let length = URLS.length
            for(let j = 0; j < length; j++) {
    
    
                if(moduleSearch.searchWord == '') return false;
                else if(URLS[j].name.toLowerCase().indexOf(moduleSearch.searchWord.toLowerCase()) !== -1) return true;
            }
            return false
        }
        function judgeUrlIsShow(i, j) {
    
    
            const url = catalogue[i]['URLS'][j]
            if(url.name.toLowerCase().indexOf(moduleSearch.searchWord.toLowerCase()) !== -1) return true;
            return false;
        }
        let elementNodeDragged = null   // 被移動的地址框元素
        let elementNodeLocated = null  // 移入的地址框元素
        let draggedId = -1   // 被移動地址框的id
        
        // 地址框開始拖拽
        function urlBoxDragStart(e) {
    
    
            const el = e.target
            if(el.nodeName !== 'LI') return;
            // 記錄當前被拖拽地址框元素
            elementNodeDragged = el    
            // 將被拖拽對象隱藏
            el.style.display = 'fixed'
            el.style.opacity = 0
        }
        // 地址框拖拽結束
        function urlBoxDragEnd(e) {
    
    
            let el = e.target
            el.style.display = 'inline-block'
            el.style.opacity = 1
            // 獲取當前正在編輯標籤中所有url的排序
            let timer = setTimeout(() => {
    
    
                const result = []
                const children = elementNodeLocated.parentNode.children
                let length = children.length
                for(let i = 0; i < length - 1; i++) {
    
    
                    result.push(children[i].getAttribute('data-id'))
                }
                store.commit('dragEndToUpdate', {
    
    tabId: editWhich.value, result})
                clearTimeout(timer)
            }, 500)
        }
        // 被拖動的地址框觸碰到其它的地址框
        function urlBoxEnter(e, tabId) {
    
    
            if(tabId != editWhich.value) return;
            let el = e.target
            while(el.nodeName !== 'LI') el = el.parentNode;        // 若子元素觸發dragenter事件，則查找到父元素li標籤
            if(el === elementNodeDragged) return;     // 避免自己拖拽進入自己的情況
            if(elementNodeLocated !== el) elementNodeLocated = el    // 記錄被移入的地址框元素
            exchangeElements(elementNodeDragged, el)     //  地址框位置互換
        }
        return {
    
    
            catalogue, 
            addMoreUrl, 
            moduleUrl, 
            moduleSearch,
            imgLoadErr,
            imgLoadSuccess, 
            enterEdit, 
            editTagAlertShow,
            deleteTag,
            deleteUrl,
            editUrl,
            editWhich,
            judgeTabIsShow,
            judgeUrlIsShow,
            urlBoxDragStart,
            urlBoxDragEnd,
            urlBoxEnter,
        }
    }
}
</script>

• 抽離後

<template>
  <!-- 此處因代碼太多，暫時省略，詳情可以點擊文末的項目源碼查看 -->
</template>

<script>
/* API */
import {
    
     inject } from 'vue'
import {
    
     useStore } from 'vuex'
/* 組件 */
import urlAlert from '@/components/public/urlAlert/index'
import tabAlert from '@/components/public/tabAlert/index'
import carousel from './carousel'
import search from './search'
/* 功能模塊 */
import baseFunction from '@/use/base'
import editFunction from '@/use/edit'
import urlAlertFunction from '@/use/urlAlert'
import tabAlertFunction from '@/use/tabAlert'
import searchFunction from '@/use/search'
export default {
    
    
    components: {
    
    
        urlAlert,
        tabAlert,
        carousel,
        search,
    },
    setup() {
    
    
        const catalogue = useStore().state.catalogue
        const $message = inject('message')
        const $confirm = inject('confirm')

        // 一些基礎的方法
        let {
    
     imgLoadErr, imgLoadSuccess } = baseFunction()

        // url框編輯下的相關變量及功能
        let {
    
     
            editWhich, 
            handleEdit, 
            deleteTab, 
            deleteUrl, 
            urlBoxDragStart, 
            urlBoxDragEnd, 
            urlBoxEnter 
        } = editFunction($message, $confirm)

        // 彈出 “新增”、“修改” url彈框
        let {
    
     showNewUrlAlert, showEditUrlAlert } = urlAlertFunction()

        // 搜索功能相關的變量及方法
        let {
    
     moduleSearch, judgeTabIsShow, judgeUrlIsShow } = searchFunction()

        // 展示修改tab的彈框
        let {
    
     showEditAddTab } = tabAlertFunction()

        return {
    
    
            catalogue, 
            showNewUrlAlert, 
            moduleSearch,
            imgLoadErr,
            imgLoadSuccess, 
            handleEdit, 
            showEditAddTab,
            deleteTab,
            deleteUrl,
            showEditUrlAlert,
            editWhich,
            judgeTabIsShow,
            judgeUrlIsShow,
            urlBoxDragStart,
            urlBoxDragEnd,
            urlBoxEnter,
        }
    }
}
</script>

• 抽離出的代碼文件（此處涉及到很多個模塊，因此只展示兩個吧）

// 搜索功能
import {
   
     } from 'vue'
import store from '@/store/index'

// 變量
const moduleSearch = store.state.moduleSearch     // 搜索相關的全局狀態

export default function searchFunction() {
   
   

    // 搜索框的輸入改變
    function inputSearchContent(value) {
   
   
        store.commit('changeSearchWord', value)
    }

    // 控制搜索框的展示
    function handleSearchBox() {
   
   
        if(moduleSearch.isSearch) {
   
   
            store.commit('changeIsSearch', false)
            store.commit('changeSearchWord', '')
        } else {
   
   
            store.commit('changeIsSearch', true)
        }         
    }

    // 判斷標籤是否顯示
    function judgeTabIsShow(i) {
   
   
        return store.getters.judgeTabIsShow(i)
    }

    // 判斷url是否顯示
    function judgeUrlIsShow(i, j) {
   
   
        return store.getters.judgeUrlIsShow(i, j)
    }

    return {
   
   
        moduleSearch,
        inputSearchContent,
        handleSearchBox,
        judgeTabIsShow,
        judgeUrlIsShow,
    }
}

// url框的拖拽排列
import {
   
    ref } from 'vue'
import {
   
    exchangeElements, debounce } from '@/utils/utils'
import store from '@/store/index'

//變量
let elementNodeDragged = null,     // 被移動的地址框元素
    elementNodeLocated = null,     // 移入的地址框元素
    editWhich = ref(-1)            // 記錄正在編輯的tab索引

export default function editFunction($message, $confirm) {
   
   

        // 控制編輯狀態
        function handleEdit(id) {
   
   
            if(id != editWhich.value) {
   
   
                editWhich.value = id
            } else {
   
   
                editWhich.value = -1
            }     
        }

        // 刪除標籤以及標籤下的所有網址
        function deleteTab(id) {
   
   
            $confirm({
   
   
                content: '確定刪除該標籤以及該標籤下所有網址嗎？'
            })
            .then(() => {
   
   
                store.commit('remove', id)
                $message({
   
   
                    type: 'success',
                    content: '標籤頁及子網址刪除成功'
                })
            })
            .catch(() => {
   
   })
        }

        // 刪除某個網址
        function deleteUrl(id) {
   
   
            $confirm({
   
   
                content: '確定刪除該網址嗎？'
            })
            .then(() => {
   
   
                store.commit('remove', id)
                $message({
   
   
                    type: 'success',
                    content: '網址刪除成功'
                })
            })
            .catch(() => {
   
   })      
        }

        // 地址框開始拖拽
        function urlBoxDragStart(e) {
   
   
            const el = e.target
            if(el.nodeName !== 'LI') return;
            // 記錄當前被拖拽地址框元素
            elementNodeDragged = el    
            // 將被拖拽對象隱藏
            el.style.display = 'fixed'
            el.style.opacity = 0
        }

        // 拖拽後更新Vuex中的正確排序
        let dragEndToUpdate = debounce(function() {
   
   
            // 獲取當前正在編輯標籤中所有url的排序
            const result = []
            const children = elementNodeLocated.parentNode.children
            let length = children.length
            for(let i = 0; i < length - 1; i++) {
   
   
                result.push(children[i].getAttribute('data-id'))
            }
            store.commit('dragEndToUpdate', {
   
   tabId: editWhich.value, result}) 
        }, 500)

        // 地址框拖拽結束
        function urlBoxDragEnd(e) {
   
   
            let el = e.target
            el.style.display = 'inline-block'
            el.style.opacity = 1
            dragEndToUpdate()
        }

        // 被拖動的地址框觸碰到其它的地址框
        function urlBoxEnter(e, tabId) {
   
   
            if(tabId != editWhich.value) return;
            let el = e.target
            while(el.nodeName !== 'LI') el = el.parentNode;          // 若子元素觸發dragenter事件，則查找到父元素li標籤
            if(el === elementNodeDragged) return;                    // 避免自己拖拽進入自己的情況
            if(elementNodeLocated !== el) elementNodeLocated = el    // 記錄被移入的地址框元素
            exchangeElements(elementNodeDragged, el)                 //  地址框位置互換
        }

    return {
   
   
        editWhich,
        handleEdit,
        deleteTab,
        deleteUrl,
        urlBoxDragStart,
        urlBoxDragEnd,
        urlBoxEnter,
    }
}

最後

細心的小夥伴應該發現了，剛纔給大家展示的代碼中，有一段是各種拖拽的實現方法，沒錯！！我在閒暇之餘給我的項目加上了編輯模式下的 拖拽排列功能 ，也算是完成了之前大家對我提的建議之一啦，歡迎各位前去體驗新功能~

項目體驗鏈接

在體驗完後，希望有心的小夥伴們能在github上給我提提Issues，我看到會第一時間回覆的（如果催我做賬號功能的小夥伴多，我後期可能會考慮加上）

項目源碼鏈接（歡迎各位Star，多提意見，多交流啊～）

本文所闡述的代碼抽離方法是我改過很多遍後定下來的，不知道後面還會有什麼問題，但目前看來，對於以後的維護和管理應該是會方便很多的，如果大家有更好的意見或想法，可以留下評論，或者加我vx：Lpyexplore333私底下交流

最後謝謝各位的耐心觀看

寫文章不容易，希望各位多多留言給我提提意見，別忘了點個贊👍哦～