2016-05-14

模块化工具以及requireJS的简单入门(下)

继上篇文章讲了模块化和AMD规范之后，下面咱们重头菜来了— requireJS.那什么是 requireJS呢？
RequireJS是一个非常小巧的 JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

实现js文件的异步加载，避免网页失去响应；

管理模块之间的依赖性，便于代码的编写和维护。

先来看一段常见的场景，通过示例讲解如何运用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 fun1(){
  alert("it works");
}

fun1();

可能你更喜欢这样

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

    fun1();
})()

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

解决办法有三个，一个是把它放在网页底部加载，另一个是写成下面这样：

1	<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

最后一种方法就是使用 require.js 下载地址：http://requirejs.org/docs/download.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();
})

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

基本API

require会定义三个变量：
define,require,requirejs，其中require === requirejs，一般使用require更简短
define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

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

    fun1();
})

上面的a.js就是通过define函数定义了一个模块，然后再在主页面中使用：

1	require(["js/a"]);

require 加载依赖（注意require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义），
requireAPI的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑，如：

1
2
3

require(["js/a"],function(){
    alert("load finished");
})

加载文件

之前的例子中加载模块都是本地js，但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN，这样就不能通过这种方式来加载了，我们以加载一个jquery库为例：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   //jquery是没有.js,是不需要的；
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

这边涉及了 require.config，require.config是用来配置模块加载位置，简单点说就是给模块起一个更短更好记的名字，比如将百度的jquery库地址标记为jquery，这样在require时只需要写[“jquery”]就可以加载该js，本地的js我们也可以这样配置：

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

通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：

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

这样配置后，当百度的jquery没有加载成功后，会加载本地js目录下的jquery
上面例子中的callback函数中发现有$参数，这个就是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用：

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

如果某个模块不输出变量值，则没有，所以尽量将输出的模块写在前面，防止位置错乱引发误解

全局设置

上面的例子中重复出现了require.config配置，如果每个页面中都加入配置，必然显得十分不雅，requirejs提供了一种叫”主数据”的功能，我们首先创建一个 main.js：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

然后再页面中使用下面的方式来使用requirejs：

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

解释一下，加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名
data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？如上面的data-main=”js/main”设定后，我们在使用require([‘jquery’])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js，相当于默认配置了：


require.config({
    baseUrl : "js" //改变基目录（baseUrl）
})

那main.js里面写什么呢？主模块(main)依赖于其他模块，这时就要使用AMD规范定义的的require()函数。

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

下面，我们看一个实际的例子。
假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写：

1
2
3

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
　　});

require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。

加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用 require.config()方法，定义它们的一些特征。
举例来说，假设underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。
require.config()接受一个配置对象，这个对象除了有前面说过的 paths属性 之外，还有一个 shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义：
（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
（2）deps数组，表明该模块的依赖性。

require.config({
　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

这样配置后，我们就可以在其他模块中引用underscore模块：

1
2
3

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

最后，如果是插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，怎么办呢？解决如下：

shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}

好了，requirejs的基本配置大致就是这么多

转载来自：
http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html