JS模块化(三):CMD规范

简介: JS模块化(三):CMD规范

目录结构

image.png

module1:(没有依赖的模块)

// 这是没有依赖的模块
define(function(require,exports,module) {
    let msg = 'module1';
    function foo() {
        return msg;
    }
    // 暴露模块
    module.exports = {foo};
})

module2:(没有依赖的模块)

define(function(require,exports,module){
    let msg = 'module2';
    function bar() {
        console.log(msg);
    }
    module.exports = bar;
})

module3:(没有依赖的模块)

define(function(require,exports,module) {
    let data = 'module3';
    function fun() {
        console.log(data);
    }
    // exports.module3 = {fun};
    module.exports = {fun};
})

module4:(有依赖的模块)

// 这是一个有依赖的模块
define(function(require,exports,module) {
    let msg = 'module4';
    // 同步引入
    let module2 = require('./module2');
    module2();
    // 异步引入
    require.async('./module3',function(module3) {
        // module3.module3.fun();
        module3.fun();
    })
    function fun2() {
        console.log(msg);
    }
    exports.fun2 = fun2;
})

主函数:main.js

define(function(require) {
    let module1 = require('./module1');
    console.log(module1.foo()); 
    let module4 = require('./module4');
    module4.fun2();
})

浏览器端使用

image.png

相关文章
|
3月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
4月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
53 3
|
3月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
42 0
|
3月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
4月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
4月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
33 1
|
4月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
36 0
|
5月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
63 1
|
6月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
67 5