require.js学习记录

1、简介

官方对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.
即在浏览器中，require.js可以作为文件的模块加载器，可以用在Node和Rhino环境中。
工作方式为：requireJS使用head.appendChild()将每一个依赖加载为一个script标签。然后等待所有的依赖加载完毕，计算出模块定义函数正确调用顺序，再依次调用它们。

2、优点

（1）防止js加载阻塞页面渲染
（2）管理模块之间的依赖，便于管理和维护

3、使用介绍

（1）引入：

方式一：使用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为根路径

方式二：直接script嵌入

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

（2）require.config配置

在main.js中进行require.config的配置。如如下主要的配置参数：

baseUrl: 设置根目录
paths：配置模块的加载位置。可以给模块定义一个更好记的名字。还可以配置多个路径，如果远程CDN没有加载成功，则加载本地的文件。

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

shim: 通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim。

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

除了可以在require.js加载完毕后，通过require.config进行配置之外，在require.js加载之前，定义一个全局的对象变量 require 来事先定义配置参数。然后在require.js被浏览器加载完毕后，便会自动继承之前配置的参数。

<script>

    var require = {

        baseUrl: 'js/',

        paths: {

            'jquery': 'http://xxx.xxxx.com/js/jquery.min',

            'index': 'index'

        },

        deps:[index]

    };

</script>

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

除了上面3个常用的配置项，还有其他的：
urlArgs：解决版本控制问题。urlArgs: 'ver=0.1.2'。还可以用来实现在文件后增加随机数的方式，忽略浏览器缓存。urlArgs: new Date().getTime(),
waitSeconds: 设置加载脚本的超时时间
deps: 声明require.js加载完成后便会自动加载的模块
callback: 当deps中自动加载模块加载完成时，处罚的回调
map: map告诉RequireJS在任何模块之前，都先载入这个模块，这样别的模块依赖于css!../style/1.css这样的模块都知道怎么处理了

（3）require和define

这两个是最常用的命名。define用于定义模块。require用于加载模块及配置文件。在requirejs中一个文件就是一个模块，文件名就是该模块的ID。

define：可以单独定义键值队数据，作为配置文件来使用；

define({

    'name':'zhangsan',

    'age':'20'

});

还可以定义依赖的关系：

４、压缩

(1) r.js

使用r.js来进行压缩时，需要指定build.js文件。build.js主要配置如下：

({
       baseUrl: './js/pages', 　　 //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的
  
      appDir: './', 　　 //项目根目录
      dir: './outdir',　　 //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
  　　　　/* 有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示 */
  　　　　/*"appDir" is not compatible with "out". Use "dir" instead. appDir is used to copy whole projects, where "out" with "baseUrl" is used to just optimize to one file.*/
  　　　　/*"appDir" 和 "out"是不兼容的，需要用"dir"代替， "appDir"是用来拷贝整个项目的，"out"和"baseUrl"仅是用来优化一个文件的*/
      modules: [
 　　　　//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件)
 　　　　//该属性必不可少，因为一个程序至少需要有一个入口
         { name:'main'},
         { name:'index'} 
 　　],

     out: 'index-build.js',　　//输出文件名
     name:'main',

     fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正则匹配过滤文件，匹配到的文件将不会被输出到输出目录去，这里过滤掉的是 r.js、build.js、*.scss三类文件
 　　optimizeCss: 'standard',
 　　removeCombined: true, //如果为true，优化器将从输出目录中删除已合并的文件
 　　paths: { //各模块相对baseUrl的路径，直接从require.config的path配置中烤取即可
         "underscore": "../libs/underscore/underscore-min",
         "backbone": "../libs/backbone/backbone-min",
 　　},
     shim:{// 配置不符合AMD规范的模块，直接从require.config的shim配置中烤取即可
         "underscore": {
 　　        exports: "_"
         },
         "backbone": {
 　　        deps: ["underscore", "jquery"],
 　　        exports: "Backbone"
         },
     } 
 })

执行r.js -o build.js 即可实现压缩。
在链接https://www.cnblogs.com/rubyl... 中有很好的示例，可以参看学习。

(2) 使用gulp

安装好gulp和gulp-requirejs-optimize
gulpfile的配置如下：

var gulp = require('gulp');
var requirejsOptimize = require('gulp-requirejs-optimize');
gulp.task('rjs', function(){
    return gulp.src('src/js/*.js')
    .pipe(
        requirejsOptimize({
            optimize: 'none',
            mainConfigFile: 'src/config.js'
        }))
    .pipe(gulp.dest('dist/js/'));
});

5、加载其他的文件

(1) 加载css
加载css需要使用require-css插件(https://github.com/guybedford...
首先需要设置

map: {
  '*': {
    'css': 'require-css/css' // or whatever the path to require-css is
  }
}

在define中使用就可以了

define(['css!styles/main'], function() {
  //code that requires the stylesheet: styles/main.css
});

(2) 加载其他

define([
　　　　'text!review.txt',
　　　　'image!cat.jpg'
　　　　],
　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);

使用text和image插件，则是允许require.js加载文本和图片文件。类似的插件还有json和mdown，用于加载json文件和markdown文件。