Stories

Detail Return Return

AMD和CMD的最簡單實現 - Stories Detail

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!

Add a new Comments

Some HTML is okay.