博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
转:requirejs2.0新特性介绍
阅读量:6463 次
发布时间:2019-06-23

本文共 2893 字,大约阅读时间需要 9 分钟。

就在前天晚上RequireJS发布了一个大版本,直接从version升级到了。随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下:

 

1,延迟模块的执行。

这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病的模块是立即执行的。现在也可以等到require的时候才执行

 

2,config增加了shim,map,module,enforceDefine。

shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的插件。其实在1.0版本中就曾经有人开发过和插件来解决此类问题。考虑到很多开发者有此类需求(比如某些JS模块是较早时候其他人开发的,非AMD方式)此次2.0版本直接将其内置其中。 ~~~shim加载非amd方式定义的插件

下面是一个使用jQuery插件形式配置的参数。我们知道jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使 用define定义的模块。而jQuery插件都依赖于jQuery,即在require插件时得保证jQuery先下载下来。可以如下配置

1
2
3
4
5
6
require.config({
    
shim: {
        
'jquery-slide'
: [
'jquery'
]
    
}
});
require([
'jquery-slide'
]);

这时会保证先下载jquery.js,然后再下载jquery-slide.js。

 

map参数用来解决同一个模块的不同版本问题,这一灵感来自于Dojo的packageMap。有这样的场景: 开发初期使用了的jquery-1.6.4,后期升级到了1.7.2。但担心有些依赖jquery-1.6.4的代码升级到1.7.2后有问题。因此保守 的让这部分代码继续使用1.6.4版本。这时map参数将派上用场。

假如A,B模块中使用了jquery-1.6.4.js,C,D模块中使用了jquery-1.7.2.js。如下

1
2
3
4
5
6
7
8
9
10
11
12
requirejs.config({
    
map: {
        
'A'
: {
            
'jquery'
:
'jquery-1.6.4'
        
},
        
'B'
: {
            
'jquery'
:
'jquery-1.7.2'
        
}
    
}
});
require([
'A'
]);
// download jquery-1.6.4.js
require([
'B'
]);
// download jquery-1.7.2.js

假如A,B都依赖jquery模块,这时require(['A'])将会下载jquery-1.6.4.js,require(['B'])会下载jquery-1.7.2.js。 模块“A”如果写成“*”则表示除了B模块使用jquery-1.7.2之外其它模块都使用jquery-1.6.4。map参数解决了模块的各个版本问 题,很好的向下兼容了老代码。

 

config参数用来给指定的模块传递一些有用的数据。如下

1
2
3
4
5
6
7
require.config({
    
config: {
        
'A'
: {
            
info: {name:
'jack'
}
        
}
    
}
});

使用A的模块中可以通过module.config().info获取到该数据信息。如

1
2
3
4
//A.js
define([
'module'
],
function
(module) {
    
var
info = module.config().info;
    
console.log(info);
});

 

enforceDefine用来强制模块使用define定义,默认为false。如underscore不再 支持AMD后,其代码移除了define。此时如果仍然使用requirejs来载入它,它就是普通的js文件了。此时如果enforceDefine设 为true,虽然underscore.js能下载但requirejs会报错。如

1
2
3
4
5
6
require.config({
    
enforceDefine:
true
});
require([
'underscore'
],
function
(_){
    
console.log(_)
})

 错误信息

 

4,require函数增加了第三个参数errbacks。

很明显该函数指模块文件没有载入成功时的回调。这个也是应一些开发者得要求而增加,其中还包括另一个著名AMD的实现的作者。

1
2
3
4
5
require([
'b'
],
function
(){
    
console.log(
'success'
);
},
function
(err){
    
console.log(err)
});

 err会给出一些出错提示信息。

 

5,更强大的paths参数。

requirejs 1.x版本中已经有paths参数,用来映射模块别名。requirejs2.0更加强大,可以配置为一个数组,顺序映射。当前面的路径没有成功载入时可接着使用后面的路径。如下

1
2
3
4
5
6
7
8
9
10
11
12
requirejs.config({
    
enforceDefine:
true
,
    
paths: {
        
jquery: [
            
''
,
            
'lib/jquery'
        
]
    
}
});
 
require([
'jquery'
],
function
($) {
});

当google cdn上的jquery.min.js没有获取时(假如google宕机),可以使用本地的lib/jquery.js。

 

6,在模块载入失败回调中可以使用undef函数移除模块的注册。

这个灵感来自,RequireJS取名undef。如下

1
2
3
4
5
6
7
8
require([
'jquery'
],
function
($) {
    
//Do something with $ here
},
function
(err) {
    
var
failedId = err.requireModules && err.requireModules[0];
    
if
(failedId ===
'jquery'
) {
        
requirejs.undef(failedId);
    
}
});

 

7,删除了jQuery domready相关代码。

这次没人再诟病RequireJS和jQuery耦合的太紧密。

 

8,删除了priority,packagePaths,catchError.define。

这几个参数已经有相应的替代品。

 

最后需要注意的是,虽然功能增加了不少。但代码量却减少了近60行。主要是去掉了jQuery ready相关代码。另外newContext函数依然有1000多行。

转载地址:http://nkhzo.baihongyu.com/

你可能感兴趣的文章
小知识,用myeclipes找jar
查看>>
数据库----索引的概念及创建
查看>>
linux下的chm阅读器?
查看>>
[LintCode] Longest Substring Without Repeating Characters
查看>>
in-list expansion
查看>>
设计原则(四):接口隔离原则
查看>>
CSS3常见问题:100vh在移动浏览器中不是固定的,恒定的
查看>>
基于react的滑动图片验证码组件
查看>>
用户认证系统
查看>>
iOS快速清除全部的消息推送
查看>>
ecshop二次开发攻略
查看>>
【算法学习笔记】贪心算法
查看>>
java单例模式深度解析
查看>>
什么是堆、栈?
查看>>
记录一次axios的封装
查看>>
【学习笔记】阿里云Centos7.4下配置Nginx
查看>>
VuePress手把手一小時快速踩坑
查看>>
dnsmasq安装使用和体验
查看>>
学习constructor和instanceof的区别
查看>>
用docker容器来制作nginx镜像
查看>>