Require.JS 2.0
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0。随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下:
1,延迟模块的执行。
这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。
2,config增加了shim,map,module,enforceDefine。
shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者有此类需求(比如某些JS模块是较早时候其他人开发的,非AMD方式)此次2.0版本直接将其内置其中。
下面是一个使用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 |
这时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的模块中可以通过A.config().info获取到该数据信息。如
1
2
3
4
|
require([ 'A' ], function (A) { var info = a.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的实现curl的作者John Hann。
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函数移除模块的注册。
这个灵感来自dojo AMD loader,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多行。
Require.JS 2.0的更多相关文章
- EpiiAdmin 开源的php交互性管理后台框架, 让复杂的交互变得更简单!Phper快速搭建交互性平台的开发框架,基于Thinkphp5.1+Adminlte3.0+Require.js。
EpiiAdmin EpiiAdmin php开源交互性管理后台框架,基于Thinkphp5.1+Adminlte3.0+Require.js, 让复杂的交互变得更简单!Phper快速搭建交互性平台的 ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
- require.js基本认识
基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...
- Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告
1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...
- ASP.NET MVC应用require.js实践
这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41d6ad.html Require.js是一个支持j ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- 在 Ubuntu 14.04/15.04 上配置 Node JS v4.0.0
大家好,Node.JS 4.0 发布了,这个流行的服务器端 JS 平台合并了 Node.js 和 io.js 的代码,4.0 版就是这两个项目结合的产物——现在合并为一个代码库.这次最主要的变化是 N ...
- require.js入门指南(三)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
随机推荐
- android 更新实现自己主动
其主要原理是: 在应用程序启动.取server在版本 , 以下这个是获取当前应用的版本号信息 private void getCurVersion() { try { PackageInfo pInf ...
- Spring Framework 下载链接_现在有空
下载链接:http://repo.spring.io/libs-release-local/org/springframework/spring/ 点击打开链接 包括Spring的各个版本号: 3.2 ...
- Visual Studio 2015使用EF6的ModelFirst模式添加实体数据模型缺少tt文件问题
在看实体框架 (EF) 入门的时候,当按照样例做到ModelFirst的时候出问题了 这是使用vs2015新建的实体数据模型 这是官网样例 对比样例截图,会发现里面缺少.tt的文件.最重要的是最终代码 ...
- SQL Server 日期相关
原文:SQL Server 日期相关 原帖出处:http://blog.csdn.net/dba_huangzj/article/details/7657979 对于开发人员来说,日期处理或许简单,或 ...
- java 产生的固体物的基础上 增删改的SQL声明
经过多次修改.最后版本. package com.power.sql; import java.lang.reflect.Field; import java.lang.reflect.Modifie ...
- Oracle cloud control 12c 的启动与关闭
Oracle cloud control 12c整个安装比較复杂,光是安装路径的选择,登录password,端口号等众多个配置不免让人眼花缭乱,目不暇接.本文描写叙述的是安装完成后怎样获取安装时设定的 ...
- UIViewAdditions(一个非常方便的工具类用它)
我们在project在,改变或多或少控件的坐标-宽度-高度,然后,经常看到你的self.view.frame.origin.x,self.view.frame.size.width.........相 ...
- Log4j 2.0在具体解释发展先进的使用—SocketAppender远程输出(五岁以下儿童)
Log4j2的Appenders充分考虑输出日志事件.包装和过滤可以被转发,它包含的主要输出到本地文件.输出到远程主机, 文件包.注射.而且,根据该日志文件的时间点.自己主动文件大小的储存条件. 例如 ...
- 如何使用iOS 8 指纹识别,代码、示例
像想象,iOS 8指纹是非常容易使用的.只是需要能够获得一个接口,弹出屏幕模式框,随着app store在相同的. 直接上的条形码.以下代码是从复制Apple官方文件. 加入LocalAuthenti ...
- 探寻宝藏(双向DP)
题目描述 传说HMH大沙漠中有一个M*N迷宫,里面藏有许多宝物.某天,Dr.Kong找到了迷宫的地图,他发现迷宫内处处有宝物,最珍贵的宝物就藏在右下角,迷宫的进出口在左上角.当然,迷宫中的通路不是平坦 ...