Common Module Definition

由 阿里 玉伯 (王保平) 开发的 前端模块化开发模式
也要依赖一个外部文件 sea.js
也是为了解决 前端模块化问题 参考的就是 后端的 nodejs CommonJS 模式

执行步骤:

1. 加载 外部 sea.js 文件

2. 定义 独立模块

define(function(参数1.参数2.参数3){})

参数1: require 也就是你要依赖的内容
参数2: exports 也就是你要导出的内容
参数3: module  是 exports 的一个别名
也是定义了一个 module 对象 module.exports 来定义导出内容
导出的语法和 Commonjs 完全相同

3. 定义 依赖模块

define( function( require . exports . module ){
使用 var modA = require('导入模块地址')
} )

4. 定义 整合模块

使用 seajs.use()  将 所有模块整合到一起
使用 seajs.use( ['依赖文件1路径' ,'依赖文件2路径' ,'依赖文件3路径' ] , function(导入模块1.导入模块2.导入模块3){
    程序执行时 调用 模块中的 导出的程序
} )

解决问题:

1. 全局变量污染问题.解决了前置依赖问题

在 程序需要时 才会通过 参数 导入使用 外部模块

问题:

1. 后置依赖

执行模块时 先不加载 所需要的模块
在程序执行需要时.才会去加载 模块
一开始执行程序 会很快 但是 程序执行不够流畅

CMD 总结:

1.独立模块

define(function(require,exports,module){
    独立模块,没有导入内容
    定义好程序之后,一般使用
    module.exports = {}  来导出内容
})

2.依赖模块

define(function(require,exports,module){
    先定义自己要执行的程序内容
    之前程序的执行,不受导入模块的影响
    在需要时,通过 变量存储导入内容
    const 变量 = require('导入模块路径');
    定义好程序之后,一般使用
    module.exports = {} 来导出内容
})

3.整合模块

seajs.use() 来导入加载模块
seajs.use(['文件1路径' , '文件2路径'...] , function(形参1,形参2...){
})

实例

htmla.jsb.jsc.js
<script src="./sea.js"></script>
<script src="./c.js"></script>
<script>
    /*
    输出内容
    b.js:4            我是b.js中的程序输出
    b.js:5            b.js中的程序内容
    a.js:7            0
    a.js:7            1
    a.js:7            2
    a.js:7            3
    a.js:13            我是模块A中的程序
    b.js:13            Object
                        af1: ƒ af1()
                        af2: ƒ af2()
                        bool: true
                        num: 100
                        __proto__: Object
    c.js:7            Object
                        bool: false
                        num: 200
                        __proto__: Object
    */
</script>
// 我是一个独立的模块A
define(function(require , exports , module){
    // 这里就是一个独立的模块A
    for(var i = 0 ; i <= 3 ; i++){
        console.log(i);
    }
    let num = 100;
    let bool = true;
    console.log('我是模块A中的程序');
    function af1(){console.log('我是a.js模块中,函数af1中的程序')};
    function af2(){console.log('我是a.js模块中,函数af2中的程序')};
    // 通过 module.exports 来导出内容
    module.exports = {
        num,
        bool,
        af1,
        af2,
    }
})
// 我是 一个 依赖其他模块的 依赖模块
define(function(require , exports , module){
    // 之前先执行 B中的自己的程序
    console.group('我是b.js中的程序输出');
    console.log('b.js中的程序内容');
    
    // 加载了一个外部的模块,定义变量,存储 module.exports 导出的内容
    // 需要加载a了,才会执行加载a.js的程序内容
    // 加载之前的B中的程序,会先执行,不受a的影响
    const mA = require('./a.js');
    console.log(mA);
    console.groupEnd();
    module.exports = {
        num:200,
        bool:false,
    }
})
// 我是一个整合的文件
// 通过 seajs.use() 来 整合 模块

// 当前如果只要加载B 
// B会在需要的时候,执行加载A
seajs.use(['./b.js'] , function(mB){
    console.log(mB);
})

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。