require.js的作用简单介绍

我心飞翔 分类:实例代码

在阅读本章节之前,建议阅读以下几篇文章:

(1).javascript如何实现模块编程简单介绍一章节。

(2).javascript的AMD规范简单介绍一章节。

现在网站功能已经非昨日相比,强大程度接近于应用程序,当然随之而来的就是代码量的庞大,和javascript的海量应用。

原来通过一个<script>引入一个简单的js文件就可以网页的功能需求,现在则需要引入大量的js文件,如下形式:

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

上面仅仅是做一个说明,在实际应用中,引用的js文件可能比上面的要多的多。

如此引入js文件问题实在是非常多,最明显的有如下两点:

(1).加载的时候可能会导致网页渲染的阻塞,导致空白页面。

(2).js文件之间可能存在依赖关系,因此需要严格保证加载的顺序,当依赖关系复杂的时候,维护很困难。

于是require.js的作用就得到了体现。

require.js的作用:

下面先给出require.js的作用,后面再通过代码实例进行一下演示。

(1).实现js文件的异步加载,避免网页失去响应。

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript" src="demo/js/js/a.js"></script>
</head>
<body>
<span>页面的文本将会在弹出窗口之后才能看到</span>
</body>
</html>

alert()会阻塞页面的加载和渲染,不会看到span中的文本,当点击确定之后才会看到文本。

a.js中的代码如下:

alert("犀牛前端部落");

咱们再来看一下使用require.js后的效果,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="demo/js/js/require.js"></script>
<script type="text/javascript">
require(["demo/js/js/b"]);
</script>
</head>
<body>
<span>内容显示不会被堵塞</span>
</body>
</html>

可以看到span中的内容显示不会被堵塞。

b.js的中的代码如下:

define(function () {
  function func() {
    alert("犀牛前端部落");
  }
  func();
})

关于require.js的使用可以参阅require.js用法介绍一章节。

require.js的作用简单介绍,这样的场景在实际项目中还是用的比较多的,关于require.js的作用简单介绍就介绍到这了。

require.js的作用简单介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容