专栏首页青笔原创前端插件化架构的思考

前端插件化架构的思考

前言

有挺长时间没有更新博客了。一来是公司比较忙,二是自己也在思考一些新的问题。最近一个月,在我脑海回想最多的一个词语是“插件化架构”。作此文,也是想简单分享一下我对这个问题的见解。

来自 Webpack 的启发

去年有参与过 Udacity 前端课程翻译。其中我翻译了构建工具部分。Webpack 作为当前主流构建工具,深刻影响着前端开发工作流的变革,正如课程中所说,Webpack 聚合当前前端构建工具所有最热门的构建技术,甚至可以说,它可以作任何构建工具能作的事。那么 Webpack 为什么这么全能,是因为 Webpack 自身这么能干,精通十八般武艺?No !事实上 Webpack 比想象的要“无能”,它的全能是因为它能容万物只所能。因为 Webpack 本身是一个高度插件化设计的系统,它所表现的能力都借助于真正身怀绝技的插件的赋能。当然,我这里所说的插件包含了 Webpack 的内置插件以及通过配置传入的plugins。可以说,Webpack 只抽象了一个软件运行时环境,在不关心和改动这个系统已有代码的前提下,却能独立开发新的插件来充实整个系统的能力。这不就是软件设计中所要追求的开闭原则的最佳实践吗?从 Webpack 的插件化架构设计上所表现出系统良好的开放性,可持续的简洁性,我自然想象到,为何不在业务系统中采用这样的插件化架构。

什么是插件?

插件的英文是plugin,拆分开是plug(插头) + in,现实生活生活中,电源插线板就是这样”plugin”应用的例子。插线板和通过插头插入其中的电器构成一个物理世界的插件化系统。插线板通过插孔为“插件”提供电源,而给系统赋予了插件的能力。插入电视的插头,就拥有看电视的功能,插入冰箱的插头就具有冷藏食物的功能,插入台灯的插头,就具备照明的功能,等等。

一个良好设计的插件化系统和插线板的设计也是一样一样的。系统的核心应该是一个可热插拔的“插线板”,负责给系统接入的插件提供电源(插件API),系统的能力是所有插件能力的聚合。和物理世界的插线板不同是,软件插线板的插头没有数量的限制,也就是说系统可以接入任意数量的插件,意味着它的功能可以无限增加。

如何设计一个插件化的系统?

如果类比插线板的方式设计一个完全插件化的系统,系统将包含三个部分:

  • pluggableCore: 插件运行时核心
  • pluginApi: 为插件运行提供访问运行时接口
  • plugin: 实现具体功能的插件

其中 pluggableCorepluginApi 是插件化系统的核心部分,或者内部系统,一旦设计好了,不会轻易改变的;而plugin是外部系统,通过pluginApi访问系统内核和全局状态,实现对应用全生命周期的访问和控制,只需要遵循接口的定义,plugin 可以将自身能力赋予给任何插件化系统,而不是与某一个特定的系统耦合在一起。 事实上,plugin 也分为两个部分。我们依然可以与现实世界的电器,例如上文的电视机对比,它包含用于接入电源的插头和用于播放电视节目物理实现,我们可以看到,虽然电视机是通过电源线才成为整个系统中的插件一员,但它的物理实现远比电源线复杂的多,甚至可以独立出来一个复杂的系统。同样,插件化系统中,插件的功能实现也可能是一个可独立出来复杂系统,而只是通过一个简单的插件注册或应用接口接入另一个插件的系统。

以 webpack 的插件为例。以下是 webpack 插件的模版:

import VeryComplicatedSystem from "VeryComplicatedSystem";

class AwesomeWebpackPlugin {
    apply(compiler) {
        VeryComplicatedSystem.apply(compiler);
    }
}

我们看到插件的电源线就是包含apply方法的类,只需要5行代码。而插件的功能实现可以是一个独立的复杂系统,它还可以是多个插件的聚合。当然从设计上,插件的功能单一更有利于复用。这里所要表达的是我们应该把插件看作一个可以脱离插件系统本身存在的功能完整软件系统,让这个系统成为插件而为另一个插件化系统赋能并不需要重写内部实现,而只是加上一根符合插件标准的电源线而已。这样理解,有助于我们设计出更容易复用的插件,同时也可以复用已有软件的系统。

插件化架构的优势

正如前文所说,插件化架构一个显而易见的优势就是它是开闭原则在跨系统级别的最佳实践。何为跨系统,如果说设计模式是设计单个系统的最佳实践,那么我们已经论证,插件化架构可以链接多个子系统,而做到开闭原则。即插件核心和接口不变,系统可以持续接入新插件,来丰富系统的功能。并且,由于新接入的插件是一个独立的子系统,它可独立开发,运行和进行版本管理,不会因为接入的系统复杂而增加接入成本。试想,在一个非插件化的系统中,业务系统就算经过良好设计,随着功能模块的增多,代码量激增,暂且不考虑系统构建和测试,我们想要给系统加入新的功能,甚至是修复已有功能的BUG,都会越来越困难和低效,但插件化架构的系统,增加新功能,不是在一个庞大系统代码库中,而是在一个较小的系统或代码仓库中,因此不管已有系统多复杂,开发新的功能的接入复杂度始终一样。同时,开发编译或修复测试一个插件,也比针对整个系统要简单得多。

插件与组件的区别

插件本质也是一种软件复用方式,和我们常说的组件区别是复用的维度不同。组件的复用颗粒度更细,它是技术级复用单元,需要经过进一步加工和组合才能成为解决某一类业务问题的完整部分,而插件是一个更加完整可以解决某一类业务问题的子系统,是业务级别的复用单元。

插件化架构的未来

这里不好说它一定是未来。暂且认为是我设想的未来发展的一种可能。即通过建立一个插件标准,实现业务系统的全面插件化,所有以开发和正在的开发的系统都不是耦合在一个特定的系统,而很难独立出来,在不同系统复用。全面的插件化,意味着,我们不用重复造业务轮子,团队和企业可以持续积累自己的插件生态,让软件开可以像汽车等工业制造一样,打造一条标准化装配的流水线。

结语

本文的观点仅是个人思考,尚未经过权威的论证。其中的设想有过初期实践,但尚未形成一个完整的可以推广的技术框架,这部分笔者本人还在探索中,就不贴出来,感兴趣的读者可以关注我的 github。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • macOS 安装 mysql

    打开下载页面 https://dev.mysql.com/downloads/mysql/5.7.html ,下载镜像安装文件。

    我是一条小青蛇
  • nodejs 打印五彩斑斓的"黑"

    笔者上一篇博客 《如何在命令行中显示五彩斑斓的“黑”》,讲到了任何编程都可以在命令行终端打印彩色字体和彩色背景的文字,以及一些简单文本格式(粗体,下划线,闪烁,...

    我是一条小青蛇
  • JPEG 图片存储格式与元数据解析

    说到图片,我们首先会想到,几种常见图片格式,如:.jpg, .png, .gif 等。

    我是一条小青蛇
  • 360开源全面插件化方案RePlugin—让你像玩乐高一样开发APP

    6月30日,360手机卫士插件化RePlugin正式开源,该款插件化方案可以帮助主程序在“确保极其稳定”的前提下,做到“无需升级主程序”就能支持新增组件、插件。...

    Anymarvel
  • 从Elasticsearch的插件实现机制见:如何在Java中实现一个插件化系统

    此外,笔者还对Java的流行插件框架PF4J进行的简单的了解,发现其实现方式和ES比较相似:都是由ClassLoader实现,感兴趣的读者可以自行了解。

    franyang
  • 推荐一些typecho好用的插件

    搭建typecho必须推荐几款好用的插件,因为typecho本身轻量,轻量导致舍弃了很多功能,所以必须使用一些插件来实现一些功能。 比如我现在在用的就是这些。

    月萌
  • 【Chromium中文文档】插件架构

    背景 在阅读这个文档前,你应当熟悉Chromium的多进程架构。 概述 插件是浏览器不稳定的主要来源。插件也会在渲染器没有实际运行时,让进程沙箱化。因为进程是第...

    梦里茶
  • 学术资讯 |【优Tech分享】视频AI应用中的C++插件化实践

    引子:本文主要介绍了插件机制,特别是C++语言的插件框架设计,并对实际业务中的服务进行了插件化改造的实践。

    优图实验室
  • 用git当御用图床的一款typecho插件—GitStatic

    最近我写了一篇jsdelivr当图床的文章, jsdelivr图床 遗憾的是github+jsdelivr当图床貌似没有typecho插件,用picgo上传貌似...

    乔千
  • 【插件开发】—— 2 插件入门

      最近由于特殊需要,开始学习插件开发。 以前接触java也算有些时日,但是一直不知道有插件开发这样一种技术路径,本想着这开发工具都给你备好了,直接用不就行了...

    用户1154259

扫码关注云+社区

领取腾讯云代金券