require.js

一、require.js 功能是加载模块，属于AMD规范的实现。以前传统的方式是以下所示

　　<script>

　　......

　　</script>

或者

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

当页面最初被加载时，若是script标签放到body以前，当遇到script标签时，会优先加载js，所以致使页面渲染会被暂停，用户体验很差。采用异步加载资源，提升加载速度和代码质量

二、require定义三个变量：define,require,requirejs  require===requirejs

define([新定义的模块名],[dependencies],factory) 定义一个模块,若是提供了模块名，则模块名必须是绝对的，不容许相对

模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式，或者"."，".." 模块名不容许文件扩展名的形式，如“.js” 模块名能够为 "相对的" 或 "顶级的"。若是首字符为“.”或“..”则为相对的模块名 顶级的模块名从根命名空间的概念模块解析 相对的模块名从 "require" 书写和调用的模块解析

require(模块名) 加载依赖模块，加载完成后执行回调函数，与定义的模块名一致。

模块，不一样于传统的脚本文件，它良好地定义了一个做用域来避免全剧名称空间污染。它能够显示地列出其依赖关系，并以函数参数形式将这些依赖进行注入，则无需引用全局变量

三、define('js/a',function(){...}) 

　　require(['js/a']);  //加载本地js

若是是加载服务器或者CDN上的js，地址会比较长，能够先用require.config配置一下模块加载位置，也就是给模块名起个短点的名字，方便引用

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

paths能够配置别名，还能够配多个路径，若是前面的路径没有加载成功，能够选择后面的加载路径

四、require.config配置，为了不让每一个页面都写入配置，能够使用data-main属性

<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'
})

经过require加载的模块通常都须要符合AMD规范即便用define来申明模块，可是部分时候须要加载非AMD规范的js，这时候就须要用到另外一个功能：shim

require.config({
    shim: {
            'touch': {
                deps: ['zepto_core'],
                exports: '$'
            },
            'swipe': {
                deps: ['zepto_core'],
                exports: 'Swipe'
            },
            'delay': {
                deps: ['zepto'],
            }
        }
})