AMD(Asynchronous Module Definition)

模块的依赖是在定义模块时就声明好的,并且作为参数传入模块的工厂函数。这意味着所有的依赖都需要在模块体开始执行之前被加载。

(function(global) {
    var modules = {}; // 用于存储定义的模块

    // 定义模块
    function define(name, dependencies, factory) {
        if (!modules[name]) { // 避免重复定义
            // 保存模块,包括依赖和模块工厂函数
            modules[name] = {
                dependencies: dependencies,
                factory: factory,
                module: { exports: {} },
                isLoaded: false
            };
        }
    }

    // 加载模块
    function require(names, callback) {
        var requiredModules = names.map(function(name) {
            return loadModule(name);
        });

        callback.apply(null, requiredModules);
    }

    // 加载单个模块
    function loadModule(name) {
        var module = modules[name];
        if (!module) {
            throw new Error('Module ' + name + ' not found');
        }

        if (!module.isLoaded) {
            // 加载依赖
            var dependencies = module.dependencies.map(function(dependencyName) {
                return loadModule(dependencyName);
            });

            // 调用工厂函数,传入依赖
            var exports = module.factory.apply(null, dependencies);
            if (exports) {
                module.module.exports = exports;
            }

            module.isLoaded = true;
        }

        return module.module.exports;
    }

    // 暴露全局变量
    global.define = define;
    global.require = require;
})(this);

// 使用示例
// 定义模块
define('module1', [], function() {
    return {
        hello: function() {
            return 'Hello Module 1';
        }
    };
});

// 使用模块
require(['module1'], function(module1) {
    console.log(module1.hello()); // 输出: Hello Module 1
});

CMD(Common Module Definition)

模块的依赖更倾向于被按需加载,即在模块体内部的任何地方通过require方法来获取,只有当模块真正需要某个依赖时,才去加载该依赖。

(function(global) {
    var modules = {}; // 存储定义的模块

    // 定义模块
    function define(id, factory) {
        if (!modules[id]) { // 避免重复定义
            modules[id] = {
                factory: factory,
                exports: null, // 模块的导出对象,初始为null
                initialized: false // 标记模块是否已被初始化
            };
        }
    }

    // 加载模块
    function require(id) {
        var module = modules[id];
        if (!module) {
            throw new Error('Module ' + id + ' not found');
        }

        // 如果模块尚未初始化,则初始化模块
        if (!module.initialized) {
            // 调用模块工厂函数,初始化模块
            module.exports = {};
            var exports = module.factory.call(null, require, module.exports) || module.exports;
            module.exports = exports;
            module.initialized = true;
        }

        return module.exports;
    }

    // 暴露全局变量
    global.define = define;
    global.require = require;
})(this);

// 使用示例
// 定义模块
define('exampleModule', function(require, exports) {
    // 模块内容
    exports.sayHello = function() {
        return 'Hello, CMD!';
    };
});

// 加载并使用模块
var example = require('exampleModule');
console.log(example.sayHello()); // 输出: Hello, CMD!

cynthia
1 声望0 粉丝