Require.js的基本用法详解资源-CSDN下载

184 浏览量 2021-01-19 16:50:11 上传评论收藏 86KB PDF 举报

资源推荐

资源详情

资源评论

Require.js的基本用法详解的基本用法详解

一一:什么是什么是require.js

①：require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面

的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能；

②：require.js要求js脚本必须要实现模块化，即文件化；而require.js的作用之一就是加载js模块，也就是js文件。

③：require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery，AngularJs等采用了不同的语法，而使用这些语法的

js文件在导入时必须排在Jquery.js或Angular.js之后才能顺利执行，require.js则能够解决排序依赖问题。

二二:为什么要使用为什么要使用require.js

①：加载的时候，浏览器会停止网页渲染，原因如下：

在不使用require.js时，文件编写方式如下：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="a.js"></script>

</head>

<body>

<span>Hellow World</span>

</body>

</html>

在导入的a.js文件中：

(function(){

function fun1(){

alert("JS文件已生效");

}

fun1();

})()

在运行以上代码时我们可以注意到在alert弹出的提示框出现的时候，网页html的部分仍然是空白的，没有显示出任何内容，

当我们点击确定之后”Hellow World”才会显示在网页中，这就是JS阻塞浏览器渲染导致的结果。加载文件越多，网页失去响应

的时间就会越长。

②：由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂

的时候，代码的编写和维护都会变得困难。例如：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>

<script type="text/javascript" src="js/b.js" ></script>

</head>

<body>

<div id="div1" style="width: 100px;height: 100px;background-color: red;"></div>

</body>

</html>

在b.js文件中

$(function(){

$("#div1").css("background-color","blue");

})

为了使b.js中的代码生效，必须要把<script type=”text/javascript” src=”js/b.js” ></script>这行代码放到<script

type=”text/javascript” src=”js/jquery-1.10.2.js” ></script>后面，这样在使用的框架和js文件较多的时候，它们的导入顺序就会

变得很麻烦。

require.js的诞生就是为了解决上面所说的两个问题：的诞生就是为了解决上面所说的两个问题：

1.实现js文件的异步加载，避免网页失去响应；

2.管理模块之间的依赖性，便于代码的编写和维护。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38709466

粉丝: 5

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip