插件化架构设计(3):前端可视化化平台插件架构-grafana实践
插件实践方案
其实插件你就把它当一个组件来用就好。用起来就是异步组件加载。
-
vue异步组件加载,看官方文档:https://cn.vuejs.org/v2/guide/components-dynamic-async.html
-
react异步组件加载,其实更好办:在Suspense里面 渲染异步组件或者 是 通过state 渲染出 加载的虚拟 组件
vue异步组件加载
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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粗暴版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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 异步加载插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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
标签:
插件化架构设计
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程