学习链接

require的基本思想:通过 define方法，将代码定义成模块，通过require方法，实现代码的模块的加载复制代码

1.将require.js 嵌入网页

复制代码

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

2.定义define模块 如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成

define(function(){    //定义单独的模块    return{        method1:function(){},        method2:function(){}    }})复制代码

定义相互依赖模块

define(['module1', 'module2'], function(m1, m2) {    return {        method: function() {            m1.methodA();			m2.methodB();        }    };});复制代码

3.使用require方法 调用模块 require 方法用于调用模块

require(['foo', 'bar'], function ( foo, bar ) {        foo.doSomething();});复制代码

4.加载非规范的模块

require.config({       shim: {       'underscore':{       exports: '_'       },       'backbone': {       deps: ['underscore', 'jquery'],       exports: 'Backbone'       }       }   });复制代码

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

// 全局配置require.config({    // 根路径设置，paths下面全部都是根据baseUrl的路径去设置    baseUrl:'./js/',    paths:{        // 引入jQuery        jquery:'plugin/jquery',        // 引入bootstrap        bootstrap:'plugin/bootstrap',        // a.js        a:'a',        // b.js        b:'b',        // 引入c.js        c:'c'    },    // 用来配置不兼容的模块，意思是：该模块没有module.exports,    // jquery就有module.exports输出值    shim:{        //bootstrap没有module.exports输出值，所以得放在shim        bootstrap:{            //bootstrap需要依赖jquery，所以得加deps            deps:["jquery"]            // 如果该模块加载进来，需要输出一个值，那就用exports来设置，这里不用设置            // exports:''        }    },    //map"告诉RequireJS在任何模块之前，都先载入这个模块    map: {        // 这里没有设置，举个例子        // '*': {            // 'css': 'plugins/require-css/css'        // }    }})复制代码