远程组件实践

最新推荐文章于 2025-03-20 10:37:04 发布

奇舞周刊

最新推荐文章于 2025-03-20 10:37:04 发布

阅读量966

点赞数 1

本文链接：https://blog.youkuaiyun.com/qiwoo_weekly/article/details/129828219

版权

本文介绍了远程组件的概念，背景及技术实现。在低代码平台上，用户可远程下载UMD模块规范的组件，通过Vue CLI打包和注册。文章详细阐述了组件的注册、获取、渲染及其数据响应的流程，讨论了组件数据响应的开发者和接入者规范，并提出了未来可能的优化方向：微前端和微组件，探讨了引入IDE的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文作者为 360 奇舞团前端开发工程师

一、什么是远程组件

这里是指在生产环境中，从服务端远程下载一个JS文件并注册成组件，使其在生产环境中能够使用。

二、背景

1. 项目背景

我们的项目是个低代码平台，它内置了一些常用组件，可供用户使用。但内置组件不能够完全满足用户的需求，我们希望能够提供一个入口，用户自己上传自定义组件。这样可以极大的增加项目的可拓展性。

低代码平台

需求流程

这也是远程组件的一个典型场景。

2. 技术背景

项目使用的技术栈为 vue2。我们限定自定义组件开发的技术栈也是 vue2。

三、技术实现

1. 流程步骤

几个关键步骤

用户按照 UMD 模块规范开发组件
注册组件
获取到组件模块
渲染组件
响应用户的操作

2. 什么是 UMD 模块规范呢？

所谓 UMD^[1] (Universal Module Definition)，就是一种javascript通用模块定义规范，让你的模块能在 javascript 所有运行环境中发挥作用。

简言之就是能兼容主流 javascript 模块的规范，如CommonJS, AMD, CMD等。

下面是规范的代码，以及对应的说明：

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        // 这是 commonjs 模块规范，nodejs 环境
        var depModule = require('./umd-module-depended')
        module.exports = factory(depModule);
    } else if (typeof define === 'function' && define.amd) {
        // 这是 AMD 模块规范，如 require.js
        define(['depModule'], factory)
    } else if (typeof define === 'function' && define.cmd) {
        // 这是 CMD 模块规范，如sea.js
        define(function(require, exports, module) {
            var depModule = require('depModule')
            module.exports = factory(depModule)
        })
    } else {
        // 没有模块环境，直接挂载在全局对象上 
        root.umdModule = factory(root.depModule);
    }
}(this, function(depModule) {
    // depModule 是依赖模块
    return {
        name: '我自己是一个umd模块'
    }
}))

如果在 html 中直接使用 script 标签引用 umd 格式的 js 文件。就会走到第四个条件分支，即 直接