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

requirejs的用法与特点

2017-12-18 15:14 155 查看

requirejs具有如下优点：

1.防止js加载阻塞页面渲染

2.使用程序调用的方式加载js，防出现如下丑陋的场景

require.js的用法

1.在index.html文件中

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html>

2.在a.js中

define(function(){
function fun1(){
alert("it works");
}

fun1();
})

require会定义三个变量：define,require,requirejs，

其中require === requirejs，一般使用require更简短

define 从名字就可以看出这个api是用来定义一个模块

require 加载依赖模块，并执行加载完后的回调函数

来加载该模块(注意require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义)，require API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑，如：

require(["js/a"],function(){
alert("load finished");
})

注意本地加载文件的书写格式与加载外部文件格式的不同

1.本地加载文件书写格式

require(["js/a"],function($){
$(function(){
alert("load finished");
})
})

2.外部文件书写格式

require.config({ // 配置加载文件格式的变量
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
}
})
require(["jquery","js/a"],function($){ // 对定义的变量进行引用
$(function(){
alert("load finished");
})
})

3.通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})

全局配置

1.新建一个main.js文件中

require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})

2.再在require.js文件中添加data-main属性

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

AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制。

在加载依赖项时，AMD用的是异步，而dojo.require是同步。异步和同步的区别显而易见，前者不

会阻塞浏览器，有更好的性能和灵活性。而对于NodeJs这样的服务器端AMD，则模块载入无需阻塞

服务器进程，同样提高了性能。

define和require这两个定义模块、调用模块的方法，合称为AMD模式。

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

标签：

相关文章推荐

新的分享

章节导航