JS-require.js

一、require的优点：

模块化、不用关心JS声明的顺序

二、如何使用

2.1 下载require.js，在html中引入，并指定入口JS

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

src:指定require.js的目录

defer async=”true”:异步加载，防止JS文件的加载导致页面失去响应

data-main=”main”：指定一个入口main文件，.js后缀名可以省略，require会在后面自动加上，如果不在同一级目录，需要注意指定路径

2.2 main中 require的写法

例如在main.js中，依赖Tools.js。调用Tools.js弹窗一个对话框

首先，利用define 定义一个Tools.js

define([],function () {
var toolObj = {};
toolObj.showDialog = function (message) {
alert(message);
};

return toolObj;
});

然后，运用require 在main中引入Tools.js

require(['Tools'],function (tool) {
tool.showDialog();
});

define ,require函数都接受两个参数。

第一个参数是一个数组，表示所依赖的模块；

第二个参数是一个回调，依赖的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

所有依赖的模块都加载完成，才会响应回调函数

三、config配置

equirejs.config({

/**
* 以html所在目录为根起点，指定同级的js目录为相对路径
*/
baseUrl: '../js',

/**
* 可以在这里指定所有模块的路径，并定义个名称
*/
paths: {
Tools: './Tools', //name : path
Test: './Test', //name : path
},
/**
* 这里可以设置模块的依赖
* 和对非标准的JS做兼容
*/
shim: {
/**
*  对非标准的Test.js里面的consoleLog和consoleError方法做兼容
*/
'Test': {
init: function () {
return {
log:consoleLog,
err:consoleError
}
}
},

/**
* 设置bootstrap的依赖
* 引入bootstrap会先加载依赖的jquery和css
*/
'bootstrap':{
'deps':['jquery','css!../css/bootstrap.min.css']
}
}
});