AMD模块规范 1.1 AMD规范说明
AMD规范专门用来实现浏览器端的模块化,并且模块的加载是异步的;引入一个第三方的require.js脚本用来解析AMD规范编写的模块
1.2 基本语法使用define用来暴露模块,使用require用来引入模块
1.21暴露模块(1)使用define(function(){})函数定义模块;并且向外暴露
// 定义一个没有依赖模块的data.js模块 define(function(){ let name = '过青年'; function getName(){ console.log(name); return name; } // 暴露模块,推荐暴露对象 return {name,getName}; });(2)使用define(['module','module2'],function(){})定义有依赖的模块,注意,数组里面的模块名只是一个代号,不一定要写模块名;不过推荐使用模块名作为代号,这样别人一看就知道引入了哪个模块,不用加后缀
// 定义一个有依赖模块的server.js模块 // 将依赖模块作为实参传递进去 define(['data'],function(data){ let age = 20; function showName(){ console.log(data.name); return name; } return {age,showName}; }); 1.22引入模块在主模块app.js中引入其他模块,使用require函数;需要使用require.config配置其他模块的路径
我们的路径是这样的
// app.js (function(){ require.config({ // 以相对目录的方式指定一个基本路径 baseUrl:'./js/', paths:{ // 以基本路径开始的相对路径 data:'./module/data', server:'./module/server' } }); require(['server'],function(server){ //会将模块当作参数传进来 console.log(server.age); // 20 console.log(server.showName()); // 过青年 }); })()
我们从HTML开始解析页面
HTML页面引入的require.js根据data-main属性发现主模块是js目录下的app.js
于是进入app.js页面进行解析;解析app.js页面,发现引入了一个叫server的模块,那么这个模块在哪里呢?通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js(我们写路径的时候不能加上后缀,因为解析时默认会添加后缀)
于是找到了这个模块,进入这个server模块,结果发现这个server模块又引入了一个叫data的模块,于是又通过app.js的配置函数找,发现data模块在./js/module/server.js中,于是加载这个模块
模块全部加载完成
1.23在HTML页面上使用模块化AMD规范本来就是用来实现浏览器端的模块化的;而require.js脚本就是这个规范的一种实现
script脚本中的data-main属性值代表主模块,从主模块进入模块内部,依次加载其他模块的内容
<!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/libs/require.min.js" data-main="./js/app.js"></script> </body> </html> 总结使用AMD规范需要引入require.js——第三方编写的脚本
根据data-main确认主模块
根据主模块中的require.config({ })函数确定各模块的位置
require.config({ })中各个模块的路径不能加后缀.js