javascript模块化编程04CMD模块化编程规范

最新推荐文章于 2025-09-05 11:22:47 发布

原创最新推荐文章于 2025-09-05 11:22:47 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Sea.js中CMD模块定义规范的基础语法及应用实践，包括如何定义暴露模块、引入使用模块，以及项目文件目录结构的设计。通过具体的代码示例展示了模块间的依赖关系及其加载方式。

javascript模块化编程04CMD模块化编程规范

规范

说明

github官方文档说明地址

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition）模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。在 CMD 规范中，一个模块就是一个文件。专门用于浏览器端，模块的加载是异步的，模块使用是才会加载执行

基础语法

定义暴露模块

//定义没有依赖的模块
define(function(require,exports,module){
    exports.xxx = value;
    module.exports = value;
})

//定义有依赖的模块

define(function(require,exports,module){
//引入依赖模块（同步）
var module1 = require("./module2");//需要引入的模块地址
//引入依赖模块（异步）
require.async('./module3',function(m3){
//异步引入后执行相关操作
})；


})

引入使用模块

define(function(require){
require('需要引入模块的路径')
})

项目文件目录结构

代码实现

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/seajs/2.2.2/sea.js"></script>
<script>
    seajs.use('./js/module/main.js');
</script>
</body>
</html>

module1.js

//定义没有依赖的模块
define(function(require,exports,module){
    let msg = 'module1';
    function foo(){
        console.log(msg);

    };
    //暴露模块
    module.exports = {foo};
})

module2.js

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

module3.js

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

module4.js

//module4依赖module2和module3,暴露一个fun2的方法
define(function(require,exports,module){
    let msg = 'module4';
    //同步引入依赖模块
    let module2 = require('./module2');
    module2();
    //异步引入依赖模块,全部模块加载完毕后回到主模块中
    require.async('./module3',function(module3){
        module3.module3.fun();
    });

    function fun2(){
        console.log(msg);
    }
    exports.fun2 = fun2;
})

main.js

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

console输出结果
module1 module2 module4 module3//因为module3是异步加载所以最后执行