后台小白前端入门－－RequireJS

导语：

之前一直有听说RequireJS，但是一直都没机会去了解，只知道它是一个给js做模块化的API。最近在做React，其组件化的思想和js模块化的思想不谋而合。就想在项目中应用React的同时，也把RequireJS加进来，看看会不会对页面加载或者开发有很好的效果。

What is RequireJS？

在说明什么是RequireJS之前，不得不提的就是Javascript模块化历史的背景。其实在早期，javascript作为一门新兴的脚本语言出现，有着庞大的愿景，它并不是作为一门仅仅针对客户端设计的语言。只是说后来web应用的流行，javascript作为浏览器端脚本语言而迅速传开，加上Netscape和微软的竞争将其过早的标准化。所以就导致了JS的诸多缺陷，其中一个就是模块化(但是你可以惊奇地发现其实javascript有将import,export等作为保留字，说明设计的时候其实是有考虑的，新的标准es6也让原生支持模块化了)。然后随着web应用越来越复杂，嵌入的javascript代码越来越多，还有node的兴起，模块化编程就变成了必须。

所以就有了后来Dojo工具包和Google的Closure库支持的模块系统。还有两个非常通用的标准规范，CommonJS和AMD。这里就不展开说了，我们只需要知道，实现CommonJS规范的API是同步加载模块的，而实现AMD规范的API是则是异步加载模块。
所以理论上来说，AMD规范的非阻塞加载更加适合浏览器端。而RequireJS就是AMD规范的最好实现。抄一段官方文档对RequireJS的描述：

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

Why RequireJS？

所以，知道了RequireJS是干什么的，也差不多知道为什么我们要使用RequireJS了。不过还是总结一下用RequireJS的好处吧。

• 异步“加载”。我们知道，通常网站都会把script脚本的放在html的最后，这样就可以避免浏览器执行js带来的页面阻塞。使用RequireJS，会在相关的js加载后执行回调函数，这个过程是异步的，所以它不会阻塞页面。
• 按需加载。通过RequireJS，你可以在需要加载js逻辑的时候再加载对应 的js模块，这样避免了在初始化网页的时候发生大量的请求和数据传输，或许对于一些人来说，某些模块可能他根本就不需要，那就显得没有必要。
• 更加方便的模块依赖管理。相信你曾经一定遇到过因为script标签顺序问题而导致依赖关系发生错误，这个函数未定义，那个变量undefine之类的。通过RequireJS的机制，你能确保在所有的依赖模块都加载以后再执行相关的文件，所以可以起到依赖管理的作用。
• 更加高效的版本管理。想一想，如果你还是用的script脚本引入的方式来引入一个jQuery2.x的文件，然后你有100个页面都是这么引用的，那当你想换成jQuery3.x，那你就不得不去改这100个页面。但是如果你的requireJS有在config中做jQuery的path映射，那你只需要改一处地方即可。
• 当然还有一些诸如cdn加载不到js文件，可以请求本地文件等其它的优点，这里就不一一列举了。

RequireJS 使用

需要在页面中引入的文件

使用RequireJS，你只需要引入一个require.js即可。需要说明的是，一个比较好的实践，就是你的页面上面应该也只需要通过

//  js/script/main.js
    require.config(
        {
            paths: {
                'jquery': '../lib/jquery-1.7.2'
            }
        }
    );
    require(['jquery'],function ($) {
             $(document).on('click','#contentBtn',function(){
                $('#messagebox').html('You have access Jquery by using require()');
             });
    });
      

先看index.html的代码，其实比较简单，页面上在js中会用到的就是一个button和一个p标签。然后整个页面就只是一个js文件是通过

//  scripts/main.js:
require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});

// scripts/other.js:

// 由于main.js会是在require.js异步加载完以后再通过回调去执行main.js的
// 所以other.js里面执行的这个require函数可能会发生在main.js的require.config执行之前
// 因此require.config会去尝试去加载"scripts/foo.js"，而不是"scripts/libs/foo-1.1.3.js"
require( ['foo'], function( foo ) {

});

这个例子是官方的。从这里也可以看出来，为什么如前文所说的。页面中最好只有一个入口点文件(属性data-main中引入的main.js)，然后这个入口点文件里引入或者编写配置，加载相关应用模块。
当然你也可以像官方给的第二种方案，不设置入口点，然后在每个require回调中再引入相关配置，不过那样很麻烦而且不易于维护。这里就不给出例子了，有需要可以去官网看。

总结

以上就是关于关于RequireJS简单使用的介绍了，大家有需要可以直接看源码，大概就2000多行，不看具体实现，看它对几个函数声明的描述，对使用起来也是很有帮助的，你会发现有一些连官方文档都没提及到的一些特性(比如require()方法可以直接传入config配置作为第一个参数)。

另外，说一点小插曲，如果需要查阅RequireJS官方的API，有条件的还是建议直接访问英文官方文档。如果说中文的官方文档说还停留在老版本，翻译得比较生涩难懂就算了。一些很明显有错误的描述就真的是责任问题了。我在看中文文档的时候真是各种难移理解，后来直接看英文文档，则顺畅很多。不多说，贴张图让大家感受一下英文文档和中文文档对于waitSeconds的描述：

图片名称

参考资料

• JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系
• RequireJS英文官方文档
• RequireJS中文官方文档 有条件的话还是直接看英文官方文档吧