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
相关推荐
BillKu4 分钟前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰26 分钟前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
machinecat26 分钟前
node,小程序合成音频的方式
前端·node.js
我是日安27 分钟前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js
跟橙姐学代码28 分钟前
不要再用 print() 了!Python logging 库才是调试的终极武器
前端·python
ze_juejin30 分钟前
JavaScript 中预防 XSS(跨站脚本攻击)
前端
我是天龙_绍32 分钟前
🐴 记住了,节流(throttle)与防抖(debounce)
前端
NeverSettle_32 分钟前
React工程实践面试题深度分析2025
javascript·react.js
凡二人33 分钟前
Flip-js 优雅的处理元素结构变化的动画(解读)
前端·typescript
争当第一摸鱼前端34 分钟前
Electron中的下载操作
前端