requirejs学习（一）

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

Requirejs是一个非常小巧并且强大的模块加载器，可以帮助我们实现模块化开发，它是AMD规范非常好的体现，使用模块化开发，使得项目更加便于团队协作，模块复用、后期维护等；

我们为什么要使用requirejs？

首先来看看官方的描述：

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.

大意为：requirejs是js模块加载器，不仅可以在浏览器中运行使用，还可以在Rhino和Node环境中，使用它可以提升你的开发速度和代码质量。。。

先看看我们平时两种常见情况：

第一个，在页面执行自执行函数：

<script>
    (function () {
        function fn() {
            alert('我来自匿名自执行函数！');
        };
        fn();
    })()
</script>

结果：当页面加载的时候，会弹出alert弹框，在点确定之前，页面都是空白，也就是html元素都还未被渲染出来，点确定之后，就正常了。这说明了js是会阻塞浏览器渲染，当引用的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>

第二种情况：使用requirejs

<!DOCTYPE html>

<html>

    <head>

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

        <script type="text/javascript">

            require(["test"]);

        </script>

    </head>

    <body>

      <span>body</span>

    </body>

</html>

test.js文件（模块）

define(function(){

    function fun1(){

      alert("it works");

    };

    fun1();

})

结果：使用requirejs后，页面加载的时候，弹出alert框，但是页面的内容也同时出来了，没有对比就没有伤害，这就体现了Requirejs的优点了：

requirejs使用异步加载，不阻塞浏览器渲染；
可以按需要加载对应的js模块（文件），防止一次性页面加载大量js文件；

requirejs用法：

1、在页面底部上引入require.js文件，然后指定main入口文件：

 <script src="./require.js" data-main="./js/main"></script>

其中，data-main属性指向的main.js文件为入口文件，其他的模块在main中按需加载；

在requirejs中，define（定义模块）、require（引入模块），requirejs，其中require===requirejs，require是简写；

main.js

//配置require

require.config({
　　//baseUrl:'../lib',

    paths:{

        jquery:'lib/jquery',

        bootstrap:'lib/bootstrap',

    },

    //设置依赖关系

    shim: {

        bootstrap: {

            deps: ['jquery']，
　　　　　　　 export:'$'

        }

    }

});

//引入依赖

require(['jquery','bootstrap','addText'],function ($,_,desc) {

    desc.func();

    console.log(desc.text);

});

require()

require（）方法有两个参数，前面是一个数组，也就是引入的依赖模块（如果没有依赖的话，也就没必要用requirejs了），第一个参数有依赖的话，必须是一个数组；第二个参数是一个回调函数，函数可以传参，参数根据引入的依赖，自定义一个变量，比如依赖jQuery，那回调的对应的参数可以定义为$。

在引入的依赖模块中，都是异步加载的，所有模块加载完成后执行回调函数；

require.config()

require.config()是用来配置模块的相关属性的：

baseUrl用来定义根目录，后面的paths定义的模块路径就以baseUrl定位的目录lib为基准，在paths中定义的key为模块的变量，在下面可以直接引用；

这里注意，如果没有配置baseUrl，则默认的将根目录设置为main.js所在的目录；

//敲黑板，shim是用来配置不兼容AMD模块的，deps是依赖模块，export是导出的当前模块的变量名；

模块路径

前面讲的，默认是其他模块跟main模块在同一目录下；如果不在一个目录下呢，已默认的根目录问基准再去寻找其他的模块路径，如：

项目目录：

main.js

//main.js

require(['./addText','../modal'],function (add,m) {

    console.log(add.text);

    console.log(m.text);

});

addText.js(模块)

//addText

define(function () {

    var addText = function () {

        $('.btn').click(function () {

            $('.box').text('我刚刚点击了按钮');

            $('#MyModal').modal();

        });

    };

    return {

        func:addText,

        text:'啊哈哈，我来自addText'

    };

});

modal.js(模块)

//modal

define(function () {

    return {

        text:'啊哈哈，我来自modal'

    };

});

发现了吧，路径都是以默认的根目录为基准路径（没有手动设置baseUrl的情况下）；

先到这里吧，后面继续学，继续补充。。。