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
相关推荐
小桥风满袖2 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖11 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754413 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明17 分钟前
vue双向数据绑定失效
前端
bug_kada19 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG21 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada21 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾21 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州24 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪24 分钟前
CSS 动画属性精讲:从基础到实战
前端·css