插件化架构设计(3):前端可视化化平台插件架构-grafana实践
插件实践方案
其实插件你就把它当一个组件来用就好。用起来就是异步组件加载。
-
vue异步组件加载，看官方文档:https://cn.vuejs.org/v2/guide/components-dynamic-async.html
-
react异步组件加载，其实更好办：在Suspense里面 渲染异步组件或者 是 通过state 渲染出 加载的虚拟 组件
vue异步组件加载
<template>
<div class="wrapper">
<h3 style="text-align:left;">VueComponentMode</h3>
<button @click="show = false">销毁</button>
<button @click="switchComponent('component1')">组件1</button>
<button @click="switchComponent('component2')">组件2</button>
<div class="a">
<component :is="apps" v-if="show"></component>
</div>
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: "VueComponent",
data() {
return {
show: false,
apps: 'ModelPage',
}
},
methods: {
/*
* 通过动态注册全局组件实现动态异步加载组件的功能
* */
switchComponent: function (component) {
Vue.component('ModelPage', () => import(`./${component}`));
//由于components改变后视图不会自动刷新, 需要手动刷新, 也可以使用this.$forceUpdate()
this.show = false;
let that = this;
window.setTimeout(function () {
that.show = true;
})
}
}
}
</script>
react粗暴版
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
componentDidMount() {
importComponent().then((mod) => {
this.setState({
// 同时兼容ES6和CommonJS的模块
component: mod.default ? mod.default : mod
});
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
}
return AsyncComponent;
}
react16.6 天赋就有懒加载
Vue TSX 异步加载插件
import SystemJS from 'systemjs/dist/system.js';
import { Component } from "vue-property-decorator";
import { Component as tsc } from "vue-tsx-support/lib/api";
interface Props {
}
interface Event {
}
@Component
export default class ChartWrapper extends tsc<Props, Event> {
tempCom = null
mounted(){
// import Comp from 'path/'
const Comp= SystemJS.import('path/')
this.$createElement(Comp, {
props: {
query: {
propsA: 'a',
},
onChange: (targets: any) => {},
},
})
}
render(){
return (<div>{this.tempCom}</div>)
}
}
组件/模块异步加载方案，请参看《前端模块化方案：前端模块化/插件化异步加载方案探索》
转载本站文章《插件化架构设计(3):前端可视化化平台插件架构-grafana实践》,
请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Architecture/8926.html
