文章标题
2016-12-12 10:30
246 查看
一、为什么要用require.js?
原来加载文件需要
首先加载的时候,浏览器会停止页面渲染,加载文件越多,网页失去响应的时间越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序。
二、require.js的加载
使用require.js的第一步,是去官网下载最新版本。下载后把他放在js子目录下面,就可以加载了。
data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件名后缀为js,所以可以把main.js简写成main.
三、主模块的写法
上一节的main.js,我们把它称为主模块,意思是整个网页的入口代码。他有点像c语言的main()函数,所有代码都从这儿开始运行。
下面就来看,怎么写main.js
如果我们的代码不依赖于其他模块,那么可以直接写入js代码。
但这样的话,就没必要使用require.js了。真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的require()函数。
require()函数接受两个参数,第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’,’moduleB’,’moduleC’],即主模块依赖于这三个模块;第二个参数是一个回调函数,当上面指定的模块都加载成功之后,它将被调用,加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有在前面额模块都加载成功之后,才会运行,解决了依赖性的问题。
原来加载文件需要
<script src="1.js"></script>这种写法有很大的缺点:
首先加载的时候,浏览器会停止页面渲染,加载文件越多,网页失去响应的时间越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序。
二、require.js的加载
使用require.js的第一步,是去官网下载最新版本。下载后把他放在js子目录下面,就可以加载了。
<scirpt src="js/require.js"></script>.假定我们自己的代码文件是main.js,也是放在js目录下面,那么,只需要写成下面这样就可以了
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件名后缀为js,所以可以把main.js简写成main.
三、主模块的写法
上一节的main.js,我们把它称为主模块,意思是整个网页的入口代码。他有点像c语言的main()函数,所有代码都从这儿开始运行。
下面就来看,怎么写main.js
如果我们的代码不依赖于其他模块,那么可以直接写入js代码。
//main.js alert("加载成功!");
但这样的话,就没必要使用require.js了。真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的require()函数。
//main.js require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){ //some code here });
require()函数接受两个参数,第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’,’moduleB’,’moduleC’],即主模块依赖于这三个模块;第二个参数是一个回调函数,当上面指定的模块都加载成功之后,它将被调用,加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有在前面额模块都加载成功之后,才会运行,解决了依赖性的问题。