AMD(Asynchronous Module Definition)翻译为异步模块定义。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度。用于浏览器端的异步模块规范
CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近.是国内的一个叫玉伯的人写的。浏览器端的模块规范
CommonJS是服务器端的模块规范。nodejs就是CommonJS规范实现的。
我们要介绍的require.js就是AMD规范实现的一个库。
requirejs的作用
require.js可以很好的解决两个问题
1.实现js文件的异步加载，避免网页失去响应
2.管理模块之间的依赖性，便于代码的编写和维护。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> requirejs只开放了两个函数 define 定义模块 define('模块名',[依赖列表]，实现模块的函数) 注意:通常我们不写模块名，文件名就是模块名 require 使用模块 语法:require([依赖列表],函数) 注意: a.require可以同时加载多个模块， b.加载多个模块时函数一定要写多个形式参数，形式参数必须与模块进行一一对应。 c.require===requirejs </title> <script src="Scripts/require.js"></script> <script> require(['./Scripts/04.js','./Scripts/04-2.js'], function (a,b) { // console.log(a); a.show(); console.log(b); }); </script> </head> <body> </body> </html>
//定义模块 define(function () { return { show: function show() { console.log("今天发生一件事,张三掉水沟里了"); } } });
define(['./jquery-1.10.2.js'], function (a) { return $; });
requirejs的配置:
require.config({
baseUrl:设置所有模块的公共路径
paths:为我们所有的模块设置别名
});
注意:
1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。
2.以对象形式为paths配置别名。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> requirejs的配置: require.config({ baseUrl:设置所有模块的公共路径 paths:为我们所有的模块设置别名 }); 注意: 1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。 2.以对象形式为paths配置别名。 </title> <script src="Scripts/require.js"></script> </head> <body> <script> require.config({ baseUrl: './Scripts/', paths: { jq: 'jquery-1.10.2', '2':'05-2' } }); require(['jq','05', '2'], function (c,a, b) { // console.log(a); a.show(); console.log(b); console.log(c); }); </script> </body> </html>
requirejs的案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="Scripts/require.js"></script> </head> <body> <script> require(["./Scripts/06.js"], function (a) { console.log(a); console.log( a.add(10, 20)); }); </script> </body> </html>
//衬衣模块 //define({ // color: 'black', // size: 'XL', // price:100 //}); //数学模块 define(function () { var add = function (x, y) { return x + y; }; return { add }; });