发表于： 2017-06-14 22:04:00

【武汉第141期】如何使用requireJS

分享人：王峰

1.背景介绍

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

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

2.知识剖析

什么是requireJS?

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

3.常见问题

首先我们来看看一下引入requireJS和不引入requireJS的区别

index.html

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

a.js

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

fun1();

index1.html(引用requireJS)


<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>

</head>
<body>
<span>body</span>
<script type="text/javascript">
    require(["a1"])
</script>
</body>
</html>

a1.js

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

    fun1();
});

得到的结果index.html

index1.html得到的结果

4.解决方案

requireJS的基础知识

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

比如在上个demo中，就是通过define函数定义了一个模块

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

然后通过require来加载依赖模块

<code>
    require(["a1"]);
</code>

5.编码实战

6.扩展思考

如果我要加载一个jq的cdn路径，该怎么引入？

在这里需要用到require.config,require.config是用来配置模块加载位置，简单点说就是给模块起一个更短更好记的名字

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