require.js

1、是什么？为什么？

关于require.js，通俗来讲就是用来管理js代码之间的依赖和js代码文件太多加载问题，

遵循的是 AMD（异步模块定义）规范。

目的是为了前端代码的可维护性和易编写性。

2、优点？

js异步加载，避免浏览器在加载网页依赖的js文件时导致页面失去响应。
管理模块之间的依赖，coding的时候效率更高了。

（总结：能解决的问题能力，就是他的优点。）

3、怎么用？


3.1 require.js的加载？

     当然纸上谈兵得先有兵：
     1、官网下载require.js   (开发需要的时候，放在你的public/lib/js文件夹下),

     2、像你引入别的js文件一样，script标签引入require.js
即可。推荐的引入方式：

方式1：

<script src="js/require.js"></script>（写在网页底部，避免该文件加载时，失去响应）

方式2：

<script src="js/require.js" defer async="true" ></script>（async="true"异步加载js文件，defer被IE支持）

     3、接下来引入自己的js代码文件
 
      假设自己的js代码文件名称为 main.js 、那么你需要将js文件同require.js放在同一个文件夹的下面。
然后引入main.js。

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

data-main属性： 网页程序的主模块。data-main后的文件 会第一个被require.js加载，文件可以省略.js后缀。
main.js：主模块相当于一个网页的入口代码文件。所有的代码从这儿开始。

3.2 书写主模块。
     通常情况下，主模块依赖于其他模块，这个时候可以使用require（）书写主模块代码（处理文件依赖和文件加载）

     在main.js文件内书写模块的依赖关系：

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    //代码体

});

关于require( [  ] ，function（）{  }  )函数
 ：
                         参数 1：数组
                         参数 2：回调函数

require.js依赖前置，实现方式如同js一样：
 require函数检查依赖的模块，根据配置文件，获取js文件的实际路径
 根据js文件实际路径，在dom中插入script节点，并绑定onload事件来获取该模块加载完成的通知。
 依赖的模块 全部异步加载完成后，就会调用回调函数 ，
               参数1中的模块，以参数的形式传入该函数。从而在回调函数内部就可以使用这些模块。回调函数内部书写主模块代码。      

        
     
3.3 模块的加载
     
    使用require.config(  )方法，我们可以对模块的加载行为进行自定义。
             require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
        

require.config({

　　　　paths: {

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",

　　　　　　"backbone": "backbone.min"

　　　　}

　　});

     关于路径：
          路径默认与main.js在同一个目录（js子目录）
          当不在同一个目录下时，有两种写法：
     法1：逐一指定路径。

require.config({

　　　　paths: {

　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"

　　　　}

　　});

     
    法2：直接改变基目录（baseUrl）。

require.config({

　　　　baseUrl: "js/lib",

　　　　paths: {

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

     require.js要求每个模块都是一个js文件，如果加载多个模块会出现多次HTTP请求。会严重应影响网页的加载速度。于是我们需要require.js为我们提供的优化工具。当部署完所有的模块之后，该工具可以帮我们将多个模块进行整合，合并在一个文件中。减少了HTTP请求的次数。
http://requirejs.org/docs/optimization.html (
优化工具)

3.4 AMD模块写法
require.js严格采用AMD规范，所以模块的书写必须按照规范来。
即：
     define()函数定义：如果一个模块谁都不依赖，那么可以直接写在define()函数内。比如定义一个main模块。于是我们应该按照如下书写在main.js文件内：
   
一个js文件就是一个模块。

/main.js
独立模块书写方式：
define(function (){

　　　　var add = function (x,y){

　　　　　　return x+y;

　　　　};

　　　　return {

　　　　　　add: add
　　　　};

　　});

加载方法如下：

　require(['math'], function (math){

　　　　alert(math.add(1,1));

　　});

    
     如果math这个模块依赖其他的模块 那么define（）函数的 第一个参数 就得是一个 数组 （指明该模块的依赖性）
   即：

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

   那么当require（）加载上面这个模块时，就会先加载mylib.js文件。

3.5 加载非AMD规范的模块  
 
require.js也是可以加爱非规范的模块的。
     非规范模块在require.js加载之前，先用require.config()方法，定义他们的一些特征。
   require.config接受一个配置对象，这个对象除了前面说过的paths属性之外，还有：
  
shim：用来配置不兼容的模块，shim需要定义：1）exports（输出的变量名），表明了该模块在外部调用时的名称。
   2）deps数组，表明该模块的依赖性。

   比如：underscore和backbone这来那个库，都没有采用AMD规范：

require.config({

　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},

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

　　　　}

　　});

   比如：jquery插件的定义：

require.config({
shim: {

　　　　'jquery.scroll': {

　　　　　　deps: ['jquery'],

　　　　　　exports: 'jQuery.fn.scroll'

　　　　}

　　}
})

     

4、require.js插件
  
require.js还提供了一系列插件，实现特定的功能。
     domready可以让回调函数在页面的DOM结构加载完之后运行。

      text和image插件，则是允许require.js加载文本和图片文件的。。。反正就是五花板门都有。
 
      https://github.com/requirejs/requirejs/wiki/Plugins