1.RequireJS是一个工具库,主要用于客户端的模块管理.它可以让客户端的代码分成一个个模块.实现异步或动态加载,从而提高代码的性能和可维护性.它的模块管理遵循AMD规范(Asynchronous Module Definition).
2.基本思想:通过define方法,将代码定义为一个模块用require方法实现代码的模块加载.
3.将require.js嵌入网页,然后就能在网页中进行模块化编程了.
<script data-main="js/main" src="js/require.js"></script>
data-main属性:页面的入口js.路径main.js相对于页面
4.define方法:定义模块.(requireJS要求每个独立模块放在一个单独的文件里.)
4.0:定义模块不依赖其他模块,是个独立模块.
4.1:定义模块依赖其他模块,非独立模块.
4.2:三个参数.
独立模块:define({
method1:function(){},
method2:function(){}
})
或者:
define(function(){
return{
method1:function(){},
method2:function(){}
}
})
建议使用后一种写法,这种自由度更高一些.
define定义的模块可以返回任何值,不限于对象.
非独立模块:
define(["module1","module2"],function(m1,m2){
})
第一个参数是数组,它的成员是当前模块所依赖的模块.
比如当前模块就是依赖于"module1.js","module2.js".只有先加载这两个模块,新模块才能正常运行.这个写法表示module1和module2模块就在当前目录.等同于['./module1','./module2'].
第二个参数是一个函数,但前面的数组的所有成员加载成功后,他将被调用.它的参数与数组的成员一一对应.
define(['module1','module2'],function(m1,m2){
return {
method:function(){
m1.methodA();
m2.methodB();
}
}
});
如果依赖额模块很多,参数与模块一一对应的写法非常麻烦.
define(['dep1','dep2','dep3','dep4','dep5','dep6'...],
function('dep1','dep2','dep3','dep4','dep5','dep6'...){
});
为了避免上面代码那样繁琐的写法.可以这样写:
define(function(require){
var dep1=require('dep1');
var dep2=require('dep2');
var dep3=require('dep3');
var dep4=require('dep4');
var dep5=require('dep5');
var dep6=require('dep6');
var dep7=require('dep7');
.........
.........
});
define([模块名称,][依赖模块],function(参数){
});
注意:requireJs会自动根据文件名(不含后缀名,即不含.js)来给定义的模块命名,如果你显示的给定义的一个模块命名了,那么在日后改动了文件名或模块名,requireJs将无法加载.因此:不要显示的定义模块名,让文件名成为默认的模块名,方便requireJs管理.
define()实际运用的例子1:
define(["math","grap"],function(math,graph){
return{
plot:function(x,y){
return graph.drawPie(math.randomGrid(x,y));
}
}
});
define()实际运用的例子2:
判断是否是IE而加载zepto或jQuery.
define(('__proto__' in{} ?['zepto']:['jquery']),function($){
return $;
});
5.require方法:调用模块.
require(['foo','bar'],function(foo,bar){
foo.doSomething();
});
require方法的第一个参数,是一个表示依赖关系的数组.
require([window.JSON?undefined:'util/json2'],function(JSON){
JSON=JSON||window.JSON;
console.log(JSON.parse('{"JSON":"HERE"}'));
});
上面代码:加载JSON模块时,首先判断浏览器是否原生支持JSON对象.如果是的,则将undefined传入回调函数,否则加载util目录下的json2模块.
require方法也可以用在define方法内部.
define(function(require){
var otherModule=require("otherModule");
});
下面的例子显示了如何动态加载模板.
define(function(require){
var isReady=false,foobar;
require(['foo','bar'],function(foo,bar){
isReady=true;
foobar=foo()+bar();
});
return{
isReady:isReady,
foobar:foobar
}
});
上面代码定义的模块,内部加载了foo和bar两个模块,在没有加载完成前,isReady属性为fale,加载完成后就变成了true.因此,可以根据isReady属性的值,决定下一步的动作.
下面的例子是模块的输出结果是一个promise对象.
define(['lib/Deferred'],function(Deferred){
var defer=new Deferred();
require(['lib/templates/?index.html','lib/data/?stats'],function(template,data){
defer.resolve({template:template,data:data});
});
return defer.promise();
});
上面define方法返回一个promise对象,可以再改对象的then方法,指定下一步的动作.
如果服务器端采用JSONP模式,则可以直接在require中调用,方法是指定JSONP中调用,方法是指定JSONP的callback参数define.
require(['http://someapi.com/foo?callback=define'],function(data){
console.log(data);
});
require方法允许添加第三个参数,错误处理的回调函数
require(["backbone"],
function(){Backbone}{
return Backbone.View.extend(/*.....*/);
},
function(err){
//....
}
)
require对象还允许指定一个全局性的Error事件的监听函数.所有没有被上面的方法捕获的错误,都会被触发这个监听函数.
requirejs.onError=function(err){
//...
}
==============AMD模式小结===========
define和require这两个定义模块,调用模式的方法,合称AMD模式.它的模块定义的方法非常清晰,不会污染全局环境.能够清楚的显示依赖关系.
AMD模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块.
6.require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数.
require.config({
paths:{
jquery:[]
}
});
7.配置require.js:config方法
require.config({
paths:{
jquery:[
'//cdnjs.cloudflart.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
],
gys:'gys',
people:'people'
}
});
paths
:参数指定各个模块的位置.这个位置可以是同一个服务器上的相对位置,也可以是外部网址.可以为每个模块定义多个位置,如果第一个位置加载失败,则加载第二个位置,上面的事例就表示如果cds加载失败,则加载服务器上的备用脚本.注意的是,指定本地路径时,可以省略文件最后的js后缀名.
require(['jquery'],function($){
//......
});
上面代码加载jquery模块,因为jquery的路径已经在paths参数中定义了,所以就会到事先设定的位置下载.
baseUrl:
baseUrl参数指定本地模块位置的基准目录,即本地模块的路径是相对于哪个目录的.该属性通常有require.js加载时的data-main属性指定.
shim:
有些库不是AMD兼容的,这时就需要指定shim属性的值.shim可以理解成'垫片',用来帮助require.js加载非AMD规范的库.
require.config({
paths:{
'bockbone':'vendor/backbone',
'underscore':'vendor/underscore'
},
shim:{
'backbone':{
deps:['underscore'],//被依赖
exports:'backbone' //输出符号
},
'underscore':{
exports:"_" //输出符号
}
}
});
上面backbone和underscore就是非AMD规范的库.shim指定他们的依赖关系(backbone依赖于underscore),以及输出符号(backbone为Backbone,underscore为"_").
8.插件
require允许使用插件,加载各种格式的数据.
define(['backbone','text!abc.html'],function(Backbone,abc){
//.....
});
上面代码加载的第一个模块时backbone,第二个模块则是一个文本,用'text!'表示.该文本作为字符串,存在回调函数的abc变量中.
===================利用r.js打包项目=================
9.因为过多的模块亲求会降低网站的速度,这个时候就需要吧那些零散的项目合并起来.
有两种方式
第一种通过cmd的命令行在node环境下打包处理
第二种:造node环境下执行配置文件.
讲第二种:
原先的文件目录
1
js
gys.js
gysExt.js
index.js
news.js
people.js
peopleExt.js
require.js
build.js
index.html
news.html
r.js
描述:index.js依赖gysExt.js; gysExt.js依赖gys.js
news.js依赖于peopleExt.js;peopleExt.js依赖于people.js
build.js是配置文件:
代码如下:
({
appDir:"./",
baseUrl:"js",
dir:"../2",
paths:{
jquery:'empty:'
},
modules:[
{name:"index"},
{name:"news"}
]
})
在cmd下,切换到1目录下,执行命令:node r.js -o build.js
结过如下