前端插件机制剖析及业界案例分析

导语

如果你的工具型面对的对象有很丰富的场景需求,或者不想再为频繁的增减需求而频繁迭代,是时候考虑为你的系统设计一款插件系统。

插件机制

插件机制:

前端插件机制剖析及业界案例分析

 

 

Core-Plugin 架构的组成

  • Core:基础功能,提供插件运行的环境,管理插件的注册与卸载(可拔插)以及运行,也即管理插件的生命周期。

  • PluginApi:插件运行的接口,由 Core 抽象出来的接口。(颗粒度尽可能小)

  • Plugin:每个插件都是一个独立的功能模块。

Core-Plugin 模式的好处,总结几点:

  • 提高扩展性;

  • 减少因功能改变而引起的项目迭代,即使是需要扩展基础功能,也可以以插件的形式单独发包,配合 monorepo

  • 充分利用开发者 / 开源的力量,激发更多的想法;

开箱即用的库 / 组件功能模块相比,可能比较明显的缺点就是,Plugin 的开发需要遵循规范,复杂一点的库(比如 Babel、webpack)还需要理解其运行原理,会相对有些门槛。

插件机制在开源项目中的运用

babel 插件机制

官方定义:Babel 是一个 JavaScript 编译器。

babel 大家都很熟悉,最重要的功能是将 ES6 版本的代码转换为 ES5 语法,使我们的代码能兼容不同的浏览器以及版本。随着 ES 语法的日渐丰富和扩展,对 babel 转换代码的规则也有更多的要求,babel 提供了一套插件机制支持开发者自定义插件来实现特殊的转换规则。在了解 babel 插件机制之前,需要掌握如下知识点:

  1. babel 转换流程。

  2. 如何开发 babel 插件。

  3. babel 插件的执行流程。

babel 转换流程:

推荐一个网站:https://astexplorer.net/,在线 AST 解析器。

  • 分析 (parse) 通过语法解析和词法分析生成 抽语法树 (AST);babel 用工具库 @babel/parser 来解析 ast

例子

上一篇:yugabytedb之DocDB复制层


下一篇:基于SpringBoot+AntDesign的快速开发平台,JeecgBoot 2.0.2 版本发布