gaius blog

Appearance

引言 ​

在低代码平台中，组件的可扩展性是核心需求之一。开发者希望在不修改平台核心代码的情况下，动态加载第三方组件或自定义组件，同时支持组件库的灵活管理和更新。
本文将以一个基于 Vue 的 DynamicLoader 类为核心，探讨如何在低代码平台中实现动态组件加载，解决组件扩展性和维护性问题，并提供可复用的技术方案。

低代码平台的组件扩展性挑战 ​

  1. 动态加载需求
    • 第三方组件需通过远程资源（如 CDN）加载，避免打包到主应用中。
    • 支持按需加载，减少初始资源体积。
  2. 组件管理复杂性
    • 组件可能以单文件或嵌套的树形结构（组件库）形式存在。
    • 需要统一管理组件名称、导出名及资源 URL。
  3. 运行时注册与隔离
    • 使用iframe动态加载组件，确保不影响平台核心代码。

动态组件加载器的设计与实现 ​

1. 核心数据结构 ​

通过类型定义区分 单组件 和 组件树，支持灵活配置：

typescript
export interface LibItem {
    title:string
    package:string
    version:string
    description?:string
    exportName:string
    componentName:string
    urls:string[]
}

export interface  LibTreeChild extends Pick<LibItem,'componentName'|'exportName'> {}

export interface LibTree extends Omit<LibItem,'componentName'> {
   children:LibTreeChild[]
}

2. 核心流程 ​

动态加载器的运行流程分为以下阶段：

  1. 初始化阶段
    • 挂载 Vue 到全局对象，确保远程组件能正确依赖 Vue。
    • 解析组件配置，生成资源 URL 列表和组件映射关系。
  2. 资源加载阶段
    • 并行加载所有 JS 和 CSS 文件，确保依赖顺序。
  3. 组件注册阶段
    • 从全局对象（如 window）中提取组件，并映射到平台内可用的名称。

3. 关键代码解析 ​

1.资源分类与加载
通过 handleUrls 方法分离脚本和样式，实现并行加载：

typescript
handleUrls() {
  const urls = this.libs.map(lib => lib.urls).flat();
  urls.forEach(url => {
    if (url.endsWith('js')) {
      this.scripts.push(url);
    } else if (url.endsWith('css')) {
      this.styles.push(url);
    }
  });
}

2.动态加载与注册
通过 load 方法协调资源加载和组件注册：

typescript
load(): Promise<Record<string, DefineComponent>> {
  return new Promise((resolve, reject) => {
    Promise.allSettled([
      ...this.styles.map(url => this.loadStyle(url)),
      ...this.scripts.map(url => this.loadScript(url))
    ]).then(() => {
      this.registerComponents();
      resolve(this.components);
    }).catch(reject);
  });
}

3.组件树解析
支持嵌套组件库的递归解析，确保复杂结构的兼容性：

typescript
handleLibs(libs: Array<LibItem | LibTree> = this.libs) {
  libs.forEach(lib => {
    if (this.isLibTree(lib)) {
      this.handleLibChildren(lib as LibTree); // 递归处理子组件
    } else {
      this.componentsMap.set(lib.exportName, {
        exportName: lib.exportName,
        componentName: lib.componentName
      });
    }
  });
}

在低代码平台中的应用场景 ​

  1. 第三方组件集成
    • 开发者上传自定义组件包（含 JS/CSS），平台通过 DynamicLoader 动态加载并注册。
  2. 模块化功能扩展
    • 按业务需求加载不同的组件库（如报表组件、图表组件）。
  3. 热更新与版本管理
    • 通过更新组件 URL 实现热修复或多版本共存。

优化与扩展方向 ​

  1. 依赖管理
    • 目前对于两个组件之间存在依赖关系的场景无法处理，需要检测组件间的依赖关系，确定对应的加载顺序（如组件 A 依赖组件库 B）。
  2. 沙箱隔离
    • 通过此方式动态加载组件时，可能会存在样式冲突的问题，建议通过iframe（天然的样式隔离）的方式进行组件的加载。
  3. 错误处理
    • 当前DynamicLoader在加载错误时没有对应的保底机制，实际使用时，这方面也是需要考虑的。

总结 ​

本文提出的 DynamicLoader 方案通过以下方式解决了低代码平台的组件扩展性问题：

  1. 标准化组件描述：通过 LibItem 和 LibTree 统一管理组件元数据。
  2. 动态资源加载：按需加载远程脚本和样式，降低主应用体积。
  3. 自动化注册：将组件从全局对象映射到平台内部，简化使用流程。
    该方案为低代码平台提供了一种轻量、可扩展的组件管理思路，适用于需要快速迭代和动态扩展的场景。

附录一：DynamicLoader ​

typescript
import * as Vue from 'vue'
import type { DefineComponent } from 'vue'
import type { LibItem, LibTree, LibTreeChild } from '@/model'

export class DynamicLoader {

    libs: Array<LibItem | LibTree>;


    scripts: string[] = [];


    styles: string[] = [];


    componentsMap: Map<string, LibTreeChild | LibTreeChild[]> = new Map();


    components: Record<string, DefineComponent> = {};


    constructor(libs: Array<LibItem | LibTree>) {
        this.libs = libs;
        this.init();
    }


    init() {
        // cdn加载的方式需要在window上挂载Vue
        //@ts-ignore
        if (!window.Vue) {
            //@ts-ignore
            window.Vue = Vue;
        }
        this.handleLibs();
        this.handleUrls();
    }


    handleUrls() {
        const urls = this.libs.map(lib => lib.urls).flat();
        urls.forEach(url => {
            if (url.endsWith('js')) {
                this.scripts.push(url);
            } else if (url.endsWith('css')) {
                this.styles.push(url);
            }
        });
    }


    load(): Promise<Record<string, DefineComponent>> {
        return new Promise((resolve, reject) => {
            Promise.allSettled([
                ...this.styles.map(url => this.loadStyle(url)),
                ...this.scripts.map(url => this.loadScript(url))
            ]).then(() => {
                this.registerComponents();
                resolve(this.components);
            }).catch((e) => {
                reject(e);
            });
        });
    }


    registerComponents() {
        for (const [libName, componentItem] of this.componentsMap) {
            if (Array.isArray(componentItem)) {
                componentItem.forEach(component => {
                    //@ts-ignore
                    this.components[component.componentName] = window[libName][component.exportName];
                });
            } else {
                //@ts-ignore
                this.components[componentItem.componentName] = window[componentItem.exportName];
            }
        }
    }


    handleLibChildren(data: LibTree) {
        const childComponents = data.children.map(child => {
            return {
                exportName: child.exportName,
                componentName: child.componentName
            };
        });
        this.componentsMap.set(data.exportName, childComponents);
    }


    handleLibs(libs: Array<LibItem | LibTree> = this.libs) {
        libs.forEach(lib => {
            if (this.isLibTree(lib)) {
                this.handleLibChildren((lib as LibTree));
            } else {
                this.componentsMap.set(lib.exportName, {
                    exportName: lib.exportName,
                    componentName: lib.componentName
                });
            }
        });
    }


    isLibTree(lib: LibItem | LibTree): lib is LibTree {
        return 'children' in lib;
    }


    loadScript(url: string): Promise<any> {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.async = false;
            script.onload = resolve;
            script.onerror = reject;
            document.body.appendChild(script);
        });
    }


    loadStyle(url: string): Promise<any> {
        return new Promise((resolve, reject) => {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = url;
            link.onload = resolve;
            link.onerror = reject;
            document.head.appendChild(link);
        });
    }
}

附录二：使用示例 ​

typescript
// 定义组件库配置
const libs = [
  {
    title: 'element',
    package: 'element-plus',
    version: '2.9.2',
    exportName: 'ElementPlus',
    urls: [
      'https://cdn.jsdelivr.net/npm/element-plus@2.9.2/dist/index.full.min.js',
      'https://cdn.jsdelivr.net/npm/element-plus@2.9.2/dist/index.min.css'
    ],
    children: [
      {
        componentName: 'ElButton',
        exportName: 'ElButton'
      },
      {
        componentName: 'ElInput',
        exportName: 'ElInput'
      }
    ]
  },
];

// 初始化加载器
const loader = new DynamicLoader(libs);

// 加载并注册组件
loader.load().then((components) => {
  // 在低代码平台中使用组件
  console.log(components['ElButton'])
});