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!