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

require.js理解

2016-07-01 09:51 495 查看

前言

实习过程学习了require.js的相关内容，也在网上查阅了一部分资料，相比于其他框架，require.js更为简单易学，也更容易使用。

下面我就简单介绍我所认识的require.js，希望大家能够多多指教！

Require.js的优缺点

优点：

正如我前面所提到的，require.js框架相对较小而且相对简单

使代码模块化

异步加载js文件，防止请求阻塞

代码模块化能够使代码称为一个个相对独立的模块，在创建、修改、引用模块化的时候更加方便，不需要在很多个页面修改。

而异步加载文件能够保证前面的文件加载完成之后再进行模块里的代码，这在之后的示例中也将说明。

缺点：

这缺点是我自己总结的，是我在阅读代码的时候切身体会，就是：

模块化太复杂的时候，可能要翻找很多文件才能理解代码的作用。

引用模块

首先是需要下载require.js文件。然后应用代码如下：

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript" src="require.js"></script>
</head>
<body>
<script type="text/javascript">
require(["abc"]);
</script
4000
>
</body>
</html>

上述代码中，前面引入了外部文件require.js文件，然后再书写JavaScript语句

require(["abc"]);

，该代码是引用模块文件abc.js文件，其中该文件的代码如下：

(function abc(){
alert("aaa");           //弹出框提示“aaa”
})();

以下代码可以只引入单个js，代码如下：

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #824FDF;
}
</style>
</head>
<body>
<div>aaa</div>
<script data-main="main" src="require.js"></script>
</body>
</html>

上述代码只引入了一个js文件，但是

<script>

标签里有一个自定义属性

data-main="main"

，表示的是在main.js文件里存在相应的配置，代码如下：

require.config({
paths:{
jquery:'jquery-3.0.0',
abc:'abc'
}
});
require(["abc"])

上述代码在require.config函数里定义路径，指明jquery指向同目录下的jquery-3.0.0.js文件，abc则指向abc.js文件。

在require()函数里则直接引用’abc’或者’jquery’。

前面所提到的另一个优点：异步加载js文件，防止请求阻塞。其体现在引用文件之后再进行后面的回调函数的操作，例如：

require.config({
paths:{
jquery:'jquery-3.0.0',
abc:'abc',
a:'a'
}
});
require(['jquery'],function($){
alert($('div'));
});

文件在加载完成jquery框架之后才执行后面的函数，防止同步阻塞的情况。回调函数在很多库里面都采用了这样的方法来防止阻塞情况的发生。

引用之后返回的参数可以在回调函数里传入，例如上述代码在引入jquery之后返回的参数以$的形式传入回调函数。

定义模块

require.js源码中，声明了两个全局变量，分别是requirejs, require, define，其中require===requirejs，源码如下：

而define()函数是自定义模块，可以像以下来定义：

1.简单的值对

定义之后返回的只是一个简单的对象，也就是简单的键值对。例如：（该文件设为a.js）

define({
name:"ggg",
age:18
})

上述代码定义一个新的模块，为简单的键值对，在下面的引用之后可以调用模块里的参数值。代码如下：

require.config({
paths:{
jquery:'jquery-3.0.0',
abc:'abc',
a:'a'
}
});
require(["a"],function(data){
console.log(data.name);
});

上述代码输出如图所示结果：

2.函数式定义

函数式定义为模块为函数，直接返回函数最终的值，可以是各式各样的返回值。例如：

define(function(){
return{
name:"ggg",
age:18
}
})

上述代码返回的是一个对象，和定义键值对模块时一样的，最终返回的是：

3.存在依赖的函数式定义

定义的是与之前模块存在函数依赖的模块，代码如下：（该文件设为abc.js）

define(['a'],function(data){
return {
myName:data.name,
myAge:data.age+4
}
})

代码依赖于a.js文件（与上一个例子代码一样），将其返回的对象作为参数赋值给新对象，并且将myAge增加4。

其引用abc.js文件的代码如下：

require.config({
paths:{
jquery:'jquery-3.0.0',
abc:'abc',
a:'a'
}
});
require(["abc"],function(data){
console.log(data.myAge);
});

其最终输出的年龄值如下：

4.将模块定义为一个函数

定义时可以将模块定义为函数，意味着在模块内返回一个函数作为模块的结果，然后在引用模块时直接调用该函数，代码如下：（修改abc.js文件）

define(function(){
return function(arg){
console.log(arg);
}
})

返回一个函数，函数实现将传入的参数输出。

引用文件的代码如下：（main.js文件）

require.config({
paths:{
jquery:'jquery-3.0.0',
abc:'abc',
a:'a'
}
});
require(["abc",'a'],function(callback,data){
callback(data);
});

代码引用了两个模块，分别为abc.js和a.js（与上一个例子的a.js文件一样），并传入参数为callback以及data，之后调用callback函数将其输出。最终输出结果如下：

更多的定义形式在require.js中文文档可以查询，我就我见到的几个进行介绍。

以上是我对require.js的简单理解，还请各位大牛轻喷。欢迎大家交流指正！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航