了解一下 requireJS

前言
了解了一下require的一些基本用法

风萧萧

require有什么用呢
抄袭的，嘿嘿
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
1、require.js可以防止js阻塞页面的渲染
2、在调用js的时候，也许我有一点点模块的想法，写了不少js模块，有了require，就不必一个一个的在页面中加载，写一堆的引入script标签了
3、模块，如果js文件特别长，维护起来找都是个麻烦

好处还是多多的
然后我就用了一下下

使用

基本api

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

define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

1、基本用法
首先是在页面头部引入require.js

<script src="require.js"></script>

我们先写一个假设map.js,里面放我们的一些地图需要的js代码
ok，首先我们定义一下map.js这个模块，用define，如下

define(function(){
    这里面写我们需要写的map.js代码
})

接着我们就可以在页面中调用了

<script>
    require(['map']);
</script>

ok,完毕，map中的代码就会执行出来了，那怎么才知道加载出来了呢，刚好，require给了我们一个参数callback就是用来处理加载完毕的逻辑的

<script>
    require(['map'],function(){
        alert('我加载完了');
    });
</script>

那如果我们想加载网上的链接或者类库呢，比如说我一般jquery都是引入的cdn的链接，怎么办，有办法，看代码

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

require.config就是用来配置require的，也可以理解成是给模块起名字的，如图中，jquery就可以直接写jquery了，同时path也可以加载本地的库

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

这样一来，如果链接没有加载成功，就会去调用本地的jquery，有没有发现在回调函数中的$参数，没错，它就是依赖于模块的输出变量，为什么是$，用jquery习惯的，哈哈，也可以改其他的名字，假如有多个模块需要写入，就可以根据模块的数量来定义输出变量，看代码

require(["jquery","map"],function($，map){
    $(function(){
        alert("load finished");  
    })
})

如果不写，就相当于这个模块没有输出变量，所以尽量有输出变量的模块写在前面，防止顺序出错

全局配置

模块多了是不是还得在页面写一堆，要是模块里面的函数很多都写在页面是不是不好，那要是有很多页面呢，每个页面都需要配置一下吗，requireJS提供了一个主数据的功能，我们首先创建一个main.js，页面中的引入就需要改变一下，如下

<script data-main="main" src="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引用模块而代码写在main.js里面，页面就只需要一句引入script标签就可以了，不管多少代码，多少模块，一次性搞定，是不是很方便。

第三方模块
通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim，shim解释起来也比较难理解，shim直接翻译为”垫”，其实也是有这层意思的

require.config({
    shim: {
        "underscore" : {
            exports : "ex";
        }
    }
})

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

插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件”垫”到jquery中：

require.config({
    shim: {
        "underscore" : {
            exports : "ex";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

也可以简写为：

require.config({
    shim: {
        "underscore" : {
            exports : "ex";
        },
        "jquery.form" : ["jquery"]
    }
})

配置完成之后我们就可以这么引入模块了

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

最后，还有个小知识点，有时候我们会因为服务器的原因遇到版本不更新的问题，不忙，我们在配置中可以加上版本号urlArgs: ‘ver= ‘,，如下

requirejs.config({
    shim: {

    }, 
    paths:{

    },
    urlArgs: 'ver=4.8',
});

收工~