构建一个JavaScript插件系统

本文译自 https://css-tricks.com/designing-a-javascript-plugin-system/

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

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

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

让我们构建一个插件系统

让我们从一个名为 BetaCalc 的示例项目开始。 BetaCalc 的目标是成为一个简约的 JavaScript 计算器,其他开发人员可以在其中添加“按钮”。下面是一些基本的代码,可以帮助我们入门:

// The Calculator
const betaCalc = {
 currentValue: 0,

 setValue(newValue) {
  this.currentValue = newValue;
  console.log(this.currentValue);
 },

 plus(addend) {
  this.setValue(this.currentValue + addend);
 },

 minus(subtrahend) {
  this.setValue(this.currentValue - subtrahend);
 }
};

// Using the calculator
betaCalc.setValue(3); // => 3
betaCalc.plus(3);   // => 6
betaCalc.minus(2);  // => 4

为了简单起见,我们将计算器定义为 object-literal 。该计算器通过 console.log 打印结果。

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

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

世界上最小的插件系统

我们将从创建一个 register 方法开始,其他开发人员可以使用它在 BetaCalc 上注册插件。这个方法的原理很简单: 获取外部插件,获取其 exec 功能,并将其作为新方法附加到我们的计算器上:

// The Calculator
const betaCalc = {
 // ...other calculator code up here
 register(plugin) {
  const { name, exec } = plugin;
  this[name] = exec;
 }
};

这是一个示例插件,为我们的计算器提供了一个 squared 按钮:

// Define the plugin
const squaredPlugin = {
 name: 'squared',
 exec: function() {
  this.setValue(this.currentValue * this.currentValue)
 }
};

// Register the plugin
betaCalc.register(squaredPlugin);

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

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

在我们的插件中, exec 函数包含我们的代码,名称是我们的元数据。当插件注册时, exec 函数直接作为方法附加到 betaCalc 对象上,从而使其可以访问 BetaCalcthis

现在, BetaCalc 有一个新的 squared 按钮,可以直接调用:

betaCalc.setValue(3); // => 3
betaCalc.plus(2);   // => 5
betaCalc.squared();  // => 25
betaCalc.squared();  // => 625

这个系统有很多优点。该插件是一种简单的对象字面量,可以传递给我们的函数。这意味着可以通过 npm 下载插件并将其作为 ES6 模块导入。

但是我们的系统有一些缺陷。

通过为插件提供对 BetaCalcthis 访问权限,插件可以对所有 BetaCalc 的代码进行读/写访问。虽然这对于获取和设置 currentValue 很有用,但也很危险。如果某个插件要重新定义内部函数(如 setValue ),则它可能会对 BetaCalc 和其他插件产生意外的影响。这违反了开放闭合原则,该原则规定,软件实体应该对扩展开放,对修改关闭。

同样的, squared 函数通过产生副作用发挥作用。这在 JavaScript 中并不少见,但感觉不是很好 —— 特别是当其他插件可能在处理同一内部状态时。一种更实用的方法将大大有助于使我们的系统更安全、更可预测。

更好的插件架构

让我们来看一个更好的插件架构。下一个示例更改了计算器及其插件 API :

// The Calculator
const betaCalc = {
 currentValue: 0,

 setValue(value) {
  this.currentValue = value;
  console.log(this.currentValue);
 },

 core: {
  'plus': (currentVal, addend) => currentVal + addend,
  'minus': (currentVal, subtrahend) => currentVal - subtrahend
 },

 plugins: {},  

 press(buttonName, newVal) {
  const func = this.core[buttonName] || this.plugins[buttonName];
  this.setValue(func(this.currentValue, newVal));
 },

 register(plugin) {
  const { name, exec } = plugin;
  this.plugins[name] = exec;
 }
};

// Our Plugin
const squaredPlugin = {
 name: 'squared',
 exec: function(currentValue) {
  return currentValue * currentValue;
 }
};

betaCalc.register(squaredPlugin);

// Using the calculator
betaCalc.setValue(3);   // => 3
betaCalc.press('plus', 2); // => 5
betaCalc.press('squared'); // => 25
betaCalc.press('squared'); // => 625

我们在这里做了一些值得注意的更改。

首先,我们将插件与“核心”计算器方法(如 plusminus )分开,方法是将其放在自己的插件对象中。将插件存储在一个 plugin 对象中可以使我们的系统更安全。现在,插件访问不到 BetaCalc 属性-他们只能访问到 betaCalc.plugins 的属性。

其次,我们实现了一个 press 方法,该方法按名称查找按钮的功能,然后调用它。现在,当我们调用插件的 exec 函数时,我们将当前的计算器值( currentValue )传递给它,并且我们期望它返回新的计算器值。

本质上,这种新 press 方法将我们所有的计算器按钮转换为纯函数。他们获取一个值,执行一个操作,然后返回结果。这有很多好处:

  • 简化了 API 。
  • 使测试更加容易(对于 BetaCalc 和插件本身)。
  • 减少了我们系统的依赖性,使其更松散地耦合在一起。

这个新的体系结构比第一个示例有更多的限制,但方式是好的。我们为插件作者设置了防护栏,限制他们只做我们想让他们做的改变。

实际上,它可能太严格了!现在,我们的计算器插件只能操作 currentValue 。如果插件作者想要添加高级功能,例如“内存”按钮或跟踪历史记录的方法,则无法做到。

也许没关系。你赋予插件作者的力量是微妙的平衡。给它们过多的权限可能会影响项目的稳定性。但是,给他们很少的权限会使他们很难解决他们的问题。

我们还能做什么?

我们还可以做很多工作来改善我们的系统。

如果插件作者忘记定义名称或返回值,我们可以添加错误处理以通知插件作者。像QA开发人员一样思考并想象我们的系统如何崩溃,以便我们能够主动处理这些情况。

我们可以扩展插件的功能范围。现在,一个 BetaCalc 插件可以添加一个按钮。但是,如果它还可以注册某些生命周期事件的回调(例如当计算器将要显示值时)怎么办?或者,如果有一个专用的位置来存储多个交互中的状态,该怎么办?

我们还可以扩展插件注册。如果可以使用一些初始设置注册插件怎么办?可以使插件更灵活吗?如果插件作者希望注册整个按钮套件而不是一个按钮套件(如 BetaCalc Statistics Pack ),该怎么办?为了支持这一点需要进行哪些更改?

你的插件系统

BetaCalc 及其插件系统都非常简单。如果你的项目较大,则需要探索其他一些插件体系结构。

一个很好的起点是查看现有项目,以获取成功的插件系统的示例。对于 JavaScript ,你可以查看 jQuery,Gatsby,D3,CKEditor 或其他。

你可能还想熟悉各种 JavaScript 设计模式。每种模式都提供了不同的接口和耦合程度,这为你提供了许多不错的插件体系结构选项供你选择。了解这些选项可以帮助你更好地平衡使用项目的每个人的需求。

除了模式本身之外,你还可以借鉴许多好的软件开发原则来做出此类决策。我已经提到了一些方法(例如开闭原理和松散耦合),但是其他一些相关的方法包括 Demeter 定律和依赖注入。

我知道这听起来很多,但是你必须进行研究。没有什么比让每个人都重写他们的插件更痛苦的了,因为你需要更改插件架构。这是一种失去信任并阻止人们在将来做出贡献的快速方法。

结论

从头开始编写好的插件架构很困难!你必须权衡许多考虑因素,以构建满足每个人需求的系统。够简单吗?足够强大吗?它可以长期工作吗?

值得付出努力。拥有一个好的插件系统可以帮助所有人。开发人员可以自由解决问题。最终用户可以获得大量的选择功能。这样你就可以在项目周围发展生态系统和社区。这是一个双赢的局面。

以上就是构建一个JavaScript插件系统的详细内容,更多关于JavaScript 插件的资料请关注我们其它相关文章!

(0)

相关推荐

  • 原生js实现日期选择插件

    最近公司项目告一段落,想着写个小玩意打发下上班时间,就用js很粗糙的实现了下日期选择插件.间间断断历时1天多,实现了选择日期的功能,从写完的整体代码来看,耦合度还是蛮高的,我觉得还是我对js中的原型继承方式理解不深刻,一定有更优雅的方式再优化下这份粗糙的代码,各位前端小伙伴们在看完我的代码后请麻烦指出其中实现的不好的地方,有批评指正让我有动力继续写博客嘛! 先说下这个插件的功能:功能很简单,目前只实现了选择一个日期(当然可以赋初始值,默认是当前日期),选择跨月日期时,会有一个粗糙的动画效果,效果

  • 环形加载进度条封装(Vue插件版和原生js版)

    本文实例为大家分享了环形加载进度条封装代码,供大家参考,具体内容如下 1.效果预览 2.用到的知识 主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性. 在看下面文章之前,你需要了解 <!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition

  • vue中jsonp插件的使用方法示例

    通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback <template> <div class="sky"> <h3>获取城市:</h3> <div class="skycon"></div> </div> </template> <script> //导入jsonp插件 import jsonp from 'jsonp';

  • Js视频播放器插件Video.js使用方法详解

    Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"

  • js实现拾色器插件(ColorPicker)

    对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇,这里奉上原生js版本的拾色器. 效果图: 讲下实现方式: 1.颜色除了RGB跟十六进制的表现外,还有一个HSV的表现形式.H(hue)是色相,值域是0度到360度,这个值控制的是你看到的是什么颜色,通俗点讲就是红橙黄绿...:S(saturation)是饱和度,值域是0到1,这个值控制颜色的鲜艳程度,可以理解为大红跟淡红的差别:V(value)可以理解为亮度,值域也是0到1. 2.rgb颜色跟hsv颜色的相互转化

  • JS实现滑动插件

    本文实例为大家分享了JS实现滑动插件的具体代码,供大家参考,具体内容如下 基本思路是封装一个Slider类, 拥有默认初始配置参数. Slider.prototype(原型链上)拥有实现滑动的方法,通过监听手势,实现滑动的效果. 比较复杂的滑动效果, 可以使用Swiper.js 来实现. /* PollyFill for iOS 5.* */ if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) {

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • TensorFlow.js 微信小程序插件开始支持模型缓存的方法

    通常情况下,微信小程序追求的是短小精悍,即开即用,用完即走,适用于一些简单的应用场景.然而,随着微信小程序开放能力的提高,人们发现用微信小程序可以实现越来越多的功能,小程序也越来越复杂,越来越庞大起来.这个可以从小程序的大小限制的变化看出,最开始小程序的大小限制为1M,后来限制为2M,最新微信又给小程序提供了分包加载机制,开发者将小程序划分成不同的子包,用户在使用时按需进行加载,所有分包大小限制提高到8M. 虽然小程序的大小限制已经大大提升,但对于小程序开发者而言,仍然捉襟见肘.随便几个图片资源

  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }

  • 构建一个JavaScript插件系统

    本文译自 https://css-tricks.com/designing-a-javascript-plugin-system/ 插件是库和框架的常见功能,并且有一个很好的使用它的理由:它们允许开发人员以安全,可扩展的方式添加功能.这就使核心项目更具价值,这种开放形势可以帮助项目建立社区,并且不会为我们增加额外的维护负担. 本文就使用 JavaScript 来构建一个我们自己的插件系统. 这里我使用的是 "pluginn" 一词,但这些东西有时也称为其他名称,例如"exte

  • 如何构建一个Vue插件并生成npm包

    vue的插件一般用来添加全局性的功能,具体可分为: 添加全局方法或者属性: 添加全局资源(指令.过滤器等): 通过全局 mixin 方法添加一些组件选项: 在 Vue.prototype 上 添加 Vue 实例方法: 创建一个库,提供自己的 API,同时提供上面提到的一个或多个功能: 一般来说我们在项目中倾向于第五种方式,可以通过创建一个js文件包含我们需要添加的多种全局性功能,指令.过滤器.实例方法之类的.这样的一个插件的构建也不难,主要就是使用vue提供的install 方法,传入Vue构造

  • 构建一个简单的CaaS系统

    在CaaS系统出现前企业应用架构基本被IaaS/SaaS/PaaS等模式垄断,直到Docker的出现为我们打开了另一个扇大门,废话不说了,我们直奔主题. 我们先了解下一个简单的CaaS系统是如何为用户提供服务的: 企业用户上传它的应用代码或其他代码托管方式,我们生成用户应用的镜像,或者用户直接上传镜像,或者用户直接使用我们提供的基础服务镜像 用户部署他的镜像应用,启动它的镜像容器 用户访问他的应用服务 OK,需求确定了,该搬砖了. 用户镜像制作 既然是一个简单的CaaS系统,我们就不让用户上传代

  • 创建与框架无关的JavaScript插件

    JavaScript 中的插件使我们能够扩展语言,以实现所需的某些强大(或不够强大)的功能.插件/库本质上是打包的代码,可以使我们免于一遍又一遍地编写相同的东西(功能). 在 JavaScript 生态系统中,有数百个框架,这些框架中的每一个都为我们提供了一个创建插件的系统,以便为框架添加新的东西. 如果你看一下 NPM 注册表,几乎所有的 JavaScript 插件都是在那里发布的,你会看到有超过一百万个插件以简单库和框架的形式发布. 为每个框架创建插件的方式可能会有很大不同.例如,Vue.j

  • 使用typescript+webpack构建一个js库的示例详解

    目录 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 运行webpack进行打包 测试验证 输出esm模块 已经输出了umd格式的js了, 为什么还要输出esm模块? ----TreeShaking 用tsc输出esm和类型声明文件 package.json中添加exports配置声明模块导出路径 完善package.json文件 用api-extrac

  • 详解开源的JavaScript插件化框架MinimaJS

    本文介绍我开发的一个JavaScript编写的插件化框架--MinimaJS,完全开源,源码下载地址:https://github.com/lorry2018/minimajs.该框架参考OSGi规范,将该规范定义的三大插件化功能在Node上实现了.MinimaJS三个功能:动态插件化,服务和扩展.该框架基于VSCode开发.使用ES6编码,基于Node 8开发,代码量几千行,非常的简单.优雅.轻量.框架的代码结构划分清晰,命名优雅. 我们先简单看一下,如何来使用这个框架. 通过这几行代码就可以

  • JavaScript插件化开发教程 (三)

    一,开篇分析 前面两篇文章我们主要讲述了以"jQuery的方式如何开发插件",以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式.那么今天从这篇文章开始,我们就以实例的方式带着大家由浅入深的开发属于自己的插件库.嘿嘿嘿,废话少说,进入正题.直接上实际效果图: 大家看到了吧,这是一个选项卡插件,在我们日常做那种单页应用("SPA")的时候或许会接触到,就拿今天的例子来说

  • 使用Vue.js和Flask来构建一个单页的App的示例

    在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地

  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 是一个全新的 Vue 项目脚手架.不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置.接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的. 整个插件系统当中包含2个重要的组成部分: @vue/cli,提供 cli 命令服务,例如vue create创建一个新的项目: @vue/cli-

  • Bootstrap整体框架之JavaScript插件架构

    本文实例为大家介绍了JavaScript插件架构的知识点,供大家参考,具体内容如下 1. JavaScript插件架构 如下是插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $

随机推荐