插件系统设计

已于 2022-08-15 19:50:47 修改
阅读量522 收藏
点赞数
分类专栏： 设计模式&代码优化 文章标签： javascript 前端 开发语言
于 2022-08-11 00:06:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/126276162
版权

文章目录

1、从0开始

  • 假如我们现在有一个 Runner类如下，外界可以通过调用exec方法来执行内部逻辑进行build的操作
class Runner {
    exec() {
        build()
    }
}
function build() {
    console.log('build')
}
  • 但是，我们想要在进行buildSomething之前来进行一些前期的准备工作，如准备node环境或者yarn。更改代码如下:
class Runner {
    exec() {
        prepareNode()
        prepareYarn()
        build()
    }
}
function prepareNode() {
    console.log('prepareNode')
}
function prepareYarn() {
    console.log('prepareYarn')
}

function build() {
    console.log('build')
}
  • 下一步，容易想到可以抽离出来一个prepare函数，将所有的准备工作都丢在prepare函数中，来保证Runner类的纯粹
class Runner {
    exec() {
        prepare()
        buildSomething()
    }
}
function prepare() {
    prepareNode()
    prepareYarn()
}
...
  • 下一步，在build之前，不仅想执行prepare，还想执行一些其他的预置操作，比如beforeBuild等，代码就会变成这样
    • 可以预想到，配置越多，增加的类似prepare方法就越多
class Runner {
    exec() {
        prepare()
        beforeBuild()
        ...
        build()
    }
}
function prepare() {
    prepareNode()
    prepareYarn()
}

function beforeBuild(){
 ...
}
...

2、环境准备，依赖注入

  • 下一步，通过配置参数的形式传入，再使用EventEmitter来注册任务
const EventEmitter = require("events").EventEmitter;

class Runner {
  eventTriger;
  constructor(options) {
    this.eventTriger = new EventEmitter();
    if (Array.isArray(options.prepare)) {
      for (const listener of options.prepare) {
        this.eventTriger.on("prepare", listener);
      }
    } else {
      this.eventTriger.on("prepare", options.prepare);
    }
  }

  exec() {
    this.eventTriger.emit("prepare");
    build();
  }
}

function build() {
  console.log("build something");
}

const runner = new Runner({
  prepare: [prepareNode, prepareYarn],
});
runner.exec();

function prepare() {
  prepareNode();
  prepareYarn();
}

3、控制任务时序

  • 支持异步函数调用
    • 需要在异步函数 prepare执行完毕之后才能够调用 build 的操作
const EventEmitter = require("events").EventEmitter;

class Runner {
    eventTriger;
    //处理event上下文
    eventHandlerContext = new Map()
    constructor(options) {
        this.eventTriger = new EventEmitter();
        if (Array.isArray(options.prepare)) {
            for (const listener of options.prepare) {
                this._on('prepare', listener)
            }
        } else {
            this._on('prepare', options.prepare)
        }
    }

    _on(eventName, listener) {
		//注册的是一个包装的方法
        const wrapperListener = async (...args) => {
            const ctx = this.eventHandlerContext.get(eventName);
            const ret = await listener(...args)
            this.eventHandlerContext.set(eventName, { ...ctx, count: ctx.count++ })
            // 类似Promise.all的实现,当已经执行完毕的方法和注册的方法一致时，resolve掉exec的Promise
            if (ctx.count === this.eventTriger.listenerCount(eventName)) {
                ctx.resolve(true)
            }
            return ret
        }
        this.eventTriger.on(eventName, wrapperListener);
    }

    async _emit(eventName, ...args) {
        const promise = new Promise((resolve, reject) => {
		        //存储当前event对应的状态
            this.eventHandlerContext.set(eventName, { reject, resolve, count: 0 })
        })
        this.eventTriger.emit(eventName)
        await promise
    }


    async exec() {
        await this._emit("prepare");
        build();
    }
}

function build() {
    console.log("build something");
}

const runner = new Runner({
    prepare: [prepareNode, prepareYarn],
});
runner.exec();


function sleep(wait) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(wait)
        }, wait);
    })
}
async function prepareNode() {
    await sleep(500)
    console.log('prepareNode')
}
async function prepareYarn() {
    await sleep(300)
    console.log('prepareYarn')
}

function build() {
    console.log('build')
}

//代码执行结果如下
//prepareYarn
//prepareNode
//build something
  • 支持异步并行和异步串行
    • 在上一步中，实现了支持异步函数调用，但prepareNode的调用会晚于prepareYarn
    • 继续改造实现异步串行调用，这里需要注意异步await 不能使用forEach这样的通过回掉的方式实现，普通的for…of…等即可
    • 在异步串行中，支持传递上一个函数调用的结果

async function timer3() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('3')
            resolve()
        }, 3000)
    })
}

async function timer2() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('2')
            resolve()
        }, 2000)
    })
}

async function timer1() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('1')
            resolve()
        }, 1000)
    })
}

let arr = [timer3, timer2, timer1];

arr.forEach(async (fn) => {
    await fn()
})

//输出结果:1、2、3;
//forEach对回掉的处理,只是简单的调用，不能实现阻塞
//while (index < arr.length) {
   //callback(item, index)   //也就是我们传入的回调函数
//}
  • 所以实现异步串行需要类似这样的操作

for (const listener of listeners:Function[]) {
  await listener
}
  • 最终实现

const EventEmitter = require("events").EventEmitter;

class Runner {
    eventTriger;
    //处理event上下文
    eventHandlerContext = new Map()
    //收集事件名
    eventNames = []
    //收集对应的事件类型
    eventTypeStore = new Map()
    //针对异步串行的状态管理
    seriesListenersStore = new Map()
    constructor(options) {
        this.eventTriger = new EventEmitter();
        this.eventNames = Object.keys(options);

        for (const eventName of this.eventNames) {
            const { type = 'parallel', listeners } = options[eventName]
            //收集事件对应的类型
            this.eventTypeStore.set(eventName, type)
            const listenersArr = Array.isArray(listeners) ? listeners : [listeners]
            for (const listener of listenersArr) {
                this._on(eventName, listener)
            }
        }

    }

    _on(eventName, listener) {
        const eventType = this.eventTypeStore.get(eventName)
        switch (eventType) {
            case 'parallel': {
                const wrapperListener = async (...args) => {
                    const ctx = this.eventHandlerContext.get(eventName)
                    await listener(...args)
                    this.eventHandlerContext.set(eventName, { ...ctx, count: ctx.count++ })
                    // 如果listener 全部执行完毕 代表 on 事件执行完毕
                    if (ctx.count === this.eventTriger.listenerCount(eventName)) {
                        ctx.resolve(true)
                    }
                }
                this.eventTriger.on(eventName, wrapperListener)
                break;
            }
            //异步串行
            case 'series': {
                //异步串行需要收集虽有方法,然后只注册一次即可，所以这里每次注销上次注册的回掉
                this.eventTriger.removeAllListeners(eventName)
                //从seriesListenersStore中获取已存储的方法
                const listeners = (this.seriesListenersStore.get(eventName) || [])
                listeners.push(listener)
                //将当前收集到的方法更新存储
                this.seriesListenersStore.set(eventName, listeners)
                let wrapperListener = async (...args) => {
                    const ctx = this.eventHandlerContext.get(eventName)
                    //实现异步串行时，将上一个方法的返回值传递给下一个
                    const firstFn = listeners.shift()
                    let result = await firstFn(...args)
                    for (const fn of listeners) {
                        result = await fn(result)
                    }
                    ctx?.resolve(true)
                }
                this.eventTriger.on(eventName, wrapperListener)
                break
            }
            default:
                throw new Error(`unknown event type ${this.eventTypeStore.get(eventName)}`)
        }
    }

    async _emit(eventName, ...args) {
        const promise = new Promise((resolve, reject) => {
            this.eventHandlerContext.set(eventName, { reject, resolve, count: 0 })
        })
        this.eventTriger.emit(eventName, ...args)
        await promise
    }


    async exec(...args) {
        //for ... of ...异步串行调用
        for (const eventName of this.eventNames) {
            console.log(`-----------${eventName}生命周期执行-----------`)
            await this._emit(eventName, ...args)
        }
        build();
    }
}

function build() {
    console.log("build something");
}

const runner = new Runner({
    prepare: {
        listeners: [prepareNode, prepareYarn],
        type: 'parallel'
    },
    start: {
        listeners: [prepareNode, prepareYarn],
        type: 'series'
    },
    end: {
        listeners: [pipe1, pipe2],
        type: 'series'
    }
})
runner.exec(1, 2);


function sleep(wait) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(wait)
        }, wait);
    })
}
async function prepareNode() {
    await sleep(500)
    console.log('prepareNode')
}
async function prepareYarn() {
    await sleep(300)
    console.log('prepareYarn')
}
function pipe1(a, b) {
    console.log(a, b, 'pipe1执行')
    return a + b
}
function pipe2(a) {
    console.log(a, 'pipe2执行')
    return a * 2
}

function build() {
    console.log('build')
}
  • 至此一个支持同步、异步、并行、串行的插件系统已经完成啦

-----------prepare生命周期执行-----------
prepareYarn
prepareNode
-----------start生命周期执行-----------
prepareNode
prepareYarn
-----------end生命周期执行-----------
1 2 pipe1执行
3 pipe2执行
-----------生命周期执行结束-----------
build

4、终极大招

  • 终极大招— Tapable
  • Tapable 是 Webpack 团队开发的基于事件驱动的插件模块， Webpack 的 Plugins 插件管理机制就是基于 Tapable 实现。下面我们用 Tapable 来实现一下上面的例子

const {
	AsyncParallelHook,
	AsyncSeriesHook,
	AsyncSeriesWaterfallHook
 } = require("tapable");
 
class TapableRunner {
  hooks: { prepare: AsyncParallelHook, start: AsyncSeriesHook, end: AsyncSeriesWaterfallHook}
  constructor() {
    this.hooks = {
      prepare: new AsyncParallelHook(),
      start: new AsyncSeriesHook(),
      end: new AsyncSeriesWaterfallHook(['a', 'b'])
    }
  }
  async exec() {
    await this.hooks.prepare.promise()
    await this.hooks.start.promise()
    await this.hooks.end.promise(1, 2)
  }
}
const tapableRunner = new TapableRunner()
tapableRunner.hooks.prepare.tapPromise('prepareNode', prepareNode)
tapableRunner.hooks.prepare.tapPromise('prepareYarn', prepareYarn)
tapableRunner.hooks.start.tapPromise('prepareNode', prepareNode)
tapableRunner.hooks.start.tapPromise('prepareYarn', prepareYarn)
tapableRunner.hooks.end.tapPromise('pipe1', pipe1)
tapableRunner.hooks.end.tapPromise('pipe2', pipe2)
tapableRunner.exec()

//输出
//prepareYarn
//prepareNode
//prepareNode
//prepareYarn
//1 2 pipe1执行
//3 pipe2执行
  • 总结：对于一些较复杂的项目，插件化的开发方式，可以让我们的项目更加灵活，同时极高的增加项目的可维护性。我们常用的 Webpack 、 Rollup 等都存在 Plugins 机制的设计思想。通过定义好生命周期事件，之后暴露给外部介入，从而实现了不同的功能通过不同的插件来实现的行为
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
反向（或者后向）插件系统设计
程序猿老樊的博客
06-30 1354
反向（或者后向）插件系统与正向（或者前向）插件系统是一对概念相对的设计模式。正向插件系统是指系统架构的时候预先定义好一系列用于某种特定目的的函数族，然后通过共享库的形式封装不同的实现策略，已达到灵活配置的目的，正向插件系统的设计在于插件向主程序公开API；反向插件系统是指系统架构的时候并未想好应该区分哪些插件类型，但是为了主程序的扩展性，可以对主程序进行某种形式的API公开，这些公开的API可能不
插件模式系统设计
01-05
插件模式的系统框架设计例子，和Java的开源开发工具Eclipse类似，用插件的方式把想要的功能进行热插拔。
企业级服务器设计与实现经验之插件系统基础篇
zhuweisky
07-17 8598
最初之所以要采用插件的形式进行开发，主要是为了解决功能服务的“热插拔”问题，在决定采用“框架＋插件”的方式进行设计后，我们就更进一步，打算将一个个可以分割开来的拥有完整功能的组件都做成插件的形式，并且使同类型的插件的接口兼容，这样在以后需要改变时就可以灵活的进行替换。比如，将通信部分做成通信插件、日志记录部分做成日志插件等等。首先，我们要弄清楚，什么是插件？我给出了一个定义，可能有
一种松耦合的分层插件系统的设计和实现
weixin_34411563的博客
03-10 112
作者：朱金灿来源：http://blog.csdn.net/clever101 C++编写的桌面软件中传统的App+Dll的架构已经显现出的模块之间的强耦合、维护性差、升级不方便等诸多弊端，为此我进行了一些思考，有兴趣的朋友请看我以前的一个思考片断：《Windows平台下C++插件系统实现的几个关键技术问题及其解决思路》，今天则具体介绍的我的一个具体设计和实现。...
企业级服务器设计与实现经验之插件系统－－功能插件
zhuweisky
08-06 7188
    在DataServer中，功能插件位于功能服务器上，被框架用于处理所有的功能请求，功能请求的表现形式是数据流，即字节数组。    在描述功能插件的外貌之前，先有必要了解这个被功能插件处理的数据流，这个数据流可能基于某种流协议格式，也可以是被序列化的请求对象。所谓“基于格式的流协议”是这样一种消息协议，它定义了数据流的固定偏移处接下来的几个字节的含义，比如规定数据流从偏移为4的地
插件系统概述
tianyu的专栏 - Linux site:blog.csdn.net/wishfly
09-22 2086
插件系统概述普通的系统，在编译发布之后，系统就不允许进行更改或扩充了，如果要进行某个功能的扩充，则必须要修改代码重新编译发布。使用插件可以很好地解决这个问题。插件概念首先由开发人员编写系统框架，并预先定义好系统的扩展借口。插件由其他开发人员根据系统预定的接口编写的扩展功能，实际上就是系统的扩展功能模块。插件都是以一个独立文件的形式出现。对于系统来说并不知道插件的具体功能，仅仅是为插
基于Java编程语言的内网即时通讯插件系统设计与实现 (1).pdf
最新发布
12-29
"基于Java编程语言的内网即时通讯插件系统设计与实现" 本文主要介绍了基于Java编程语言的内网即时通讯插件系统的设计与实现。该系统采用B/S架构，使用Java语言进行开发，具有跨平台性、Socket、多线程等方面特性，...
.NET插件系统框架设计
02-21
（一）框架整体构想在应用程序开发过程中，存在很多模块重复开发的烦恼，于是收集资料开始动手，设计开发这插件系统框架，框架用于整合各个子插件。设计阶段一：将接口定义成单独程序集，让插件去实现这个接口，框架...
qt插件系统测试程序.zip
09-23
QT插件系统测试程序是一个基于QT框架的毕业设计...总的来说，"QT插件系统测试程序"是一个综合性的项目，涵盖了QT编程、数据库交互、插件系统设计等多个IT领域的知识，对于提升毕业生的实战能力和技术栈有极大的帮助。
也谈插件化系统开发
郭胜涛 的技术专栏
01-30 4797
何为插件化系统，插件化系统有何优势当一个软件项目开发结束并交付使用后，假如需要增加一些新的功能时，我们希望在不修改原有的应用程序情况下，将新增加的功能"插入"到系统中，这就是所谓的插件化，而新增加的功能模块就叫插件。 插件化技术并不是新的技术，早期很多基于COM的开发的Win32应用程序都是插件化的系统，IE浏览器就是一个典型。而IE浏览器下各种工具栏，如google或yahoo等
插件式架构设计
01-06
插件式的架构设计简单来说就是将一套系统中的算法和功能不同而接口相同的同类事物抽象为插件的一种架构设计方式。我更将其看作是策略模式在整个系统的应用，如果采用微服务架构，插件也可以理解为微服务中的微单元。甚至于微服务架构也可以理解为一定程度上的插件设计，微服务作为大系统的插件而存在。 我最初使用这种方式是在工作第一年，当时参与公司产品重新架构，使用C编写程序，利用C语言的动态库动态加载能力，我们实现了不同厂家设备的动态支持和适配。当时还没有这样的架构名称，我在后来的使用中，不断提炼核心思想，姑且将其命名为插件式架构设计。 插件式架构设计的抽象设计如图所示： 主要给出了基于插件体系的一系列相关层，
[架构设计]反向（或者后向）插件系统设计
weixin_33881050的博客
06-25 167
2019独角兽企业重金招聘Python工程师标准>>> ...
如何设计开发一个 Web 插件系统？
奇舞周刊
06-16 2331
借助插件，开发者可以很方便地解决自己的问题或者扩展特定场景功能。系统用户可以使用到更多功能特性。系统拥有者可以构建一个产品生态，并减少维护成本。显然这个一个三赢的方案。插件可以说是一种优秀...
JavaScript插件系统的设计
aio69762的博客
05-29 362
<占位符> JavaScript做为一种脚本语言，天然具有构建插件系统的优势。在require.js以及node.js出现后，插件系统在技术上已经没有阻碍。我们可以用require.js将大型系统分割为一个个的小模块，同时使用node.js中的文件操作将这些小模块打包压缩然后发布。 在插件系统的应用方面，jQuery，jQueryUI有自己的插件方式，不外乎按照指定的ke...
正向（或者前向）插件系统设计
程序猿老樊的博客
06-30 642
正向插件系统指的是在设计之初就已经定义好了一族用于特定功能的接口，然后通过共享库的形式隔离不同的实现策略，这样做不仅可以做到运行时按需选择实现策略，而且非常有利于功能的模块化测试。这种模式的插件系统是非常常见的，比如Adobe PS 对于不同文件格式、不同滤镜等的支持就是采用的就是正向插件系统设计。       现在我们来看一下这样的计算器程序怎么使用正向插件系统的思想进行实现。首先
系统设计 － 插件式框架
weixin_34194087的博客
12-26 154
插件式架构应用的经典是Eclipse。一般而言，一款软件使用插件式框架机制的原因主要基于以下3点： 1）无需更改或编译程序就可以扩展程序的功能 2）可以在不需要源代码的环境下扩展程序的功能 3）在一个程序的业务逻辑在不断发生变化仍能灵活适应。 插件式框架的最大魅力在于，把扩展功能从框架中剥离出来，降低了框架的复杂度，让框架更容易实现。扩展...
深入理解插件系统
热门推荐
青春不老，奋斗不止！
09-29 1万+
要开发一个成功的系统，插件是必经之路。
插件系统
劲爆音乐网
09-19 629
简介 插件是基于开发人员预先定义好的标准接口开发的独立部件，windows平台下多以dll形式呈现 有的公司在软件开发中，并不会做软件设计，更没有相关文档，纯粹想到哪写到哪，当软件完工进入维护/功能扩展阶段后，如果因为某种原因，新的人员进入软件改进。那么恭喜，新人员扩展功能非常困难，还得承担相当的破坏现有功能的风险 使用插件系统可以一定程度上解决上述问题，当系统需要的功能不变，仅需变更实现方...
.NET插件系统框架设计与优化
.NET插件系统框架设计是一种高效的方法，用于解决应用程序开发中模块重复开发的问题。该框架的主要目标是整合各个独立的子插件，使它们能够无缝地协同工作。在设计过程中，经历了多个阶段，每个阶段都针对特定的问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值