程序猿指南
Search K

Appearance

JavaScript AMD和CMD规范2024：前端开发者掌握异步模块定义完整指南 ​

📊 SEO元描述：2024年最新JavaScript AMD和CMD规范教程，详解异步模块定义、RequireJS使用方法。包含完整代码示例和最佳实践，适合前端开发者快速掌握浏览器端模块化技术。

核心关键词：JavaScript AMD CMD 2024、异步模块定义、RequireJS使用、浏览器模块化、AMD CMD规范对比

长尾关键词：AMD和CMD规范区别、RequireJS怎么使用、异步模块加载、浏览器端模块化方案、JavaScript模块化规范对比

📚 AMD和CMD规范学习目标与核心收获 ​

通过本节JavaScript AMD和CMD规范详解，你将系统性掌握：

  • ✅ AMD规范基础：理解异步模块定义的设计理念和核心特性
  • ✅ RequireJS实战：熟练使用RequireJS进行模块化开发和依赖管理
  • ✅ CMD规范理解：掌握CMD规范的特点和与AMD的区别
  • ✅ 异步加载机制：深入理解浏览器环境下的异步模块加载原理
  • ✅ 模块化配置：学会配置和优化AMD/CMD模块加载器
  • ✅ 实际应用场景：了解AMD/CMD在现代前端开发中的应用和演进

🎯 适合人群 ​

  • 前端开发进阶者的浏览器端模块化技术学习
  • JavaScript开发者的模块化规范知识完善
  • 前端架构师的模块化方案选择参考
  • 技术历史学习者的前端模块化演进理解

🌟 为什么需要AMD和CMD？浏览器模块化的挑战 ​

AMD和CMD是什么？这是理解前端模块化演进的重要环节。AMD（Asynchronous Module Definition）和CMD（Common Module Definition）是为浏览器环境设计的异步模块化规范，解决了浏览器中JavaScript模块化的核心问题。

浏览器环境的模块化挑战 ​

  • 🎯 网络延迟：模块需要通过HTTP请求加载，存在网络延迟
  • 🔧 异步加载：浏览器环境需要异步加载模块，避免阻塞页面渲染
  • 💡 依赖管理：复杂的模块依赖关系需要合理的加载顺序
  • 📚 缓存优化：需要充分利用浏览器缓存机制
  • 🚀 性能考虑：模块加载性能直接影响用户体验

💡 核心理念：AMD和CMD的设计目标是在保持模块化优势的同时，适应浏览器环境的异步特性和性能要求

模块化在浏览器中的演进 ​

javascript
// 📈 浏览器模块化演进历程

// 1. 全局变量时代（问题重重）
// script1.js
var utils = {
    formatDate: function(date) {
        return date.toLocaleDateString();
    }
};

// script2.js
var userModule = {
    currentUser: null,
    login: function(username) {
        this.currentUser = { name: username };
        // 依赖全局的utils，但无法确保加载顺序
        console.log('Login time:', utils.formatDate(new Date()));
    }
};

// HTML中需要严格控制加载顺序
// <script src="script1.js"></script>
// <script src="script2.js"></script>

// 2. 命名空间时代（改进但仍有限制）
var MyApp = MyApp || {};

MyApp.Utils = {
    formatDate: function(date) {
        return date.toLocaleDateString();
    }
};

MyApp.UserModule = {
    currentUser: null,
    login: function(username) {
        this.currentUser = { name: username };
        console.log('Login time:', MyApp.Utils.formatDate(new Date()));
    }
};

// 3. AMD时代（异步模块定义）
// utils.js
define(function() {
    return {
        formatDate: function(date) {
            return date.toLocaleDateString();
        }
    };
});

// user.js
define(['./utils'], function(utils) {
    return {
        currentUser: null,
        login: function(username) {
            this.currentUser = { name: username };
            console.log('Login time:', utils.formatDate(new Date()));
        }
    };
});

// main.js
require(['./user'], function(userModule) {
    userModule.login('John');
});

AMD/CMD的优势：

  • 🎯 异步加载：不阻塞页面渲染，提升用户体验
  • 🎯 依赖管理：明确的依赖声明和自动解析
  • 🎯 模块封装：真正的模块作用域隔离
  • 🎯 按需加载：支持动态加载和代码分割

🔄 AMD规范详解 ​

AMD规范的基本概念 ​

AMD规范定义了一套在浏览器环境中定义和使用模块的标准：

javascript
// 🏗️ AMD规范基础语法

// 1. 定义无依赖模块
define(function() {
    // 模块内容
    var privateVar = 'private';
    
    function privateFunction() {
        return 'This is private';
    }
    
    // 返回公共接口
    return {
        publicMethod: function() {
            return 'This is public';
        },
        
        getPrivate: function() {
            return privateFunction();
        }
    };
});

// 2. 定义有依赖的模块
define(['dependency1', 'dependency2'], function(dep1, dep2) {
    // 使用依赖
    var result = dep1.someMethod() + dep2.anotherMethod();
    
    return {
        processedResult: result,
        
        doSomething: function() {
            return dep1.helper(dep2.data);
        }
    };
});

// 3. 具名模块定义
define('myModule', ['jquery', 'underscore'], function($, _) {
    return {
        init: function() {
            $('body').addClass('initialized');
        },
        
        processData: function(data) {
            return _.map(data, function(item) {
                return item.value;
            });
        }
    };
});

// 4. 使用require加载模块
require(['myModule'], function(myModule) {
    myModule.init();
    var processed = myModule.processData([{value: 1}, {value: 2}]);
    console.log(processed);
});

实际的AMD模块示例 ​

javascript
// 📦 实际的AMD模块开发示例

// utils/string.js - 字符串工具模块
define(function() {
    'use strict';
    
    return {
        capitalize: function(str) {
            if (!str) return '';
            return str.charAt(0).toUpperCase() + str.slice(1);
        },
        
        truncate: function(str, length, suffix) {
            suffix = suffix || '...';
            if (!str || str.length <= length) return str;
            return str.substring(0, length) + suffix;
        },
        
        slugify: function(str) {
            return str.toLowerCase()
                     .replace(/[^\w\s-]/g, '')
                     .replace(/[\s_-]+/g, '-')
                     .replace(/^-+|-+$/g, '');
        }
    };
});

// utils/http.js - HTTP请求模块
define(['jquery'], function($) {
    'use strict';
    
    var defaultOptions = {
        timeout: 10000,
        dataType: 'json',
        cache: false
    };
    
    function request(url, options) {
        options = $.extend({}, defaultOptions, options);
        
        return $.ajax(url, options)
            .fail(function(xhr, status, error) {
                console.error('HTTP request failed:', error);
                throw new Error('Request failed: ' + error);
            });
    }
    
    return {
        get: function(url, data, options) {
            return request(url, $.extend({
                method: 'GET',
                data: data
            }, options));
        },
        
        post: function(url, data, options) {
            return request(url, $.extend({
                method: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json'
            }, options));
        },
        
        put: function(url, data, options) {
            return request(url, $.extend({
                method: 'PUT',
                data: JSON.stringify(data),
                contentType: 'application/json'
            }, options));
        },
        
        delete: function(url, options) {
            return request(url, $.extend({
                method: 'DELETE'
            }, options));
        }
    };
});

// models/user.js - 用户模型
define(['utils/http', 'utils/string'], function(http, stringUtils) {
    'use strict';
    
    function User(data) {
        this.id = data.id;
        this.name = data.name;
        this.email = data.email;
        this.avatar = data.avatar;
        this.createdAt = new Date(data.createdAt);
    }
    
    User.prototype.getDisplayName = function() {
        return stringUtils.capitalize(this.name);
    };
    
    User.prototype.getInitials = function() {
        return this.name.split(' ')
                        .map(function(part) { return part.charAt(0); })
                        .join('')
                        .toUpperCase();
    };
    
    User.prototype.save = function() {
        var userData = {
            name: this.name,
            email: this.email,
            avatar: this.avatar
        };
        
        if (this.id) {
            return http.put('/api/users/' + this.id, userData);
        } else {
            return http.post('/api/users', userData);
        }
    };
    
    // 静态方法
    User.findById = function(id) {
        return http.get('/api/users/' + id)
            .then(function(data) {
                return new User(data);
            });
    };
    
    User.findAll = function() {
        return http.get('/api/users')
            .then(function(data) {
                return data.map(function(userData) {
                    return new User(userData);
                });
            });
    };
    
    return User;
});

// views/user-list.js - 用户列表视图
define(['models/user', 'utils/string'], function(User, stringUtils) {
    'use strict';
    
    function UserListView(container) {
        this.container = container;
        this.users = [];
    }
    
    UserListView.prototype.render = function() {
        var html = '<div class="user-list">';
        
        this.users.forEach(function(user) {
            html += '<div class="user-item">';
            html += '<div class="user-avatar">' + user.getInitials() + '</div>';
            html += '<div class="user-info">';
            html += '<h3>' + user.getDisplayName() + '</h3>';
            html += '<p>' + user.email + '</p>';
            html += '</div>';
            html += '</div>';
        });
        
        html += '</div>';
        
        this.container.innerHTML = html;
    };
    
    UserListView.prototype.loadUsers = function() {
        var self = this;
        
        return User.findAll()
            .then(function(users) {
                self.users = users;
                self.render();
            })
            .catch(function(error) {
                console.error('Failed to load users:', error);
                self.container.innerHTML = '<p>Failed to load users</p>';
            });
    };
    
    UserListView.prototype.addUser = function(userData) {
        var user = new User(userData);
        this.users.push(user);
        this.render();
    };
    
    return UserListView;
});

// app.js - 应用主模块
define(['views/user-list'], function(UserListView) {
    'use strict';
    
    var app = {
        init: function() {
            console.log('Application initializing...');
            
            var container = document.getElementById('user-list-container');
            if (container) {
                var userListView = new UserListView(container);
                userListView.loadUsers();
            }
            
            this.setupEventListeners();
        },
        
        setupEventListeners: function() {
            // 设置全局事件监听器
            document.addEventListener('DOMContentLoaded', function() {
                console.log('DOM loaded');
            });
        }
    };
    
    return app;
});

📋 RequireJS实战应用 ​

RequireJS配置和使用 ​

javascript
// 🔧 RequireJS配置详解

// require-config.js
requirejs.config({
    // 基础路径
    baseUrl: 'js',
    
    // 路径映射
    paths: {
        'jquery': 'lib/jquery-3.6.0.min',
        'underscore': 'lib/underscore-min',
        'backbone': 'lib/backbone-min',
        'text': 'lib/text', // 文本插件
        'domReady': 'lib/domReady', // DOM就绪插件
        
        // 自定义模块路径
        'utils': 'modules/utils',
        'models': 'modules/models',
        'views': 'modules/views',
        'controllers': 'modules/controllers'
    },
    
    // 模块依赖配置（用于非AMD模块）
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'bootstrap': {
            deps: ['jquery']
        }
    },
    
    // 配置参数
    config: {
        'utils/http': {
            apiBaseUrl: '/api/v1',
            timeout: 15000
        }
    },
    
    // 等待超时时间
    waitSeconds: 15,
    
    // URL参数（用于缓存控制）
    urlArgs: 'v=' + (new Date()).getTime()
});

// 主应用启动
require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.init();
    });
});

RequireJS插件使用 ​

javascript
// 🔌 RequireJS插件系统

// 1. text插件 - 加载文本文件
define(['text!templates/user-item.html'], function(userItemTemplate) {
    return {
        render: function(userData) {
            var html = userItemTemplate;
            html = html.replace('{{name}}', userData.name);
            html = html.replace('{{email}}', userData.email);
            return html;
        }
    };
});

// templates/user-item.html
/*
<div class="user-item">
    <h3>{{name}}</h3>
    <p>{{email}}</p>
</div>
*/

// 2. domReady插件 - DOM就绪检测
define(['domReady!'], function(doc) {
    // DOM已经就绪
    return {
        init: function() {
            console.log('DOM is ready');
            // 可以安全地操作DOM
        }
    };
});

// 3. 自定义插件 - JSON数据加载器
define('json', [], function() {
    return {
        load: function(name, req, onload, config) {
            var url = name + '.json';
            
            if (config.isBuild) {
                // 构建时的处理
                onload(null);
                return;
            }
            
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            var data = JSON.parse(xhr.responseText);
                            onload(data);
                        } catch (e) {
                            onload.error(e);
                        }
                    } else {
                        onload.error(new Error('Failed to load ' + url));
                    }
                }
            };
            xhr.send();
        }
    };
});

// 使用自定义插件
define(['json!config/app-config'], function(appConfig) {
    return {
        apiUrl: appConfig.apiUrl,
        version: appConfig.version,
        
        init: function() {
            console.log('App version:', this.version);
        }
    };
});

RequireJS优化和构建 ​

javascript
// 🚀 RequireJS优化配置

// build.js - r.js构建配置
({
    // 应用目录
    appDir: 'src',
    
    // 基础URL
    baseUrl: 'js',
    
    // 输出目录
    dir: 'dist',
    
    // 模块配置
    paths: {
        'jquery': 'lib/jquery-3.6.0.min',
        'underscore': 'lib/underscore-min',
        'backbone': 'lib/backbone-min'
    },
    
    // 构建模块
    modules: [
        {
            name: 'main',
            include: [
                'app',
                'views/user-list',
                'models/user',
                'utils/http',
                'utils/string'
            ]
        },
        {
            name: 'admin',
            include: [
                'admin/app',
                'admin/views/dashboard',
                'admin/models/admin-user'
            ],
            exclude: ['main'] // 排除主模块中已包含的内容
        }
    ],
    
    // 优化选项
    optimize: 'uglify2',
    
    // 保留许可证注释
    preserveLicenseComments: false,
    
    // 生成source map
    generateSourceMaps: true,
    
    // 文件排除模式
    fileExclusionRegExp: /^(r|build)\.js$/,
    
    // 优化CSS
    optimizeCss: 'standard',
    
    // 完成回调
    onBuildWrite: function(moduleName, path, contents) {
        // 可以在这里对构建内容进行自定义处理
        return contents;
    }
})

// 构建命令
// node r.js -o build.js

// 构建后的使用
// <script data-main="js/main" src="js/lib/require.js"></script>

📝 CMD规范详解 ​

CMD规范的基本概念 ​

CMD规范是SeaJS推广的模块化规范，强调"就近依赖"：

javascript
// 📝 CMD规范基础语法

// 1. 基本模块定义
define(function(require, exports, module) {
    // 模块代码
    var privateVar = 'private';
    
    function privateFunction() {
        return 'This is private';
    }
    
    // 导出方式1：使用exports
    exports.publicMethod = function() {
        return 'This is public';
    };
    
    // 导出方式2：使用module.exports
    // module.exports = {
    //     publicMethod: function() {
    //         return 'This is public';
    //     }
    // };
});

// 2. 就近依赖 - CMD的特色
define(function(require, exports, module) {
    // 在需要时才require依赖
    function processData(data) {
        var _ = require('underscore'); // 就近依赖
        return _.map(data, function(item) {
            return item.value * 2;
        });
    }
    
    function formatDate(date) {
        var moment = require('moment'); // 按需加载
        return moment(date).format('YYYY-MM-DD');
    }
    
    exports.processData = processData;
    exports.formatDate = formatDate;
});

// 3. 条件加载
define(function(require, exports, module) {
    var isProduction = window.location.hostname !== 'localhost';
    
    if (isProduction) {
        var analytics = require('analytics');
        analytics.init();
    } else {
        var debugTools = require('debug-tools');
        debugTools.enable();
    }
    
    exports.init = function() {
        console.log('App initialized in', isProduction ? 'production' : 'development', 'mode');
    };
});

CMD vs AMD对比 ​

javascript
// ⚖️ CMD vs AMD 对比示例

// AMD风格 - 依赖前置
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    // 所有依赖都在开头声明和加载
    // 即使某些依赖可能在特定条件下才使用
    
    var MyView = Backbone.View.extend({
        initialize: function() {
            // 使用jQuery
            this.$el = $(this.el);
        },
        
        render: function() {
            // 使用underscore
            var template = _.template('<div>{{name}}</div>');
            this.$el.html(template({ name: 'AMD Style' }));
        }
    });
    
    return MyView;
});

// CMD风格 - 就近依赖
define(function(require, exports, module) {
    // 依赖在需要时才声明和加载
    
    function MyView(el) {
        this.el = el;
    }
    
    MyView.prototype.initialize = function() {
        // 在需要时才require jQuery
        var $ = require('jquery');
        this.$el = $(this.el);
    };
    
    MyView.prototype.render = function() {
        // 在需要时才require underscore
        var _ = require('underscore');
        var template = _.template('<div>{{name}}</div>');
        this.$el.html(template({ name: 'CMD Style' }));
    };
    
    module.exports = MyView;
});

// 对比总结
var comparison = {
    AMD: {
        依赖声明: '前置声明，在define参数中列出所有依赖',
        加载时机: '模块定义时就加载所有依赖',
        执行时机: '依赖加载完成后立即执行',
        代表实现: 'RequireJS',
        适用场景: '依赖关系明确，需要预加载的场景',
        优点: '依赖关系清晰，便于静态分析',
        缺点: '可能加载不必要的依赖'
    },
    
    CMD: {
        依赖声明: '就近声明，在需要时才require',
        加载时机: '运行时按需加载',
        执行时机: '使用时才执行',
        代表实现: 'SeaJS',
        适用场景: '依赖关系复杂，需要按需加载的场景',
        优点: '按需加载，减少不必要的资源消耗',
        缺点: '依赖关系不够直观'
    }
};

SeaJS使用示例 ​

javascript
// 🌊 SeaJS配置和使用

// seajs-config.js
seajs.config({
    // 基础路径
    base: 'js/',
    
    // 路径配置
    paths: {
        'lib': 'lib',
        'modules': 'modules',
        'views': 'views'
    },
    
    // 别名配置
    alias: {
        'jquery': 'lib/jquery.js',
        'underscore': 'lib/underscore.js',
        'template': 'lib/template.js'
    },
    
    // 预加载配置
    preload: ['jquery'],
    
    // 字符集
    charset: 'utf-8',
    
    // 调试模式
    debug: true
});

// 使用SeaJS加载模块
seajs.use(['modules/app'], function(app) {
    app.init();
});

// modules/utils.js - CMD模块示例
define(function(require, exports, module) {
    var $ = require('jquery');
    
    var utils = {
        // DOM操作工具
        createElement: function(tag, attrs, content) {
            var $el = $('<' + tag + '>');
            
            if (attrs) {
                $el.attr(attrs);
            }
            
            if (content) {
                $el.html(content);
            }
            
            return $el[0];
        },
        
        // 事件工具
        on: function(element, event, handler) {
            $(element).on(event, handler);
        },
        
        // AJAX工具
        request: function(options) {
            return $.ajax(options);
        },
        
        // 模板渲染
        render: function(templateId, data) {
            var template = require('template');
            var html = template(templateId, data);
            return html;
        }
    };
    
    module.exports = utils;
});

// modules/user-service.js
define(function(require, exports, module) {
    var utils = require('./utils');
    
    var userService = {
        currentUser: null,
        
        login: function(username, password) {
            return utils.request({
                url: '/api/login',
                method: 'POST',
                data: {
                    username: username,
                    password: password
                }
            }).then(function(response) {
                userService.currentUser = response.user;
                return response;
            });
        },
        
        logout: function() {
            return utils.request({
                url: '/api/logout',
                method: 'POST'
            }).then(function() {
                userService.currentUser = null;
            });
        },
        
        getCurrentUser: function() {
            return this.currentUser;
        }
    };
    
    module.exports = userService;
});

// views/login-view.js
define(function(require, exports, module) {
    var utils = require('../modules/utils');
    var userService = require('../modules/user-service');
    
    function LoginView(container) {
        this.container = container;
        this.init();
    }
    
    LoginView.prototype.init = function() {
        this.render();
        this.bindEvents();
    };
    
    LoginView.prototype.render = function() {
        var html = utils.render('login-template', {
            title: 'User Login'
        });
        this.container.innerHTML = html;
    };
    
    LoginView.prototype.bindEvents = function() {
        var self = this;
        var form = this.container.querySelector('form');
        
        utils.on(form, 'submit', function(e) {
            e.preventDefault();
            self.handleLogin();
        });
    };
    
    LoginView.prototype.handleLogin = function() {
        var username = this.container.querySelector('[name="username"]').value;
        var password = this.container.querySelector('[name="password"]').value;
        
        userService.login(username, password)
            .then(function(response) {
                console.log('Login successful:', response);
                // 跳转到主页面
                window.location.href = '/dashboard';
            })
            .catch(function(error) {
                console.error('Login failed:', error);
                alert('Login failed: ' + error.message);
            });
    };
    
    module.exports = LoginView;
});

🔄 AMD/CMD在现代开发中的地位 ​

历史意义和现状 ​

javascript
// 📊 AMD/CMD的历史地位和现状分析

var moduleEvolution = {
    // 历史贡献
    historicalContributions: {
        AMD: [
            '首次在浏览器中实现了真正的模块化',
            '建立了异步模块加载的标准',
            '推动了前端工程化的发展',
            '为后续的模块化规范奠定了基础'
        ],
        
        CMD: [
            '提出了"就近依赖"的理念',
            '更符合CommonJS的使用习惯',
            '在中国前端社区有重要影响',
            '推动了模块化思想的普及'
        ]
    },
    
    // 现状分析
    currentStatus: {
        AMD: {
            使用情况: '逐渐减少，主要在遗留项目中',
            优势: '成熟稳定，生态系统完善',
            劣势: '语法相对复杂，学习成本高',
            适用场景: '需要兼容老版本浏览器的项目'
        },
        
        CMD: {
            使用情况: '基本被ES6模块替代',
            优势: '语法简洁，接近CommonJS',
            劣势: '生态系统相对较小',
            适用场景: '特定的中国本土项目'
        }
    },
    
    // 被替代的原因
    replacementReasons: [
        'ES6模块成为官方标准',
        '现代构建工具的普及',
        '浏览器原生支持ES6模块',
        '开发体验的改善'
    ],
    
    // 学习价值
    learningValue: [
        '理解前端模块化的演进历程',
        '掌握异步模块加载的原理',
        '了解不同模块化方案的设计思路',
        '为维护遗留代码做准备'
    ]
};

// 现代替代方案
var modernAlternatives = {
    // ES6模块
    ES6Modules: {
        语法: 'import/export',
        特点: '静态分析，编译时确定依赖',
        支持: '现代浏览器原生支持',
        工具: 'Webpack, Rollup, Vite等'
    },
    
    // 构建工具
    buildTools: {
        Webpack: '强大的模块打包器，支持多种模块格式',
        Rollup: '专注于ES6模块的打包器',
        Vite: '基于ES6模块的快速构建工具',
        Parcel: '零配置的Web应用打包器'
    },
    
    // 运行时方案
    runtimeSolutions: {
        SystemJS: '通用的模块加载器',
        'import-maps': '浏览器原生的模块映射',
        'dynamic-import': 'ES2020的动态导入'
    }
};

// 迁移策略
var migrationStrategy = {
    fromAMD: {
        步骤: [
            '分析现有AMD模块的依赖关系',
            '使用工具自动转换为ES6模块',
            '更新构建配置',
            '测试和验证功能'
        ],
        工具: ['amd-to-es6', 'lebab', 'jscodeshift']
    },
    
    fromCMD: {
        步骤: [
            '将CMD模块转换为CommonJS格式',
            '使用Webpack等工具处理CommonJS',
            '逐步迁移到ES6模块',
            '优化构建配置'
        ],
        注意事项: ['处理就近依赖的转换', '保持功能一致性']
    }
};

遗留项目维护 ​

javascript
// 🔧 AMD/CMD遗留项目维护指南

// 1. AMD项目维护
var amdMaintenance = {
    // 常见问题和解决方案
    commonIssues: {
        循环依赖: {
            问题: 'AMD模块间的循环依赖导致加载失败',
            解决方案: `
                // 使用require()而不是依赖注入
                define(['moduleA'], function(moduleA) {
                    return {
                        method: function() {
                            // 延迟加载避免循环依赖
                            var moduleB = require('moduleB');
                            return moduleB.process(moduleA.data);
                        }
                    };
                });
            `
        },
        
        性能优化: {
            问题: '模块加载过多导致性能问题',
            解决方案: `
                // 使用r.js进行模块合并
                // 配置模块分组
                modules: [
                    {
                        name: 'common',
                        include: ['jquery', 'underscore', 'utils']
                    },
                    {
                        name: 'app',
                        exclude: ['common']
                    }
                ]
            `
        }
    },
    
    // 升级策略
    upgradeStrategy: {
        渐进式升级: '逐步将AMD模块转换为ES6模块',
        混合使用: '在同一项目中同时使用AMD和ES6模块',
        工具辅助: '使用自动化工具进行转换'
    }
};

// 2. 实际维护示例
// 修复AMD循环依赖问题
define('moduleA', ['moduleB'], function(moduleB) {
    // ❌ 这样会导致循环依赖
    return {
        process: function(data) {
            return moduleB.transform(data);
        }
    };
});

// ✅ 修复后的版本
define('moduleA', function(require) {
    return {
        process: function(data) {
            // 延迟加载，避免循环依赖
            var moduleB = require('moduleB');
            return moduleB.transform(data);
        }
    };
});

// 3. 性能监控和优化
var performanceMonitor = {
    // 监控模块加载时间
    trackModuleLoad: function(moduleName, startTime) {
        var endTime = Date.now();
        var loadTime = endTime - startTime;
        
        console.log(`Module ${moduleName} loaded in ${loadTime}ms`);
        
        // 发送性能数据到监控系统
        if (window.performance && window.performance.mark) {
            window.performance.mark(`module-${moduleName}-loaded`);
        }
    },
    
    // 分析模块依赖
    analyzeDependencies: function() {
        if (typeof requirejs !== 'undefined' && requirejs.s) {
            var contexts = requirejs.s.contexts;
            var defaultContext = contexts._;
            var modules = defaultContext.defined;
            
            console.log('Loaded modules:', Object.keys(modules));
            console.log('Module dependencies:', defaultContext.registry);
        }
    }
};

📚 AMD和CMD规范学习总结与下一步规划 ​

✅ 本节核心收获回顾 ​

通过本节JavaScript AMD和CMD规范详解的学习，你已经掌握：

  1. AMD规范基础：理解了异步模块定义的设计理念和核心特性
  2. RequireJS实战：熟练掌握了RequireJS的配置、使用和优化方法
  3. CMD规范理解：掌握了CMD规范的特点和"就近依赖"的设计思想
  4. 异步加载机制：深入理解了浏览器环境下异步模块加载的原理
  5. 历史地位认知：了解了AMD/CMD在前端模块化演进中的重要作用

🎯 模块化下一步 ​

  1. 深入ES6模块：学习现代JavaScript模块标准和静态分析优势
  2. 现代构建工具：掌握Webpack、Rollup、Vite等现代构建工具
  3. 模块化最佳实践：学习现代前端项目的模块化架构设计
  4. 性能优化技术：掌握模块打包、代码分割、懒加载等优化技术

🔗 相关学习资源 ​

  • RequireJS官方文档：RequireJS完整使用指南和API参考
  • SeaJS官方文档：SeaJS使用方法和CMD规范说明
  • 前端模块化历史：前端模块化技术的发展历程和演进
  • 现代构建工具：Webpack、Rollup等现代构建工具文档

💪 实践建议 ​

  1. 搭建AMD项目：使用RequireJS构建一个完整的前端应用
  2. 性能优化实践：优化AMD/CMD项目的加载性能和构建配置
  3. 迁移项目练习：将AMD/CMD项目迁移到ES6模块
  4. 源码阅读：阅读RequireJS和SeaJS的源码，理解实现原理

🔍 常见问题FAQ ​

Q1: AMD和CMD哪个更好？ ​

A: 各有优势。AMD依赖前置，便于静态分析；CMD就近依赖，更灵活。现在都被ES6模块替代，选择主要基于项目需求和团队习惯。

Q2: 为什么AMD/CMD被ES6模块替代？ ​

A: ES6模块是官方标准，有更好的静态分析能力、工具支持和性能优化。现代构建工具和浏览器都优先支持ES6模块。

Q3: 遗留的AMD/CMD项目如何维护？ ​

A: 可以继续维护，但建议逐步迁移到ES6模块。使用现代构建工具可以同时支持多种模块格式。

Q4: RequireJS还值得学习吗？ ​

A: 作为历史了解和遗留项目维护有价值，但新项目建议直接使用ES6模块和现代构建工具。

Q5: 如何选择模块化方案？ ​

A: 新项目优先选择ES6模块；遗留项目可以继续使用现有方案；需要兼容老浏览器的项目可以考虑AMD。

🛠️ AMD/CMD故障排除指南 ​

常见问题解决方案 ​

模块加载失败 ​

javascript
// 问题：模块路径错误导致加载失败
// 解决：检查路径配置和文件存在性

// ❌ 错误的配置
requirejs.config({
    paths: {
        'jquery': 'lib/jquery' // 缺少文件扩展名或路径错误
    }
});

// ✅ 正确的配置
requirejs.config({
    paths: {
        'jquery': 'lib/jquery-3.6.0.min' // 正确的路径
    }
});

// 调试工具
function debugModuleLoad() {
    requirejs.onError = function(err) {
        console.error('RequireJS Error:', err);
        console.log('Failed modules:', err.requireModules);
        console.log('Error type:', err.requireType);
    };
}

循环依赖问题 ​

javascript
// 问题：模块间循环依赖
// 解决：重构依赖关系或使用延迟加载

// ❌ 循环依赖
// moduleA.js
define(['moduleB'], function(moduleB) {
    return { useB: moduleB.method };
});

// moduleB.js
define(['moduleA'], function(moduleA) {
    return { useA: moduleA.method };
});

// ✅ 解决方案：延迟加载
// moduleA.js
define(function(require) {
    return {
        method: function() {
            var moduleB = require('moduleB');
            return moduleB.method();
        }
    };
});

"AMD和CMD规范虽然已被ES6模块替代，但理解它们的设计思想和实现原理对于掌握前端模块化演进历程具有重要意义。继续学习ES6模块和现代构建工具，构建完整的前端模块化知识体系！"