怎么利用Composition API对Vue3系统项目代码抽离（下）

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

2021-01-09 23:32:38 1649浏览

今天给大家分享的主题：怎么利用Composition API对Vue3系统项目代码抽离（下）

接我的上篇文章： https://www.jf3q.com/fly/html/article/details/146.html
对比二
抽离前

<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,
    }
}

行，今天就给大家分享到这里吧，您的一份支持就是我最大的动力，最后打个小广告，我们程序员在学习和工作中或多或少会遇到一些比较棘手的问题，也就所谓的一时半会解决不了的bug,可以来杰凡IT问答平台上提问，平台上大佬很多可以快速给你一对一解决问题，有需要的朋友可以去关注下，平台网址： https://www.jf3q.com

150万+ 人气	406 博客	18 专栏
1 问答	54 粉丝	1 关注

怎么利用Composition API对Vue3系统项目代码抽离（下）

最热博客 更多

博客目录 关闭

最热博客更多

博客目录关闭