请选择 进入手机版 | 继续访问电脑版
在线投稿 文字标题 文字标题 文字标题 文字标题 文字标题
切换皮肤
前端组件化开发


随着MVVM的框架和库的流行,想必组件化开发已经成为了前端开发的主流思想,特别是Vue、React、Angular已经有比较成熟的开发模式、社区和UI组件库。
现在的前端,开发页面代码量太、逻辑多、同一功能组件可能在多个页面中复用。而这些框架或库的出现,很好的将页面进行了功能拆分、组件封装,组件的通用性大大的提高了可维护性。同时功能单一的组件也极大的解耦了系统间功能的耦合,大大的提高了前端工程的开发和维护难度,提高了开发效率。

c66f41ca219849a987b74f5b496dd9db.png 我在企业中的前端开发

我曾从事过多个类型的前端项目开发工作,初创型功能明确产品、成熟型功能明确产品、面向企业或单位的部分功能不明确产品都有涉猎。下面介绍一下我所遇到的产品特点。

初创型功能明确产品特点
1. 产品功能很固定
2. 需要不定期维护和更新
3. 时常有新功能需要上线
成熟型功能明确产品
1. 产品功能很固定
2. 需要定期维护和更新
3. 定期上线新功能
4. 有2个以上类似系统重用绝大部分功能
5. 开发上线不能影响其他功能
6. 功能复杂,全站回归测试很耗时
面向企业或单位的部分功能不明确产品
1. 产品需要在不同地方定制开发和部署
2. 产品有很大部分功能相同或相似
3. 需要进行后期维护

c66f41ca219849a987b74f5b496dd9db.png 我如何解决代码重用、快速开发

『成熟型功能明确产品』和『面向企业或单位的部分功能不明确产品』都有一些共同的特点。

很大部分逻辑功能是相同的,它们可能会用在很多的系统里面
这些功能是需要维护的,不可能维护一个功能要去N个系统里面修改
修改某一部分功能不会影响到其他功能,可以随时上线,全站回归的成本太高。
而我的整体思路是渐进式的封装到可视化开发
1. 建立内部UI组件库(封装粒度小)
2. 基于UI组件库搭建业务组件库(封装粒度一般,有部分功能逻辑)
3. 基于UI组件库和业务组件库建立插件库(封装粒度大,包含完整业务逻辑)
4. * 基于插件化开发的模板编译生成页面代码
5. * 基于平台的可视化配置+模板编译的低代码开发平台

c66f41ca219849a987b74f5b496dd9db.png 什么是插件化开发


借用内核+应用软件开发的思想,首先有一个插件调度的核心,在这个核心的支持下可以开发支持这个核心的应用程序,我把这些应用程序称为『插件』,插件是一个具有完整逻辑的应用程序,它不依赖任何其他的插件,只需要依赖核心即可在系统中独立运行。
核心所包含内容
1. 插件调度
2. 基础组件(引用自建或第三方)
3. 基础服务:http服务、数据格式转换、时间转换等、事件总线、其它
4. 自动加载插件文件(异步)
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0409%2F9c910bb6j00q8iaw1000dc000b80091m.jpg

插件系统核心作为插件的环境依赖,为插件提供基本的服务、插件调度、事件和其他的一些基本功能。插件之间的相互调用可以通过插件核心进行传递,且这个调用是解耦的,不影响插件内部的逻辑。插件核心所提供的基础组件、业务组件来自于外部依赖,所以插件核心是一个相对精简的核心,可以通过外部依赖来扩展插件核心的功能。
插件的核心我已发布到NPM,可以通过NPM直接安装。

c66f41ca219849a987b74f5b496dd9db.png 插件化开发DEMO

我也为插件化开发制作了一个DEMO,感兴趣的同学可以试试。

在我的系统定义中,每个插件都会被编译为一个文件,
每个插件的调用都是异步的。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0409%2Fe3a50b4fj00q8iaw1000rc000hs009om.jpg
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0409%2F64354e84j00q8iaw1000rc000hs009pm.jpg
如何使用

目前只发布了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
ADD
{ return import("@plugins/" + path) }} onClose={this.infoCloseHandel} />

}
}

其中包含组件方式和函数方式两种调用方式。

c66f41ca219849a987b74f5b496dd9db.png 后期规划


目前开源还处于比较初级阶段。框架方面,后期将支持VUE;社区方面,将搭建一个插件市场,用于将开发好的插件发布到平台,可以在平台上进行插件搜索、插件预览;工具方面,将开发一个CLI,能快速初始化一个标准的插件开发环境,快速转换普通代码为插件,快速安装平台发布的插件;更深层次,将开发基于ejs编译的可视化平台,通过可视化平台进行在线配置,编译生成基于插件的可二次开发的低代码开发平台。



[size=0.28]特别声明

回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则


    Archiver|手机版|小黑屋|齐聚无忧 |网站地图

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.