当前前端模块化横行,自然诞生了很多优秀的模块加载器.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

   
    
   
 
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路径后,动态生成