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 content="width=device-width, initial-scale=1.0"> <title>AMD规范实例</title> </head> <body> <script src="http://www.likecs.com/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()方法指定主模块