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()方法指定主模块

posted @ 2020-07-21 11:01  过青年  阅读(46)  评论(0编辑  收藏