博客首页前端开发分类
前端开发之插件架构
发布时间:2020-4-9 15:31:23编辑:Mr.Co阅读(4728)
前端组件化开发
随着MVVM的框架和库的流行,想必组件化开发已经成为了前端开发的主流思想,特别是Vue、React、Angular已经有比较成熟的开发模式、社区和UI组件库。
现在的前端,开发页面代码量太、逻辑多、同一功能组件可能在多个页面中复用。而这些框架或库的出现,很好的将页面进行了功能拆分、组件封装,组件的通用性大大的提高了可维护性。同时功能单一的组件也极大的解耦了系统间功能的耦合,大大的提高了前端工程的开发和维护难度,提高了开发效率。
我在企业中的前端开发
我曾从事过多个类型的前端项目开发工作,初创型功能明确产品、成熟型功能明确产品、面向企业或单位的部分功能不明确产品都有涉猎。下面介绍一下我所遇到的产品特点。
初创型功能明确产品特点
- 1、产品功能很固定
- 2、需要不定期维护和更新
- 3、时常有新功能需要上线
成熟型功能明确产品
- 1、产品功能很固定
- 2、需要定期维护和更新
- 3、定期上线新功能
- 4、有2个以上类似系统重用绝大部分功能
- 5、开发上线不能影响其他功能
- 6、功能复杂,全站回归测试很耗时
面向企业或单位的部分功能不明确产品
- 产品需要在不同地方定制开发和部署
- 产品有很大部分功能相同或相似
- 需要进行后期维护
我如何解决代码重用、快速开发
『成熟型功能明确产品』和『面向企业或单位的部分功能不明确产品』都有一些共同的特点。
- 1、很大部分逻辑功能是相同的,它们可能会用在很多的系统里面
- 2、这些功能是需要维护的,不可能维护一个功能要去N个系统里面修改
- 3、修改某一部分功能不会影响到其他功能,可以随时上线,全站回归的成本太高。
而我的整体思路是渐进式的封装到可视化开发
- 1、建立内部UI组件库(封装粒度小)
- 2、基于UI组件库搭建业务组件库(封装粒度一般,有部分功能逻辑)
- 3、基于UI组件库和业务组件库建立插件库(封装粒度大,包含完整业务逻辑)
- 4、基于插件化开发的模板编译生成页面代码
- 5、基于平台的可视化配置+模板编译的低代码开发平台
什么是插件化开发
借用内核+应用软件开发的思想,首先有一个插件调度的核心,在这个核心的支持下可以开发支持这个核心的应用程序,我把这些应用程序称为『插件』,插件是一个具有完整逻辑的应用程序,它不依赖任何其他的插件,只需要依赖核心即可在系统中独立运行。
核心所包含内容
- 1、插件调度
- 2、基础组件(引用自建或第三方)
- 3、基础服务
- 3.1、http服务
- 3.2、数据格式转换
- 3.3、时间转换等
- 3.4、事件总线
- 3.5、其它
- 4、自动加载插件文件(异步
插件系统核心作为插件的环境依赖,为插件提供基本的服务、插件调度、事件和其他的一些基本功能。插件之间的相互调用可以通过插件核心进行传递,且这个调用是解耦的,不影响插件内部的逻辑。插件核心所提供的基础组件、业务组件来自于外部依赖,所以插件核心是一个相对精简的核心,可以通过外部依赖来扩展插件核心的功能。
插件的核心我已发布到NPM,可以通过NPM直接安装。
插件化开发DEMO
我也为插件化开发制作了一个DEMO,感兴趣的同学可以试试。
如何使用
目前只发布了React的DEMO,后期会开发Vue的DEMO
第一步:在项目中安装插件核心
npm i react-plugin-system
第二步:在webpack.config.js中添加plugin的alias,指定插件的目录
// webpack.config.js { alias: { "@plugins": path.resolve("./src/plugins"), }}
第三步:在入口文件注册插件
// src/index.jsimport { register } from "react-plugin-system"; let pages = require.context("@plugins", true, /\/.*config\.js$/); pages.keys().map(key => { let config = pages(key).default; // reigster plugins register(config); return config; });
第四步:编写一个插件,插件包含配置文件和代码文件,配置文件用于指定插件的唯一id和定义插件的入口文件,核心可以通过配置文件找到插件具体位置。插件代码文件用于编写插件具体业务。
// src/plugins/add/config.js export default { id: "add", index: "add/index.js" }; // scr/plugins/add/index.js import { message } from "antd"; export default function(config = {}) { const { calllBack = () => {} } = config; message.success("Add success!"); calllBack(); }
第五步:使用插件
// src/pages/*/*.jsx import React from "react"; import { callPlugin, Plugin } from "react-plugin-system"; export defalut class ButtonBox extends React.Component { constructor(props) { super(props); this.state = {}; } /** * add */ addHandle = async () => { // callPlugin const path = (callPlugin('add')); const plugin = await import("@plugins/" + path); (plugin.default)({ a: 1 }); } /** * infoClose */ infoCloseHandel = (data) => { console.log(data) } render() { const path = (callPlugin('info')); return <div> <Button icon="plus" onClick={this.addHandle}>ADD</Button> <Plugin importComponent={() => { return import("@plugins/" + path) }} onClose={this.infoCloseHandel} /> </div> } }其中包含组件方式和函数方式两种调用方式。
后期规划
目前开源还处于比较初级阶段。框架方面,后期将支持VUE;社区方面,将搭建一个插件市场,用于将开发好的插件发布到平台,可以在平台上进行插件搜索、插件预览;工具方面,将开发一个CLI,能快速初始化一个标准的插件开发环境,快速转换普通代码为插件,快速安装平台发布的插件;更深层次,将开发基于ejs编译的可视化平台,通过可视化平台进行在线配置,编译生成基于插件的可二次开发的低代码开发平台。
本项目纯个人爱好,希望有兴趣的同学可以提意见或则参与到项目完善中,如果觉得项目还有点意思,欢迎给我家star哦。
转载请注明出自:http://www.mrco.cn/article/5e8ecf4b50d36a3a09fc2548.html