前端领域的插件式设计

插件，是一个常见的概念。

例如，当我们需要把我们前端代码中的 css 样式提取打包，我们可以用 webpack 的 mini-css-extract-plugin，或者你如果用 rollup 的话，可以选择 rollup-plugin-postcss。

再比如我们可以给 babel 配置 @babel/plugin-proposal-decorators 插件来支持装饰器语法；

除了上述打包编译相关的工具，我们使用的代码编辑器也都支持各式各样的插件，动态地给软件增加各种能力，例如通过 Prettier 插件来是 VsCode 支持 Prettier 的代码格式化，或者安装主题插件来改变软件样式等。

除此之外，一些前端领域的框架也都有插件的机制，譬如 Vue，DvaJS，Eggjs 等。React 也有一些插件化开发的框架，例如 DevExtreme Reactive （以下简称 DR），React Pluggable。

认识插件

那什么是插件呢？

所谓插件（Plug-in / Plugin），是一种可以把某些能力或特性添加到某个已有主体程序的程序，它通常遵循一定的编写规范，并只能运行在特定的主体程序中。

插件的设计能带来许多好处，例如

  • 它可以极大地提升软件的可扩展性。很多工程工具都提供了插件能力给开发者，借助社区力量基于插件扩展各种原本不具备的能力，从而极大地提升了生命力；

  • 它可以让主体程序和插件代码解耦，保持主体程序的稳定。可以想象如果 webpack 不是通过插件来扩展能力，那当我们需要某个当前版本不具备的能力时，只能不断地升级 webpack，而这种升级则很容易引入不稳定因素。

  • 它可以帮助我们控制主体程序复杂度。借助插件，我们可以很好地把能力分而治之，化整为零，从而有效地控制系统整体的复杂度。

  • 它可以帮助我们控制程序体积，做到按需引用。由于插件是可以独立地动态加载，我们可以针对性地选择我们需要的插件能力。我们也可以设想，VsCode 如果是把各种能力都由自己完成，其软件大小会是怎样的规模（其实也不会是现在的形态了，比如针对各个编程领域提供一个应用包）。

虽然上面提到的软件都有支持插件，但也各有特点。

从插件的深入程度上来说

  • 一些程序插件就是其核心机制，其程序主体相对精简，大部分能力都是依赖插件来扩充的。例如 webpack 、babel 等大部分代码都是插件，主体主要是软件生命周期调配，状态流转等，以及少量核心能力的实现。再比如 https://github.com/DevExpress/devextreme-reactive 中提供的几个复杂 React 组件也基本上是一个一个插件来完成的。

  • 相比之下，另一些程序的插件更多是对其能力上的一个补充，其插件能完成的工作相对有限（主体程序暴露的给插件的能力较少），但能很好地完成某些场景的扩展。

而从插件面向的开发者来说，也有几种方式

  • 对主体程序开发和第三方开发者一视同仁，都以相同的插件机制来扩展能力。这类程序通常也具备上面提到的插件作为核心机制的特征，例如 webpack 就是典范。个人认为这种机制可以提供能力强大的插件机制，但同时也模糊了两类开发者的界限，使得上手开发插件的门槛相对较高，甚至很多时候需要了解原本系统提供的插件实现。

  • 插件机制是为了方便主体程序开发者，不对第三方开发者暴露。https://github.com/DevExpress/devextreme-reactive 的 PivotGrid 底层是基于插件化的框架，但是暴露给 PivotGrid 开发者的属性则基本没有插件的痕迹，已经做了封装。

  • 插件是为了第三方开发者扩展系统能力。这类主体程序通常不依赖插件机制来实现特定功能，插件机制只是为了提供扩展能力，通常这类插件机制提供的能力也相对特化。

插件化设计的改造案例

除了我们去使用一个一个的插件，我们也可以把插件化的设计引入到我们自己的系统中，下面抛砖引玉，按照笔者的理解介绍一些基本的设计思路，当然插件的设计方式并非固定的，我们也不应当公式化地套用模式，核心在于体会其设计思想。

当我们设计一个插件系统时，我们要考虑几个问题：

  • 程序中哪些是易变的，哪些是相对稳定的。易变的部分应暴露出相应的能力由插件来完成。

  • 插件如何影响程序。通常会以扩展行为，修改状态，变更展示的方式体现。

设想一个这样一个例子，我们有一个简易的计算器程序，支持加减法：

 class Calculator {construct(initial) {this.num = initial;}add(num) {this.num = this.num + num;return this;}subtract(num) {this.num = this.num - num;return this;}result() {return this.num;}}const myCalculator = new Calculator(5);myCalculator.add(5).subtract(2).result(); // 8

可以很容易想到，计算器的主要抽象是运算，即当前值和一个新值的运算过程，这部分是稳定的，而支持的运算逻辑是可扩展的，适合做成插件，因此我们可以做如下的改造：

 // 程序主体，定义程序核心逻辑是增加计算器运算能力class Calculator {plugins = [];construct(initial) {this.num = initial;}use(plugin) {this.plugins.push(plugin);this[plugin.name] = plugin.calculate.bind(this);}result() {return this.num;}}// 插件声明interface Plugin {name: string;calculate(num: number) => this;}// 插件实现class AddPlugin implements Plugin {name: 'add',calculate(num) {this.num = this.num + num;return this;}}class SubtractPlugin implements Plugin {name: 'subtract',calculate(num) {this.num = this.num - num;return this;}}const myCalculator = new Calculator(5);// 插件安装myCalculator.use(new AddPlugin());myCalculator.use(new SubtractPlugin());myCalculator.add(5).subtract(2).result(); // 8

经过这个改造，未来如果要实现乘法，我们只需要新增一个插件实现即可，无需修改程序主体：

 class MultiplicatiPlugin implements Plugin {name: 'multiplicati',calculate(num) {this.num = this.num * num;return this;}}

再比如我们要增加一个 help 来打印支持的计算也可以快速实现：

 class Calculator {...help() {return `support ${this.plugins.map(plugin => plugin.name).join(',')}`;}}

通过上面的例子，从插件的角度可以分成几个部分：

  • 程序主体（Program），即上面的 Calculator；

  • 插件接口声明（Plugin Interface），即上面的 Plugin；

  • 插件实现（Plugin Implementation），即 AddPlugin，SubtractPlugin，MultiplicatiPlugin；

在一些更复杂的例子里还会有 Plugin Loader 用于加载和管理 plugin。

图片

插件设计的案例分享

我们已经对插件设计有了一个基本的认识，我们再来看看一些开源库的插件设计案例

Webpack

webpack 核心模块为 compiler 和 compilation，他们都有各自的声明周期钩子（Hook），插件开发者可以借助这些 Hook 来完成各种能力，因此 webpack 核心便是定义声明周期（或者叫事件流），并在各个声明周期中调用插件在对应声明周期注册的方法。不过在同一个生命周期注册了多个事件时，我们还需要关注几个问题：

  • 同步执行还是异步执行；

  • 并行执行还是串行；

  • 如果执行会产生结果，那么对其他 Hook 的结果会产生什么影响；

上述问题 webpack 封装了一个 Hook 的核心库 Tapable， compiler 和 compilation 都是基于 Tapable 的实现，根据上面的维度提供了不同的 Hook 类：

图片

img

网上有很多很不错的专门介绍 Tapable 文章，这里就不继续展开介绍，但我们可以对其有个感性的认识，实际上可以把它看做加强版的 EventEmitter。不仅 webpack 会面临这个问题，另一个构建工具 rollup 也能看到类似的模块来解决这类问题，在其代码中有一个 PluginDriver 模块（https://github.com/rollup/rollup/blob/master/src/utils/PluginDriver.ts）就是起类似的作用。

DevExtreme Reactive

最后再来聊一聊一个比较有意思的 React 插件化框架 DevExtreme Reactive。

DevExtreme Reactive （以下简称 DR）是 DevExpress 公司开发的一个开源 React 组件库，目前包含了 Grid / Chart / Scheduler 三个复杂组件，这三个组件都是基于一个插件化框架进行开发的。

一个插件的例子如下：

 import { PluginHost, Plugin, Template, Getter, Action } from '@devexpress/dx-react-core';export default function PluginRoot(props) {const { chidren } = props;return <PluginHost>{children}</PluginHost>;}export function FeatureA() {return (<Plugin name="A"><Template name="...">...</Template><Getter name="..." /><Action name="..." /></Plugin>);}export function FeatureB() {return (<Plugin name="B"><Template>...</Template><Getter name="..." /><Action name="..." /></Plugin>);}// App.jsximport PluginRoot, { FeatrueA, FeatureB, ... FeatureN } from './MyComponnent;'const App = () => (<PluginRoot><FeatureA /><FeatureB />...<FeatrueN /></PluginRoot>);ReactDOM.render(<App />, rootNode);

其中：

  • PluginHost 是主体程序入口，用于定义主体程序基本组成。

  • Plugin 是插件的根节点。

  • Getter 用于定义或复写一个状态，在程序中共享（可以用于自己，或其他插件消费）。即修改状态。

  • Action 用于定义或复写一个操作在程序中共享。即扩展行为。

  • Template 可以用来定义或复写一个展示片段，同样可以被自己，或其他插件的 Template 消费。即变更展示。需要注意的是，Template 只是定义，真正生效取决于某个 Template 引用这个具名片段。和上面介绍的构建工具不同，作为一个组件的插件化框架，展示的插件化也是一个重要的课题，而 Template 就是这个能力的核心。

插件的各个能力和注册方式都采用组件形式引用，充分契合 React 书写方式。

TodoApp

当然这些介绍还是不太直观，我们来看一个具体的例子。

例如我们要做一个 Todo 应用，我们可以如下实现

 import { PluginHost, Plugin, Template, Getter, Action } from '@devexpress/dx-react-core';const TodoApp = ({ children }) => {return (<PluginHost><TodoCore />{/* ========= plugins ========= */}<TodoHeader /><TodoList /><TodoStore /></PluginHost>)}const TodoCore = () => {return (<Plugin>{/* 基本的状态管理 */}<TodoStore /><Template name="root">{/* 定义布局 */}<section className="todoapp"><TemplatePlaceholder name="header" /><TemplatePlaceholder name="main" /></section></Template></Plugin>);};const TodoHeader = () => {...}const TodoList = () => {...}const App = () => {return (<TodoApp />)}ReactDOM.render(<App />, rootNode);

图片

如果我们需要增加一个功能支持设置完成，我们可以通过编写如下的插件来支持：

 // TodoCompletable.tsxconst TodoCompletable = () => {...return (<Plugin name="completable">{/* 扩展 main 的布局，增加 footer，在 footer 中展示 complete 对应的操作 */}<Template name="main"><TemplatePlaceholder /><TemplatePlaceholder name="footer" /></Template>{/* 扩展状态和操作 */}<Getter name="todos" computed={getTodoWithCompletedStatus} /><Action name="completeTodo" action={completeTodoAction} /><Action name="activeTodo" action={activeTodoAction} />{/* 扩展 todoItem 展示，增加 checkbox */}<Template name="todoItem">{({ todo }) => (<TemplateConnector>{(getters, { completeTodo, activeTodo }) => (<div className="view"><inputclassName="toggle"type="checkbox"checked={todo.completed}onChange={(e) => {if (e.target.checked) {completeTodo(todo.id);} else {activeTodo(todo.id);}}}/>{/* TemplatePlaceholder 表示直接使用原来 todoItem 定义的展示 */}<TemplatePlaceholder /></div>)}</TemplateConnector>)}</Template>{/* Footer 的具体实现 */}<TodoFooter /></Plugin>);};// 引入插件const TodoApp = () => {return (<PluginHost>{...}{/* completable plugin */}<TodoCompletable /></PluginHost>);};

图片

可以看到，标签功能完全插件化了，原来的代码不需要做任何调整！而且相关功能完全在一个模块中实现（如果我们正常 React 的写法会在多个组件中感知逻辑，改动肯定是分散的，而目前的写法我们可以轻松增加或移除此 feature）！详细例子可以参考写的例子：https://stackblitz.com/edit/dr-todo-demo?file=App.tsx

通过上面的介绍，想必大家可以感受到插件化设计的魅力了，感谢看到这里，希望能对大家有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/168658.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

RDB.js：适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js：适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…
阅读更多...
X32位汇编和X64位区别无参函数分析（一）

X32位汇编和X64位区别无参函数分析（一）

前言 一、X32汇编函数无参无返回分析 二、X64汇编函数无参无返回分析 总结 前言 提示&#xff1a;以下是个人学习总结&#xff1a;如有错误请大神指出来&#xff0c;只供学习参考&#xff0c;本内容使用使用VS2017开发工具&#xff1a;语言是C&#xff0c;需要一些常见的汇编指…
阅读更多...
MySQL1——喵喵期末不挂科

MySQL1——喵喵期末不挂科

宝宝&#xff0c;你不点个赞吗&#xff1f;不评个论吗&#xff1f;不收个藏吗&#xff1f; 最后的最后&#xff0c;关注我&#xff0c;关注我&#xff0c;关注我&#xff0c;你会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的很重要…
阅读更多...
阶段六-Day04-MyBatis2

阶段六-Day04-MyBatis2

一、别名 Alias 1. 为什么使用别名 一般映射文件中会包含大量<select>标签, 每个<select>中都需要配置resultType"com.bjsxt.pojo.People"&#xff0c;MyBatis提供了别名机制可以对某个类起别名或给某个包下所有类起别名&#xff0c;简化resultType取值…
阅读更多...
sklearn-6算法链与管道

sklearn-6算法链与管道

思想类似于pipeline&#xff0c;将多个处理步骤连接起来。 看个例子&#xff0c;如果用MinMaxScaler和训练模型&#xff0c;需要反复执行fit和tranform方法&#xff0c;很繁琐&#xff0c;然后还要网格搜索&#xff0c;交叉验证 1 预处理进行参数选择 对于放缩的数据&#x…
阅读更多...
性能测试 —— Jmeter 命令行详细

性能测试 —— Jmeter 命令行详细

我们在启动Jmeter时 会看见&#xff1a;Don’t use GUI mode for load testing !, only for Test creation and Test debugging.For load testing, use CLI Mode (was NON GUI) 这句话的意思就是说&#xff0c;不要使用gui模式进行负载测试&#xff0c;gui模式仅仅是创建脚本…
阅读更多...
Unity 通过jar包形式接入讯飞星火SDK

Unity 通过jar包形式接入讯飞星火SDK

最近工作上遇到了要接入gpt相关内容的需求&#xff0c;简单实现了一个安卓端接入讯飞星火的UnitySDK。 或者也可以接入WebSocket接口的。本文只讲安卓实现 我使用的Unity版本为2021.3.27f1c2 Android版本为4.2.2 1.下载SDK 登陆讯飞开放平台下载如图所示SDK 2.新建安卓工程…
阅读更多...
【广州华锐互动】关于物理力学的3D实验实操平台

【广州华锐互动】关于物理力学的3D实验实操平台

在科学的广阔领域中&#xff0c;物理力学是一个至关重要的分支&#xff0c;它探索了物体在力作用下的运动规律。然而&#xff0c;传统的物理实验往往需要复杂的设备和大量的操作&#xff0c;这对于学生来说是一项巨大的挑战。为了解决这个问题&#xff0c;广州华锐互动开发了物…
阅读更多...
django 商品及购物车逻辑实现

django 商品及购物车逻辑实现

基于类视图模式实现商品分类菜单接口开发 创建菜单子应用 python manage.py startapp menu测试 apps/menu/views from django.http import HttpResponse from django.views import Viewclass GoodsMainMenu(View):def get(self,request):print("get请求")return …
阅读更多...
二叉搜索树进阶--AVL树详细实现过程

二叉搜索树进阶--AVL树详细实现过程

目录 AVL树概念AVL树实现AVL树基础结构插入插入&#xff1a;左旋实现插入&#xff1a;右旋实现 AVL树完整实现代码&#xff1a; 之前学习到的二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中…
阅读更多...
实现Traefik工具Dashboard远程访问：搭建便捷的远程管理平台

实现Traefik工具Dashboard远程访问：搭建便捷的远程管理平台

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…
阅读更多...
HTML笔记-狂神

HTML笔记-狂神

1. 初识HTML 什么是HTML&#xff1f; Hyper Text Markup Language : 超文本标记语言 超文本包括&#xff1a;文字、图片、音频、视频、动画等 目前使用的是HTML5&#xff0c;使用 W3C标准 W3C标准包括&#xff1a; 结构化标准语言&#xff08;HTML、XML&#xff09; 表现标…
阅读更多...
大二第三周总结（算法+生活）

大二第三周总结（算法+生活）

算法&#xff1a; 题目&#xff1a;有效的括号 这个题目也是做过很多回了。主要就是数据结构中”栈“的应用&#xff0c;先进后出。 解题思路&#xff1a; 1.创建 Map 哈希表形成键值对映射 2.进行遍历字符串 在遍历过程中 如果 遍历到的字符c 是左括号&#xff0c;则入栈 pu…
阅读更多...
大小端字节序存储

大小端字节序存储

大小端字节序存储&#xff1a;是以字节为单位讨论它在内存中的存储顺序&#xff0c;而不是更小的二进制位 例如&#xff1a; int main() {int a 0x11223344;return 0; }a在内存中的存储16进制为44 33 22 11&#xff0c;两个16进制为一个单位进行存储&#xff0c;而两个十六进…
阅读更多...
Leetcode—260.只出现一次的数字III【中等】

Leetcode—260.只出现一次的数字III【中等】

2023每日刷题&#xff08;三&#xff09; Leetcode—260.只出现一次的数字III 借助lowbit的解题思想 参考的灵茶山艾府大神的题解 实现代码 /*** Note: The returned array must be malloced, assume caller calls free().*/ int* singleNumber(int* nums, int numsSize, in…
阅读更多...
git rebase 和 git merge的区别？

git rebase 和 git merge的区别？

一、是什么 在使用 git 进行版本管理的项目中&#xff0c;当完成一个特性的开发并将其合并到 master 分支时&#xff0c;会有两种方式&#xff1a; git mergegit rebase git rebase 与 git merge都有相同的作用&#xff0c;都是将一个分支的提交合并到另一分支上&#xff0c…
阅读更多...
谈谈你对spring boot 3.0的理解

谈谈你对spring boot 3.0的理解

谈谈你对spring boot 3.0的理解 一&#xff0c;Spring Boot 3.0 的兼容性 Spring Boot 3.0 在兼容性方面做出了很大的努力&#xff0c;以支持存量项目和老项目。尽管如此&#xff0c;仍需注意以下几点&#xff1a; Java 版本要求&#xff1a;Spring Boot 3.0 要求使用 Java 1…
阅读更多...
Web前端—Flex布局：标准流、浮动、Flex布局、综合案例（短视频首页解决方案）

Web前端—Flex布局：标准流、浮动、Flex布局、综合案例（短视频首页解决方案）

版本说明 当前版本号[20231024]。 20231024初版 目录 文章目录 版本说明目录Flex布局01-标准流02-浮动基本使用产品区域布局HTML标签CSS样式 清除浮动场景搭建额外标签法单伪元素法双伪元素法overfow法 03-Flex布局Flex组成主轴对齐方式侧轴对齐方式修改主轴方向弹性伸缩比弹…
阅读更多...
概率论_概率公式中的分号(；)、逗号(,)、竖线(|) 及其优先级

概率论_概率公式中的分号(；)、逗号(,)、竖线(|) 及其优先级

目录 1.概率公式中的分号(;)、逗号(,)、竖线(|) 2.各种概率相关的基本概念 2.1 联合概率 2.2 条件概率&#xff08;定义&#xff09; 2.3 全概率(乘法公式的加强版) 2.4 贝叶斯公式 贝叶斯定理的公式推导 1.概率公式中的分号(;)、逗号(,)、竖线(|) ; 分号代表前后是两类…
阅读更多...
最新Tuxera NTFS2023最新版Mac读写NTFS磁盘工具 更新详情介绍

最新Tuxera NTFS2023最新版Mac读写NTFS磁盘工具 更新详情介绍

Tuxera NTFS for Mac是一款Mac系统NTFS磁盘读写软件。在系统默认状态下&#xff0c;MacOSX只能实现对NTFS的读取功能&#xff0c;Tuxera NTFS可以帮助MacOS 系统的电脑顺利实现对NTFS分区的读/写功能。Tuxera NTFS 2023完美兼容最新版本的MacOS 11 Big Sur&#xff0c;在M1芯片…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023