04 CMD规范基础使用详解

CMD模块规范

1.1 CMD规范说明

专门用于浏览器端，并且模块的加载是异步的，而且只有模块使用时才会加载执行；

CMD规范的语法类似于Commonjs + AMD ——定义模块使用AMD语法，暴露变量、引入模块使用Commonjs语法

1.2 基本语法

使用全局函数define定义模块，使用export暴露模块，使用require引入模块

1.21暴露模块

（1）定义一个没有依赖的模块，定义模块使用define函数，传入一个函数，函数参数为require,exports,module，require参数用来引入模块，后面两个参数用来暴露模块，暴露模块的方法和Commonjs规范一样，可以使用module.exports或者exports

// module1.js

define(function(require,exports,module){

    let name = '过青年';

    function getName(){

        return name;

    }

    module.exports = {name,getName};

 });

（2）定义一个有依赖的模块

目录结构如下

使用同步引入模块，同步可能导致堵塞

// module2.js

//同步引入

 define(function(require,exports,module){

     let module1 = require('./module1.js');

     let age = 20;

     console.log(module1.name);

     console.log(module1.getName());

     module.exports = {age};

 })

使用异步引入模块

// module2.js

// 异步引入

define(function(require,exports,module){

     let age = 20;

    // 引入模块暴露的对象作为实参传入m1形参中

    require.async('./module1.js',function(m1){

        console.log(m1.name);

        console.log(m1.getName());

    });

    module.exports = {age};

 })

1.22引入模块

记住引入模块可以使用同步引入require()和异步引入require.async()

// main.js同步引入模块

define(function(require,exports,module){

    let m2 = require('./module/module2.js');

    console.log(m2.age);

})

1.23在HTML页面上使用模块化

需要引入一个叫sea.js的模块加载框架，再使用另外一个script标签，当中使用seajs.use()方法定义主模块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AMD规范实例</title>

</head>

<body>

    <script src="./js/lib/sea.js"></script>

    <script>

        seajs.use('./js/main.js');

        /*控制台输出，module2.js模块中使用同步、异步输出差异：

        同步		异步

        过青年		20

        过青年		过青年

        20		  过青年

        */

    </script>

</body>

</html>

总结

使用define(function(require,exports,module){ })定义模块
在定义的模块中使用module.exports或者exports暴露对象
使用require()函数同步加载模块或者使用require.async()异步加载模块
HTML中引入ser.js脚本，并且再添加一个script标签，使用serjs.use()方法指定主模块

巴特西