如何构建JavaScript插件系统

本篇文章给大家分享的是有关如何构建JavaScript插件系统,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

插件是库和框架的常见功能,并且有一个很好的使用它的理由:它们允许开发人员以安全,可扩展的方式添加功能。这就使核心项目更具价值,这种开放形势可以帮助项目建立社区,并且不会为我们增加额外的维护负担。

本文就使用JavaScript来构建一个我们自己的插件系统。

这里我使用的是“pluginn”一词,但这些东西有时也称为其他名称,例如“扩展”,“附件”或“模块”,无论你叫什么,它的含义(和收益)都是相同的。

<强>让我们构建一个插件系统

让我们从一个名为<代码> BetaCalc> BetaCalc> 计算器,其他开发人员可以在其中添加“按钮”。下面是一些基本的代码,可以帮助我们入门:

//计算器
　　const betaCalc={
　　currentValue: 0,
　　
　　setValue (newValue) {
　　这一点。currentValue=https://www.yisu.com/zixun/newValue;
　　console.log (this.currentValue);
　　},
　　
　　+(加数){
　　this.setValue(这一点。currentValue +加数);
　　},
　　
　　-(减数){
　　this.setValue(这一点。currentValue -减数);
　　}
　　}；//使用计算器
　　betaCalc.setValue (3);//=> 3
　　betaCalc.plus (3);//=> 6
　　betaCalc.minus (2);//4=> 

为了简单起见,我们将计算器定义为<代码>对象> 控制台。日志>

现在功能真的很简单。我们有一个<代码> setValue 方法,它接受一个数字并将其显示在“屏幕”上。我们还有<代码>和和<代码> - 方法,它们将对当前显示的值执行操作。

是时候添加更多的功能了。让我们从创建一个插件系统开始。

<强>世界上最小的插件系统

我们将从创建一个<代码> 注册方法开始,其他开发人员可以使用它在<代码> BetaCalc> 执行功能,并将其作为新方法附加到我们的计算器上:

//计算器
　　const betaCalc={//渌扑闫鞔?
　　注册(插件){
　　const{名称、exec}=插件;
　　这[名字]=执行;
　　}
　　};

这是一个示例插件,为我们的计算器提供了一个<代码> 按平方钮:

//定义插件
　　const squaredPlugin={
　　名称:& # 39;平方# 39;
　　执行:函数(){
　　this.setValue(这一点。currentValue * this.currentValue)
　　}
　　}；//注册插件
　　betaCalc.register (squaredPlugin); 

在许多插件系统中,插件通常分为两个部分:

<李>要执行的代码李 <李>元数据(例如名称,描述,版本号,依赖项等)

在我们的插件中,<代码>执行函数包含我们的代码,名称是我们的元数据。当插件注册时,<代码>执行函数直接作为方法附加到<代码> betaCalc> betaCalc 的<代码> 。

现在,<代码> betaCalc> 按平方钮,可以直接调用: