js define实现

实现自定义 define 方法

在 JavaScript 中，可以通过多种方式实现类似 define 的功能，通常用于模块定义或依赖管理。以下是几种常见实现方式：

简单对象注册模式

使用全局对象存储模块定义：

const registry = {};

function define(name, dependencies, factory) {
  if (arguments.length === 2) {
    factory = dependencies;
    dependencies = [];
  }

  const module = factory();
  registry[name] = module;
}

function require(name) {
  return registry[name];
}

AMD 规范实现

实现异步模块定义(AMD)的基本结构：

(function() {
  const modules = {};
  const inProgress = {};

  function define(deps, factory) {
    const id = document.currentScript.getAttribute('data-module-id');
    Promise.all(deps.map(dep => load(dep)))
      .then(resolvedDeps => {
        modules[id] = factory.apply(null, resolvedDeps);
      });
  }

  function load(name) {
    if (modules[name]) return Promise.resolve(modules[name]);
    if (inProgress[name]) return inProgress[name];

    const promise = new Promise(resolve => {
      const script = document.createElement('script');
      script.src = `${name}.js`;
      script.setAttribute('data-module-id', name);
      script.onload = () => resolve(modules[name]);
      document.head.appendChild(script);
    });

    inProgress[name] = promise;
    return promise;
  }

  window.define = define;
  window.require = load;
})();

ES6 模块包装器

将传统模块包装为 ES6 模块：

const define = (function() {
  const modules = new Map();

  return function(name, deps, factory) {
    if (arguments.length < 3) {
      factory = deps;
      deps = [];
    }

    const resolvedDeps = deps.map(dep => modules.get(dep));
    modules.set(name, factory(...resolvedDeps));
  };
})();

依赖注入实现

实现依赖注入风格的模块定义：

function define(container = new Map()) {
  return {
    register(name, value) {
      container.set(name, value);
    },
    get(name) {
      return container.get(name);
    },
    factory(name, deps, fn) {
      const resolved = deps.map(dep => this.get(dep));
      this.register(name, fn(...resolved));
    }
  };
}

每种实现方式适用于不同场景，简单对象注册适合小型应用，AMD实现适合浏览器环境，ES6包装器适合模块迁移，依赖注入适合测试场景。