JS懒加载模块封装

通过简短的代码讲述ES模块系统的活用

lazy.js

js 复制代码
/**
 * 懒加载模块
 * @template T
 * @param {()=>Promise<{ default: T }} declare 声明模块
 * @param {(module:T)=>void} customInit 自定义初始化函数,此函数会在执行exports时被调用一次
 */
export function lazyimport(declare, customInit) {
    return {
        wait: declare,
        /**模块实例,执行过exports后,此项才会有值
         * @type {T}*/
        instance: null,
        /**模块初始化
         * @type {()=>Promise<T>} */
        exports: async function () {
            if (!this.instance) {
                this.instance = (await this.wait()).default;
                if (customInit) {
                    customInit(this.instance);
                } else if (this.instance.init) {
                    this.instance.init();
                }
            }
            return this.instance;
        }
    }
}

用法举例

myModule.js

js 复制代码
function helloWord(){
	console.log('Crazy Thursday')
}
export default {
	helloWord
}

app.js

js 复制代码
import { lazyimport } from './lazy.js';
const myModule=lazyimport(()=>import('./myModule.js'));
async function callMyModule(){
	await myModule.exports();
	myModule.instance.helloWord();
}
//在合适的时机调用callMyModule
相关推荐
retun_true8 分钟前
Element UI 打包探索【2】
前端·javascript·node.js
王将近13 分钟前
Cesium实现3D热力图
前端·cesium
沉默璇年20 分钟前
react中的useCallback 有什么作用?
前端·react.js·前端框架
爱学习的执念21 分钟前
如何使用Jest测试你的React组件
前端·react.js·前端框架
乐容27 分钟前
react 中解决 类型“never”上不存在属性“value”。
前端·react.js·前端框架
木子七43 分钟前
vue2-路由Router
前端·vue
未 顾1 小时前
HTML-CSS-JS-day01:html常见的标签
javascript·css·html
tao_sc1 小时前
stm32启动过程解析startup启动文件
javascript·stm32·嵌入式硬件
知野小兔1 小时前
【Angular】eventDispatcher详解
前端·javascript·angular.js
苦逼的猿宝1 小时前
Echarts中柱状图完成横向布局
前端·javascript·echarts