require.js遵循的是AMD规范
一:require作用
<script src="require.js" async="true" defer data-main="js/main.js"></script>实现js文件的异步加载,避免网页失去响应;理模块之间的依赖性,便于代码的编写和维护
#async属性表明这个文件需要异步加载
#defer 兼容IE 异步加载
#data-main属性的作用是,指定网页程序的主模块(入口文件);
文件会被第一个require加载。由于require.js默认的文件后缀名是js 可以把main.js简写成main
require()函数接受俩个参数。第一个参数是一个数组,表示所依赖的模块
第二个参数是一个回掉函数,当前面指定的模块都加载成功后它将被调用。加载的模块会以参数形式传入该函数,从而在回掉函数内部就可以使用这些模块,
require(["jquery"],function($){
})
require()是异步加载每一个模块,浏览器不回失去响应,它指定的回掉函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题
require.config({ //配置文件
baseUrl:改变基路径
paths:{
"jquery":"jquery-1.8.3.min"
}
})
require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。
config配置
参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
2.定义模块用define(["jquery"],function(){
var add=function(){
$("body").css('background','red');
}
return {
add:add;
}
})
require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,
就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中
模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性
主模块依赖于其他模块,这时就要用AMD规范定义的require()函数
AMD规范要求,模块必须通过define()函数来定义
网友评论