Requirejs常用配置和应用

requirejs、require方法冲突

如果加载了多个requirejs脚本,每个requirejs会判断是否浏览器已经实现了require和define方法。如果浏览器已经自带require和define方法,或者之前已经有一个requirejs脚本执行,那么这个requirejs就会立刻停止执行。所以,即使页面上加载了多次requirejs脚本也不会有什么问题。

配置Context

我把context叫做一个命名空间,因为每一个context都有一个名字,这样同名而功能不同的模块就可以放在不同的context中以防冲突。

如果开发人员没有配置context,那么,requirejs还会生成一个默认的context,这个默认的context配置大致如下:

requirejs.config({

context: "_",  // default context name

baseUrl: "./",

waitSeconds:7, // how long canloading last

paths: {},

bundles: {},

pkgs: {},

shim: {},

config: {}

});

注意:在不指定context名称的情况下,任何配置和调用都是针对默认context的修改和调用。

空间名称 – context

如果requirejs初始化时自定义配置context,那么默认创建的context的name 就是”_”。如果需要添加新的context,只需指定一个新的contextName即可,比如下面这个调用就会创建一个新的context:

requirejs({context:”new content name”});

同名的context只会有一个,配置同名的context等于修改这个context的属性。

加载超时 – waitSeconds

每个context都配置了一个加载超时的时间,某个模块如果没有初始化,加载的时间又超过了这个时间,就会被认为加载失败。

加载超时是针对整个context下的所有模块而言的,而不是单指某个模块,也就是说这个默认的7秒是指所有模块应该在7秒之内全部加载完成。7秒之后,如果有没有被加载的模块,将抛出error指示哪些模块没有加载。(requirejs每隔50毫秒做一次判断)。

基准URL – baseUrl

每个context的基准URL默认值是”./”。

第一个context的基准URL

如果开发人员没有指定context名称,那么这个第一个context就是requirejs默认生成的context,否则就是开发人员自己定义的context。在不指定基准URL的前提下,第一个context的基准URL设定比较特殊,除了标准的设定方法(参考后面的基准URL标准设定方法),还可以使用以下两种特殊方式设置:

第一种:通过requirejs或require对象配置

在确认requirejs脚本之前没有其它requirejs执行过的前提下:

requirejs={baseUrl: './'}

require={baseUrl: './'}

注意:通过这种方式设置基准URL,data-main指定的脚本文件位置也会变成相对于基准URL的路径,因为data-main指定的脚本本身只是依赖的关系之一。而且,data-main指定的脚本也属于第一个context。

比如下面这种情况:

requirejs={baseUrl: 'scripts/lib'}

脚本模块app.js的最终路径变成了"scripts/lib/scripts/app.js",不是原来的"scripts/app.js",而且它的依赖名称也会变为scripts/lib/scripts/app(requirejs默认会去掉脚本路径的最后一个“.js”,除非data-main的值以“/”开头,或包含“:”,或包含“?”)

第二种:根据script元素的data-main属性指定的脚本路径计算

如果没有设定baseUrl,requirejs会根据script元素data-main属性指定的JavaScript文件路径计算出一个基准URL。

比如data-main="scripts/app.js",那么baseUrl就是"scripts/":

基准URL标准设定方法

除了第一个context可以使用上面的方法,其它自定义的context配置baseUrl就只能使用下面这两种方法。但这两种方法同样也可以用来修改第一个context的属性,在不指定context名称的情况下,其实就是修改第一个context

通过requirejs或require方法(这两个本身就是同一个方法)设置

以下两个等于把默认命名空间的基准URL设置成了scripts/lib:

requirejs({baseUrl:'scripts/lib'});

require({baseUrl:'scripts/lib'});

通过requirejs.config方法

requirejs.config({baseUrl:'scripts/lib'});

require.config({baseUrl:'scripts/lib'});

其实config方法调用的就是requirejs方法,所以它们是一样的。

模块依赖 – deps

模块依赖是指个模块之间的相互依赖关系,脚本运行时,只有当依赖的模块全部加载完成之后,当前脚本才会执行,这就是依赖关系的作用。

依赖关系使用数组配置,数组元素为字符串(即模块的名称),一般是相对于baseUrl的路径,只不过没有文件后缀。而且,为了比较方便的获取模块入口,模块一般会通过define方法定义。因为,通过define定义的模块,可以被依赖数组后面的回调函数直接获取并使用。

以jQuery为例,在jQuery脚本的末尾一般有下面两行代码:

if(typeof define === "function"&& define.amd && define.amd.jQuery) {

define("jquery", [], function () { return jQuery; } );

}

再以underscore为例,在脚本末尾有下面几行代码:

if (typeof define === 'function' && define.amd) {

define('underscore', [],function() {

return _;

});

}

模块和模块位置

使用require配置依赖模块的时候,只是声明了模块的名称,却不知道模块的具体位置。在没有特殊声明的情况下,requirejs认为模块名和文件名相同,因此,只要两者一致,requirejs就可以正确找到脚本文件。但如果不同,就需要通过path配置:

requirejs.config({

baseUrl:"scripts/lib",

paths: {

jquery:'jquery-1.7.2'

}

});

这样,requirejs就知道jquery模块位于scripts/lib/jquery-1.7.2.js文件中。

第一个context的依赖关系

requirejs={deps: ['jquery']}

其它context的依赖关系

与基准URL的方式一样,既可以通过requirejs方法,也可通过requirejs.config方法配置。

模块束-bundles

如果一个JS文件中有多个模块,就可以使用模块束的方式声明:

requirejs.config({

baseUrl:"scripts/lib",

bundles: {

jsUtil:['MathUtil', 'DateUtil']

}

});

上面这个例子就是说在scripts/lib/jsUtils.js文件中有MathUtil和DateUtil这两个子模块。

JS包– packages

如果一个文件夹中有多个JS文件,使用path的方式写全就需要很多行代码,这个时候如果使用包的方式声明就可以省去很多麻烦:

requirejs.config({

baseUrl:"scripts/lib",

pkgs: [{name:'jqueryui',location: 'jqueryui/',main: 'core'}]

});

这样定义之后,凡是在scripts/lib/jqueryui/目录下的模块就可以通过这种方式正确找到:

require(['jqueryui/button', 'jqueryui/dialog']);

上面这个例子就是获取scripts/lib/jqueryui/button.js和scripts/lib/jqueryui/dialog.js的例子。另外,因为jqueryui是一个目录,并不对应一个JS文件,所以又有一个main属性,这个属性一般对应这个JS包中的主程序文件。上面的例子中,jqueryui的主程序就在scripts/lib/jqueryui/core.js中。

楔子 – shim

并不是所有的JS模块都会像jquery和underscore那样调用define方法定义自己,这样requirejs就不知道你这个模块的入口在哪,该通过哪个对象来调用这个模块,特别是那些早版本的JS模块,因为那是还没有define和require的概念。

requirejs.config({

baseUrl:"scripts/lib",

shim: {jquery: {deps:[],exportsFn: func, exports:'jQuery',init:func}}

});

虽然模块没有使用define方法定义自己,但开发人员应该是知道如何获取文件中的模块的,所以,requirejs提供了两种方式让开发人员把模块对象返回给requirejs管理:

在exportsFn或init方法中设置,然后作为返回值;

使用exports设置,比如”a.b.c”,那requirejs就知道通过window.a.b.c可以获取。

映射 – Map

先来看问题:一些第三方JS插件的依赖关系是事先设定好的,不太好修改依赖模块的名称,而如果某个模块有多个版本或有其他模块和它同名,则使用上面的配置都无法解决问题。比如path只是解决模块名称到路径的问题,而这个面对的是切换模块名称的问题。于是requirejs提出了映射的概念,根据当前脚本的名称动态修改所依赖模块的ID,是它指向正确的模块。

假如在你的硬盘下有以下几个模块:

foo1.0.js

foo1.2.js

some/newmodule.js

some/oldmodule.js

在newmodule.js和oldmodule.js中都有require(‘foo’)调用,要解决冲突只需要这样配置即可:

requirejs.config({

map: {

'some/newmodule':{

'foo': 'foo1.2'

},

'some/oldmodule':{

'foo':'foo1.0'

}

}

});

主程序入口data-main

不管页面上有多少个script元素有data-main属性,requirejs只认最后一个script元素的data-main属性,忽略其他script元素的data-main属性。

Requirejs获取data-main属性之后,并没有立即执行data-main指定的脚本文件(因为这个脚本文件可能还依赖了其他模块),而是把它作为了一个被依赖的模块,加入到第一个context的依赖数组中。比如下面这种情况就是把scripts/app这个模块加到一个名叫linus的context中:

requirejs={

context: 'linus',

baseUrl:"./",

skipDataMain: false

};

全局配置

忽略script元素的data-main

在浏览器中,有一个选项叫skipDataMain,可以让requirejs忽略script元素的data-main。在默认情况下,requirejs成功加载之后,会立马查找页面上所有script元素,并且把最后一个有data-main属性的script元素的data-main最为主程序入口。

requirejs={skipDataMain:true}

模块定义 – define(name, deps, callback)

你会发现define方法没有指定context名称,这是因为define方法只调用于被依赖的模块中,而require方法已经为依赖的模块指定了context名称,所以,这个模块被哪个context需要,它就属于那一个context。

参数name是模块的名称,deps是该模块所依赖的其他模块的名称,callback一般返回该模块的实际可被使用对象。比如jQuery的模块定义回调函数返回的就是jQuery对象。

Error

加载Error

这种error就是浏览器自带的Error对象,只不过requirejs给它附加了其他属性。

message的格式为:msg + '\nhttp://requirejs.org/docs/errors.html#' + id。

error.requireType就是就是message后面的id;

error.requireModules一般指需要加载却没加载成功的模块名称;

error.originalError是指发生其他错误导致模块加载失败的原始error对象。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容