RequireJS介绍(一)

最新推荐文章于 2021-06-24 04:54:20 发布

qsong_213

最新推荐文章于 2021-06-24 04:54:20 发布

阅读量637

点赞数

分类专栏： JS 文章标签： requirejs html define javascript 模块化

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

首先先看正常编写方式（一个index.html，一个a.js）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="a.js"></script>
</head>
<body>
   <span>body</span>
</body>
</html>

/**
 * Created by qsong on 2016/3/3.
 */
/*书写函数*/
function fun1(){
    alert("it works");
}
/*调用函数*/
fun1();

/*JS阻塞浏览器渲染，先出现弹出框，其次才能看到网页内容*/

然后去运行该index.html文件，alert执行的时候，html内容是一片空白的，即<span>body</span>并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

接下来看requirejs写法（一个index.html,一个a.js）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requireJS练习</title>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript">
        /*使用程序调用的方式加载js*/
        /*require中的依赖是一个数组，必须用数组来定义*/
        require(["a"]);
    </script>
</head>
<body>
<span>body</span>
</body>
</html>

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

浏览器提示了"it works"，说明运行正确，但是有一点不一样，这次浏览器并不是一片空白，body已经出现在页面中

目前为止可以知道requirejs具有如下优点：

防止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>

qsong_213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RequireJS介绍(一)

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。首先先看正常编写方式（一个index.html，一个a.js）： body/** * Creat
复制链接

扫一扫

专栏目录