Require.js javascript模块化简单用法

第一步　

先去官方网站下载最新版本，require.js 引入到项目中

第二步　

定义config.js

require.config({
baseUrl:'/resources/js',
paths:{
'jquery':'jquery-1.10.2.min',
'bootstrap': 'bootstrap.min'
},
shim:{
'bootstrap':{
exports:'bootstrap',
deps:['jquery']
}
}
})

这里，只引入了两个jquery-1.10.2.min'js 和bootstrap.min.js  ，baseUrl :基础目录，后面的path路径参照baseUrl,

path:引入的各种js模块，前面表示模块名称，后面表示js库路径。shim：专门用来配置不兼容的模块。exports 外部调用时的名称，deps 依赖的js库。

第三步

编写自己的模块

define(['jquery','bootstrap'],function($,bootstrap){
return {
init:function(){
initPage();
}//return 里面发布方法给外部调用
};
function initPage(){
$("body").on('click','#info',function(){
alert("啦啦啦，成功");
});
}

})

引入config paths下的js库，注意function()的参数，如果不用，最好也要写上占位，否则除了放在最后，中间岔了就会报错，找不到。return 里面是暴露出来的犯法，这里只暴露了init()方法，供外部调用。没在return里面的方法外部无法访问。

第四步

在jsp页面引入自定义模块

require(['/resources/js/test/index.js?v=v2'],function(obj){
obj.init();

});

注意 1 根据页面加载需要，把引入方法写在页面开头，还是末尾，2避免浏览器缓存js文件，最好在改过js模块之后，修改其对应的版本号。

第五步

引入这两个js

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

<script src="/resources/js/common/config.js?v=3"></script>

千万不能忽略最后这一步。以上就是简单应用的步骤。另外还有一个优化工具r.js，可以一次性加载引入的多个js模块，减少HTTP请求数。还有require.js提供了一些插件。有空再研究。

//*****************************************

接着上次的写，关于require.js提供了一些插件，

第一个   image.js

加载图片文件 

下载插件，引入到项目 ，在paths中配置  'image':'common/image'   一样的，注意路径。define(['jquery','bootstrap','image!/resources/images/257.jpg'],function($,bootstrap,image1){    ，插件写法，paths下的名称加感叹号，后面跟图片路径，image1是作为参数引入，调试可以看出image1参数是一个DOM对象，可以设置他的各种属性，image1.height=228;  image1.id='img2';   。但是个人觉得这个没得啥子用处。

第二个   domReady  

个人觉得也没好大用处，因为jsp加载顺便本来就是根据标签从上到下加载的，如果把jsp引入写在最后面，就解决了这个问题。不知道是不是这样。还请大神指正。

本文参考 http://www.ruanyifeng.com/blog/2012/11/require_js.html