使用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",
    }
}

只研朱墨作春山
原文地址:https://www.cnblogs.com/guolintao/p/8029295.html