JavaScript模块化编程

requireJs入门.md

requireJs入门

一.基本使用

1.define定义模块

//helper.js:

define('helper',['jquery'],function($){
  return {
    trim : function(str){
      return $.trim(str);
    }
  }
})

各个部分的解释：

2.require加载模块

//app.js:

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})

3.加载文件

requirejs以一个相对于baseUrl的地址（也就是路径）来加载所有代码

如果只是单纯在html文件中引用requirejs，那么这个路径就是html文件所在的目录；
如果是使用了data-main这个属性，路径就是相对于data-main设置的属性值(注意data-main属性值可以不加.js，会默认自动添加)
还有一种方法就直接在加载模块的js文件上配置baseUrl：

//app.js:

requirejs.config({
  baseUrl : '/js'
});

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})

4.加载机制

requirejs使用head.appendChild()将每一个依赖加载为一个script标签
这意味着模块文件可以跨域访问

另外，requirejs加载后就立即执行

二.配置模块路径

假如，各个文件的内容如下：

//app.js:

requirejs.config({
  baseUrl : '/js'
});

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})



//helper.js:

define('helper',['./lib/jquery'],function($){
  return {
    trim : function(str){
      return $.trim(str);
    }
  }
});
//注意此时jquery.js的路径改变为/js/lib

如果这样使用，最后模块会是undefined的对象

如果进入jQuery源代码就可以知道，源码中指定的模块名称是jquery，而在声明的代码中不是，所以发生了问题

要解决这个问题可以使用一个paths参数:

//app.js
requirejs.config({
  baseUrl : '/js',
  paths : {
    'jquery' : './lib/jquery'
  }
});
//'jquery' :模块名   模块路径: './lib/jquery'

另外要补充的是，paths参数不一定是一个对象，还可以是一个数组，数组的第一个选项就是首选加载模块，比如可以是cdn，第二个可以是本地文件(备用)

三.定义模块

函数式定义

也就是前面的helper.js的方式

定义简单的对象

define({
  user : 'xx',
  age : '18',
  sex : 'male'
})

四.配置不支持amd的库和框架

比如像modernizr、bootstrap这些。

可以使用shim参数配置

加载不支持AMD的库，如modernizr：

shim:{
  'modernizr' : {
      exports : 'Modernizr'
  }
}
//将全局变量Modernizr导入为模块

加载不支持AMD的框架，比如bootstrp：

shim : {
  'bootstrap' : ['jquery']
}
//加载jQuery依赖

五.其他配置选项

加载不同版本的库

map : {
  'app/api' : {
    'jquery' : './lib/jquery'
  },
  'app/api2' : {
    'jquery' : './lib/jquery2'
  }
}

当app/api模块里加载jQuery模块时，将加载jquery.js
当app/api2模块里加载jQuery模块时，将加载jquery2.js

超时

waitSeconds：下载js等待时间，默认为7秒；如果设置为0，，则禁用等待超时

urlArgs：下载文件时，在url后面增加额外的query参数
ag: urlArgs : '_=' + new Date().getTime()