低代码核心思想:插件化开发(vue3实现)

我们在开发一些组件插件的时候,需要动态的从外部去注入第三方插件

1. 如何做一个插件化的项目,模拟代码如下

ts 复制代码
// 插件设计内容
// 1. 插件底座
// 2. 插件注册方式
// 3. 调用插件
class Calculator{
    // 插件底座
    plugins = []

    constructor(){

    }
    // 注册
    use(plugin){
        this.plugins.push(plugin)
        this[plugin.name] = plugin.fn
    }
}
// 设置两个插件
const AddPlugin = {
    name : 'add',
    fn: function (a, b){
        return a + b 
    }
}

class MinusPlugin{
    name = 'minus';
    fn(a, b) {
        return a- b
    }
}

const caculator = new Calculator()
// 把插件应用到组件中
caculator.use(AddPlugin)
caculator.use(new MinusPlugin())
// 使用插件
console.log(caculator.add(1, 2))
console.log(caculator.minus(2, 1))
console.log(caculator['add'](2, 1))

2. 有了以上的认识,我们开始制作插件

  1. 准备两个vue组件, 用于渲染的插件
    components/MyButton.vue
ts 复制代码
<template>
  <div class="">
    <button>btn</button>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

components/MyText.bue

ts 复制代码
<template>
  <div class="">mytest</div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>
  1. 制作插件底座
    setup.ts
ts 复制代码
import type { App } from 'vue'
import MyButton from './components/MyButton.vue'
interface BlockType{
    type: string,
    meterial: any,
}
// 先定义好自己已有的组件,添加进去
const baseBlocks = [
    {
        type: 'mybutton',
        meterial: MyButton
    }
]

class BlockSuite {
    public blocks = baseBlocks
    getBlocksMap(){
        return Object.fromEntries(this.blocks.map((block) => [block.type, block]))
    }

    getBlocks(){
        return this.blocks
    }

    // 可以添加第三方插件
    addBlock(block: any){
        this.blocks.push(block)
    }

    hasBlock(type: string){
        return !!this.getBlocksMap()[type]
    }
}

const blockSuite = new BlockSuite()


export const setup = (list: BlockType[], app: App<Element>) => {
    list.map((block) => {
        blockSuite.addBlock(block)
    })
    const blocksMap = blockSuite.getBlocksMap()
    const ins = {
        install(app: App<Element>) {
            app.config.globalProperties.$blocksMap = blocksMap
        }
    }

    app.use(ins)
}
  1. main.js 里面调用setup
ts 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { setup } from './setup'

// 第三方插件
import MyText from './components/MyText.vue'

const app = createApp(App)

// 插入第三方库
setup([{type: 'mytext',meterial: MyText}],app)

app.mount('#app')
  1. 最后,我们可以在组件里面使用插件
    App.vue
ts 复制代码
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const {proxy}: any = getCurrentInstance()
const blocksMap = proxy.$blocksMap
</script>
<template>
  <div>
      <component :is="blocksMap['mybutton'].meterial"></component>
      <component :is="blocksMap['mytext'].meterial"></component>
  </div>
</template>

<style scoped>
</style>
相关推荐
excel16 分钟前
应用程序协议注册的原理与示例
前端·后端
我是天龙_绍3 小时前
浏览器指纹,一个挺实用的知识点
前端
theshy3 小时前
前端自制接口抓取工具:一键收集并导出接口列表
前端
wayne2143 小时前
跨平台开发框架全景分析:Flutter、RN、KMM 与腾讯 Kuikly 谁更值得选择?
前端
LuckySusu3 小时前
【js篇】JavaScript 对象创建的 6 种方式:从基础到高级
前端·javascript
LuckySusu3 小时前
【js篇】async/await 的五大核心优势:让异步代码像同步一样清晰
前端·javascript
艾雅法拉拉3 小时前
JS知识点回顾(1)
前端·javascript·面试
LuckySusu3 小时前
【js篇】Promise 解决了什么问题?—— 彻底告别“回调地狱”
前端·javascript
程序员海军3 小时前
如何让AI真正理解你的需求
前端·后端·aigc
passer9813 小时前
基于Vue的场景解决
前端·vue.js