插件化架构设计(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