您的位置：首页 > 产品设计 > UI/UE

Requirejs---菜鸟入门

2016-07-30 00:06 537 查看
Requirejs知道这个东西，但是没有去用过“，其实很久就想去用这个东西来模块化开发，奈何把时间放到其他地方去了。这两天也去看了一下文档。所以今天在这里写下自己的想法。

首先我来个demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../a.js"></script>
<script src="../b.js"></script>
<script src="../c.js"></script>
<script src="../d.js"></script>
<script src="../e.js"></script>
<script src="../f.js"></script>
<script src="../g.js"></script>
<script src="../h.js"></script>
<script src="../i.js"></script>
</body>
</html>


是不是有点恶心，如果脚本文件还多的话，真是不忍直视。于是我们伟大的Requirejs派上用场了。下面来个Requirejs的demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script src="../require.js" data-main="../main.js"></script>
</body>
</html>


是不是赏心悦目好多，你会问其他的文件去哪了？别急，慢慢听我道来；其实原来关系都写到main.js中了，我们来看看main.js的代码。

require.config({
baseUrl:"../",
paths:{
a:"a",
b:"b",
c:"c",
d:"d",
e:"e",
f:"f",
g:"g",
h:"h",
i:"i"
}
});
require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

})


下面我们开始进入正题：

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

<script data-main="../main.js" src="../require.js"></script>


首先我们去加载requirejs文件，然后定义脚本文件的入口，相当于java中main函数。如果设置了data-main属性；baseUrl默认为data-main文件的路径。我们也可以通过require.config去修改。这里有一点需要注意的是：所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

require.config用来配置一些参数，它将影响到requirejs库的一些行为。参数是一个JS对象，常用的配置有baseUrl——用于加载模块的根路径。

1.paths——用于映射不存在根路径下面的模块路径。

2.shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

4.deps——加载依赖关系数组

require.config({
baseUrl:"../",//配置跟路径
paths:{
/*各个文件的映射*/
a:"a",
b:"b",
c:"c",
d:"d",
e:"e",
f:"f",
g:"g",
h:"h",
i:"i"
}
});
//注入依赖，并加载文件
require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

})


定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

//模块没有依赖的的时候
define(function(){
var add=function(x,y){
return x+y;
}
return{
add:add
}
})
//有依赖也可以注入，类似angularjs
define(["a","b"]function(a,b){
//在这里可以调用a，b模块的中的开放的接口
var add=function(x,y){
return x+y;
}
return{
add:add
}
})


下面是一个小demo：

文件路径：
script|--->require.js
|--->main.js
|___>part|--->a.js
|___>b.js
demo|----demo.html


//b.js
define(["a"],function(a){

var tt=function(){
alert(a.add(1,2));
a.t();
};
return{
rr:tt
}
});


//a.js
define(function(){
var add=function(x,y){
return x+y;
} ;
var test=function(){
console.log("sss");
};
return {
add:add,
t:test
}
});


//main.js
require.config({
baseUrl:"../script",//配置基础url
paths:{//相对baseUrl定位
a:"part/a",
b:"part/b"
}
});
//所设置的脚本是异步加载的
require(["a","b"],function(a,b){
b.rr();
});


//demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
<script src="../script/require.js" data-main="../script/main.js"></script>
</body>
</html>


可以用demo试试，容易理解一些

详细内容请看Requirejs中文网。也可以去原文

http://www.requirejs.cn/docs/api.html#cjsmodule

http://requirejs.org/docs/api.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  模块化 面试
相关文章推荐
新的分享
章节导航