RequireJS入门 -演道网

当前前端模块化横行,自然诞生了很多优秀的模块加载器.RequireJS就是其中之一,前端er自然不得不去学习下.

RequireJS 简介

RequireJS 是一个JavaScript模块加载器。适合在浏览器中使用,但它也可以用在其他脚本环境(Node),使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

RequireJS兼容性很好

IE6+以上都可以,其他浏览器更不在话下.

  • 下载RequireJS(直接去官网下).
  • 项目需求:利用RequireJS往index.html页面加载它需要的js(jquery.js和a.js)
  • 创建一个测试目录

简单介绍下目录结构:

  1. js:存放js文件,/js/lib存放第三方库需要的js文件(如jQuery,RequireJS等),/js/app存放我们应用程序的js文件(a.js).
  2. index.html:你的页面(测试页面)
  3. config_a.js:入口文件(类似webpack里面的入口文件),你可以理解为requireJS在index.html这个页面的配制文件.
  4. require.js:我们下载的requireJS文件

我们传统的加载js方式:

缺点:

  1. 加载JS并解析会导致浏览器对网页的渲染停滞,尤其加载的js很多时候,浏览器失去响应的时间会很长.
  2. 如果js文件之间存在依赖(比如加载Bootstrap),那么你的js文件加载顺序还不能错,这对项目的维护不友好.

RequireJS模块加载方式:

优点:

  1. 对JS文件进行异步加载,避免浏览器渲染的空白期.
  2. RequireJS会自行解决模块之间依赖关系,方便项目的维护.

  • 回到上一步,在你的index.html底部里面,引入RequireJS.
1
2
3
4
5
6
7
8
9
async = 'true' // 表示异步加载
defer // 兼容IE。
data-main // 指定该网页的主模块,这个模块会被RequireJS第一时间加载
  • 编辑index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Document

test RequireJS

  • 编辑config_a.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
require.config( {
baseUrl : 'js' ,
paths : {
'jquery' : 'lib/jquery' ,
'a' : 'app/a'
}
} );
require( ['a'] ,function(A){
A.redBg();
});

注解:

  1. require.js 在加载的时候会检察data-main 属性
  2. RequireJS以一个相对于baseUrl(基目录)的地址来加载所有的代码。baseUrl一般设置到与data-main属性相一致的目录,baseUrl亦可通过requirejs.config手动设置
  3. (推荐指定)如果没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录
  4. RequireJS默认假定所有的依赖资源都是js脚本,因此无需在module ID上再加”.js”后缀,RequireJS在进行module ID到path的解析时会自动补上后缀
  5. path:映射各个模块的加载路径
  6. require()用法
1
2
3
4
5
// require()接受两个参数,第一个是数组,表示我们依赖的模块,第二个
参数是回调函数(解决浏览器失去响应问题),只有等前面的依赖模块加载成
功才会执行回调函数.加载的模块以参数形式传入回调函数.
  • 编辑 a.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
define( ['jquery'] , function($){
return {
redBg : function(){
console.log($);
$('h1').css('background' , 'red');
}
}
} );

注解: AMD规范中的模块定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
define()
//一个单独的js文件为一个模块
//定义模块的几种方法
//定义一个无依赖的模块
define( function(){
//别的操作
} )
define(
// 模式是简单的名值对
{
key : value,
key1 : value1
}
)
// 定义有依赖的模块
define( [] , function(){
return {
}
})
// 第一个参数[]表示依赖关系的参数列表,第二个参数是回调函数,前面的模块加载成功才会执行,这也是解决页面失去响应的方法,回调函数返回一个对象.
  • 打开浏览器查看效果

  • OK
  • RequireJS模块加载器原理:

1.路径匹配原则

require( [‘moduleID1’,’moduleID2’ ] , callback),这些,moduleID与paths里面的路径匹配(baseUrl+path);

2.createElement(‘script’) & appendChild

指知道请求的js路径后,动态生成

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注