您的位置：首页 > Web前端 > JavaScript

advanced JavaScript Skills ——Require.js（一）

2016-03-22 20:40 435 查看

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思：

在浏览器中可以作为js文件的模块加载器，也可以用在Node和Rhino环境，balabala…。这段话描述了requirejs的基本功能”模块化加载”，什么是模块化加载？我们要从之后的篇幅中一一解释

先来看一段常见的场景，通过示例讲解如何运用requirejs

普通编写页面的方式：

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<span>body</span>
</body>
</html>

a.js 文件

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

fun1();
})()

以上js文件使用了块作用域来申明function防止污染全局变量，当运行上面两种例子时不知道你是否注意到，alert执行的时候，html内容是一片空白的，即body并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

效果图如下：

单击完确定按钮后：

使用Require.js的写法

（首先要下载:请点击——>Require.js）

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>

a.js代码

define(function(){

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

fun1();
})

执行效果图：

使用它的好处：

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

2、可以通过程序调用的方式加载js文件。就不用写辣么多的JavaScript的引用了。界面整洁美观了更加。如果你的界面像下面一样，可以考虑一下，使用Require.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>

小结：

它是小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。它还同时可以和其他的框架协同工作，协同性好。

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

标签： javascript

相关文章推荐

新的分享

章节导航