懒加载代码

2025-04-05 | 0 浏览 | 0 评论

懒加载代码

我们可以创建一个函数 createLazyLoader，该函数接受一个标识符（例如 VConsoleLoader），以及一个回调函数（即实际要执行的代码）。这个函数将返回一个懒加载的占位符函数，可以用于任何需要懒加载的场景。

以下是你的代码的完整示例：

function createLazyLoader(identifier, callback) {
  // 使用闭包来保存状态
  let isLoaded = false;

  // 创建实际的加载函数
  function actualLoader() {
    if (!isLoaded) {
      isLoaded = true;
      callback();
    }
  }

  // 将实际的加载函数绑定到 window 对象上
  window[identifier] = function() {
    actualLoader();
  };
}

代码解释

闭包保存状态：
- let isLoaded = false; 用于保存是否已经加载的状态。
实际的加载函数：
- function actualLoader() { ... } 是实际执行的函数，它检查 isLoaded 状态，如果未加载，则执行 callback 并将 isLoaded 设置为 true。
绑定到 window 对象：
- window[identifier] = function() { ... }; 将实际的加载函数绑定到 window 对象上，使其成为一个全局函数。

使用示例

// 定义实际的代码函数
const VConsoleRealCodes = () => {
  console.log('VConsoleLoader is now loaded and executed.');
  // 这里添加你的实际代码逻辑
};

// 使用通用函数创建懒加载器
createLazyLoader('VConsoleLoader', VConsoleRealCodes);

// 你可以为其他变量使用相同的函数
const AnotherRealCodes = () => {
  console.log('AnotherLoader is now loaded and executed.');
  // 这里添加你的实际代码逻辑
};

createLazyLoader('AnotherLoader', AnotherRealCodes);

// 调用示例
window.VConsoleLoader(); // 输出: VConsoleLoader is now loaded and executed.
window.VConsoleLoader(); // 不会再次输出，因为已经加载过了
window.AnotherLoader();  // 输出: AnotherLoader is now loaded and executed.
window.AnotherLoader();  // 不会再次输出，因为已经加载过了

‍

笔记