远程组件实践

本文作者为 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 文件。就会走到第四个条件分支，即 直接