使用requireJS
什么是require?
require是AMD模块化规范的具体实现。
目前,通行的js模块化规范有两种,CommonJS和AMD。
CommonJS和AMD有什么不同呢?
CommonJS主要用于服务端,它的特点是同步加载,在某个模块加载完成后才会加载下一模块,这在服务端没什么问题,读取速度就是硬盘的读写速度,但在浏览器中环境下,加载的模块都存储在服务器上,所以加载时间取决于客户端网速,如果网速不过关可能某个模块需要加载很长时间,那之后的模块则不会加载,这会让浏览器在一段时间内处于假死状态,这显然是不合适的。
因此,适用于浏览器的模块化不能使用同步加载,只能用异步加载。
于是AMD应运而生,AMD(Asynchronous Module Definition)的意思就是异步加载,解释下同步异步。
同步异步是一种被请求者的消息通知机制
- 同步:被请求者处理请求者请求的事,但不会通知请求者处理结果,需要请求者轮询,或者监听被请求者。
- 异步:被请求者处理请求者请求的事,当处理结果时,通知请求者处理结果。
- 阻塞:阻塞当前进程,当前进程不完成,不处理下一个进程。
- 非阻塞:在当前进程处理过程中,不急于得到结果,继续处理下一个进程。
AMD是异步加载,所有依赖加载模块的语句都放在一个回调函数中,当加载完成后执行。
使用requireJS
requireJS是AMD规范的实现,是客户端实现模块化的工具。AMD之与requireJS就像ECMAscript之与javascript,一个是规范,一个是规范的具体实现。
下载requireJS,放在项目js目录下,即可加载,为避免加载时网页失去响应,建议在网页底部加载,或者写成:
<script src="js/require.js" defer async="true" ></script>
async代表要异步加载,避免网页失去响应,ie不支持这个属性,值支持defer。
加载requireJS之后需要加载自己的js文件,一般用一个js文件作为模块化的入口文件,其他引入在入口文件中完成。
<script src="js/require.js" data-main="js/main"></script> // mian.js即为入口文件,因为默认加载js文件可省略js后缀。
data-main 属性为指定加载主模块,上述加载中主模块为main.js,该文件会第一个被加载。
如果在mian中不依赖其他模块可以直接写js程序,如果需要引用其他模块则必须使用requireJS指定的引用方式。
requireJS用require函数加载模块,它接受两个参数,第一个参数为一个数组,指定要加载的模块,第二个参数为一个回调函数,在所有模块加载完成后执行
require(["module"],callback(module){
//do something……
})
如果我们有很多js目录,存放不同功能的js 文件,那我们可以用require.config方法来配置模块的加载行为,在文件顶部进行配置。
require.config={
paths:{
"module1":"module1",
"module2":"module2",
"module1":"module3",
}
}
获取更多资源关注公众号:算了个球