require.js为了解决什么问题？AMD是什么
AMD就是按需加载模块
传统的页面中js的引用需要注意各个js之间的依赖关系，引入必须要有顺序。
require.js就相当于自己定义的插件库，当你引入一个插件的时候会自动的按顺序引入你要引入的库所
依赖的其他js再引入你需要的插件
require.js的使用
require(['util','ueditor'],function(u){u.content('哈哈哈')})
require.js会自动加载util模块和ueditor模块，
在加载这两个模块的同时也会按照书序引入所依赖的（打比方：如果依赖jquery.js和bootstrap.js也会按顺序自动引入它们），然后执行对应的function（u.editor）{}函数
require.js的库在哪里？怎么定义库？库里面的文件又怎么和前端资源建立关系？
一般都在项目中的lib文件夹下
在index.html页面载入一个require配置库页面（如main.js）
<meta charset = "UTF-8">
<script data-main="../resource/main.js" src="../resource/require.js"></script>
</meta>
在main.js中配置需要用到的js库，main.js中配置后可以找到项目中对应css,js的关系。
如何设置require.js的配置项main.js？
如果是一个非标准化的自定义模块如何在require.js中使用？
比如hd.js是一个非标准化定义的模块
funciton modal(){
alert ('怎么在require.js中使用')
}
funciton success(){
alert ('成功了哟！')
}
require.config({
baseUrl:'../resource/app',//默认路劲
paths:{//需要引入的库的路径
'jquery':'../lib/jquery.min',
'angular':'../lib/angular.min',
'bootstrap':'../lib/bootstrap.min'，
'css':'../lib/css.min'//依赖于css库
},
shim:{
'bootstrap':{//定义每一个模块的依赖项
'deps':['jquery','css!../css/bootstrap.min.css']
},
'hd':{//定义非标准化的模块
init:function(){
return {
modal:modal,
success:success
}
}
}
}
})
配置项main.js是异步执行的，如果在页面中直接执行require(['util','ueditor'],function(u){u.content('哈哈哈')})会报错，
因为配置项在配置的同时也在调用回调函数function(u){u.content('哈哈哈')}) 解决办法：将回调函数放入函数中调用，如<script>
function test(){
require(['util','ueditor'],function(u){u.content('哈哈哈')})
}
</script>
或者是将main.js在require.js后面引用
<meta charset = "UTF-8">
<script src="../resource/require.js"></script>
<script src="../resource/main.js"></script>
</meta>
<script>
require(['util','ueditor'],function(u){u.content('哈哈哈')})
</script>
require.js中如何自定义模块？例如自定义一个标准化的utils.js
>>>utils.js
define(['jquery'],function($){
return {
change:function(){
$(body).css({backgroud:'red'})
}
show:function(){
alert('hello!')
},
message:function(){
alert('hello.css')
}
}
})
***=========================================================================================***
或者使用
define([],function(){
return {
change:function(){
require(['jquery',function(){//只有change方法需要引入jquery
$(body).css({backgroud:'red'})
}])
}
show:function(){
alert('hello!')
},
message:function(){
alert('hello.css')
}
}
})
