背景

首先我们要先知道苍穹平台是怎么拉取控件资源的。

当需要加载到某个自定义控件时，会去主动拉取执行控件的 index.js 文件，并执行。

例如：

(function(KDApi){
    // 构造函数
    function demo (model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    demo.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        // 控件初始化触发
        init: function(props){
            initFunc(this.model, props)
        },
        // 数据返回时触发
        update: function(props){
        },
        // 控件销毁时触发（这个单词都写错了哈哈哈）
        destoryed: function(){
        }
    }


    let initFunc = function(model, props) {
        // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
        KDApi.loadFile('./css/demo.css', model, function() {
            // 通过路径去获取html字符串，第一个参数是路径，第二个参数是model，第三个参数是HTML模板中变量的值
            KDApi.getTemplateStringByFilePath('./html/demo.html', model, {
                text: '这是一个示例'
            }).then(function(result) {
                model.dom.innerHTML = result // 挂载
            })
        })
    }

    // KDApi注册一个id号，这个id号要和控件方案的id号对应
    KDApi.register('demo', demo)
})(window.KDApi)

可以看出特点：

控件在注册的时候需要传入一个构造函数/类。
除了 index.js 入口资源外，其他资源需要通过 KDApi 的API去拉取。

考虑到我们的起步工程都是基于 Webpack + 框架，当打包的产物资源变多或者用了哈希值名称后，我们还需要在 index.js 里去手动修改引入这些资源，显得不是那么方便。

动态拉取策略

所以工程采用的是 JS 动态拉取策略去加载资源，例如我在 Vue3 工程里的 index.ts 是这样做的：

import { ModelType, ReturnDataType } from "./types/model";
import appConfig from "../app.config";
import { createApp } from "vue";
const { APP_NAME } = appConfig;
// 创建一个全局变量来存储root
const inCosmic = window.KDApi !== undefined; // 是否在苍穹环境中

declare global {
  interface Window {
    KDApi: KDApiType;
  }
}
type KDApiType = {
  register: (a: string, b: typeof InitComponent) => void;
};

export class InitComponent {
  model: ModelType;
  constructor(model: ModelType) {
    this.model = model;
    import("./App.vue").then((AppModule) => {
      const AppGlobal = AppModule.default;
      const App = createApp(AppGlobal);
      App.provide("model", model);
      if (inCosmic) {
        App.mount(this.model.dom as HTMLElement);
      } else {
        // ram模式下没有window.KDApi
        App.mount("#app");
      }
    });
  }
  init(props: ReturnDataType) {
    console.log("-----init", this.model, props);
  }
  update(props: ReturnDataType) {
    console.log("-----update", this.model, props);
  }
  destoryed() {
    console.log("-----destroyed", this.model);
  }
}

const init = (KDApi: KDApiType) => {
  KDApi.register(APP_NAME, InitComponent);
};

// 初始化应用程序
if (inCosmic) {
  init(window.KDApi);
} else {
  // ...
}