requirejs 总结
2016-05-25 本文已影响101人
MakingChoice
下面是我做的一个requirejs一个小的案例，没有啥技术含量，就是把不同情况下的方法说了一下，以后有时间再给大家更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script data-main="js/main" src="js/require.js"></script> //设置入口文件，主要配置项在main.js这个入口文件中，
</head>
<body>
<button id="btn"> click</button>
<div id="div1" style="display: block;width: 200px;height: 200px;color: red">123123123</div>
<div id="div2" style="display: block; width: 200px;height: 200px;border: 1px solid red;position: relative"></div>
</body>
</html>
require.config({
baseUrl:"",//相对于模块文件夹
paths: {
jquery: 'jquery-2.1.4.min'
}
});
require(["jquery","b","a"],function($,app,a){ //在配置项中引入A模块
new app(); //实例化方法，来执行函数。
});
define(['jquery','a'],function($,move){ //在define中，如果不在require.config中配置shim，需要用define，如果配置define，则可以直接使用函数，
var app=function(){
var btn= $("#btn");
var div=$("#div1");
btn.on("click",function(){
div.css("color","blue");
move.move();
})
};
return app; //一定要把函数return回去
});
//在需求中，直接引用a模块（a的名称），并在function($,move)中用形参为模块命名，因为a模块返回的是一个对象，即move为a的对象，用move.move()来触发方法
define(["jquery"],function($){
var a={ //使用面向字面量的方式进行组织，把方法放在一个方法中
move:function(){
$("#div2").animate({
width:"400px",
left:"700px",
top:"400px",
background:"blue"
},1000,function(){
$("#div2").html("finished");
});
}
};
return a;
});
当a模块是用方法定义的时候，返回的也是方法，b模块就要做出相应改变，
define(["jquery"],function($){
var move=function(){
$("#div2").animate({
width:"400px",
left:"700px",
top:"400px",
background:"blue"
},1000,function(){
$("#div2").html("finished");
});
};
return move; //return是一个方法
});
对应b模块要改变引用方式
define(['jquery','a'],function($,move){
var app=function(){
var btn= $("#btn");
var div=$("#div1");
btn.on("click",function(){
div.css("color","blue");
move();//return是一个方法 ，move形参直接变成了返回的方法
})
};
return app;
});
如果配置了shim，则可以在模块中引用shim对应的方法，类似于自动引用
require.config({
paths: {
jquery: 'jquery-2.1.4.min'
},
shim: {
a: { exports: 'a' } //自动注册了a模块对应的文件，可以不用声明define来声明文件了
}
});
require(["jquery","b","a"],function($,app,a){
new app();
});
同时b模块变成了
define(['jquery'],function($){ //没有引用a模块，自动使用
var app=function(){
var btn= $("#btn");
var div=$("#div1");
btn.on("click",function(){
div.css("color","blue");
move()； //直接使用a模块定义的方法
})
};
return app;
});
RequireJS同样支持按需加载
b模块可以改为
define(function(require){ //传入require来加载按需加载
var app=function(){
var btn= $("#btn");
var div=$("#div1");
var a=require("a");
btn.on("click",function(){
div.css("color","blue");
var move=require("a"); //按需加载a模块，并且命名
move.move(); //按需加载a模块，并且命名 ，此时对于的是a模块是字面量的形式
})
};
return app;
});
如果a模块是返回函数，则需要直接调用名称
define(function(require){
var app=function(){
var btn= $("#btn");
var div=$("#div1");
var a=require("a");
btn.on("click",function(){
div.css("color","blue");
var move=require("a");
move(); //直接调用命名名称
})
};
return app;
});
如果a模块没有使用define，并且配置shim，则可以直接调用函数名，
在RequireJS 2.0中可以不设置shim，来直接调用函数
define(function(require){
var app=function(){
var btn= $("#btn");
var div=$("#div1");
var a=require("a");
btn.on("click",function(){
div.css("color","blue");
move(); //直接调用函数名
})
};
return app;
});
