读不顺中文文档,对应中文文档,自行翻译的……假如有题目/毛病,迎接指导;
修正设置选项:
要领一、
<script src='require.js'></script>
<script>
require.config({
//在顶级HTML页面或顶级剧本文件(没有定义define()模块的剧本文件)中设置;
})
</script>
要领二、
在主模块中设置;
瑕玷:主模块异步加载,多进口的话,会随机报错;
要领三、
<script>
var require = {
//在挪用require.js之前,将设置定义为全局变量;
//设置在挪用require.js时自动运用;
var require = {
deps: ["some/module1", "my/module2", "a.js", "b.js"],
callback: function(module1, module2) {
}
};
}
</script>
<script src='require.js'></script>
支撑的设置选项:
baseUrl:模块查找的根途径;
//目标:没必要在反复雷同的上级途径,只需斟酌援用基途径下的哪一个剧本
//注重:只要以相对途径设置baseUrl,是相对于援用requireJS的HTML位置,而不是相对于main.js
require.config({
baseUrl: "/another/path"
});
以下途径文件不会基于baseUrl查找:*.js /** http://...
默许值:不设置该属性的话,默许是加载require.js的HTML地点的位置;
paths:module ID & 途径映照
//目标:不再运用途径挪用剧本,而仅仅经由过程module ID挪用;
//针对于不在baseUrl/在baseUrl子孙文件下的模块举行映照;
//途径映照末了一节应该是一个文件夹,而不是剧本文件;
//映照是基于baseUrl的,除非以‘/’或‘http://’最先;
require.config({
baseUrl: "/another/path",
paths: {
"some": "some/v1.0",
"others":["http://files...","location/files"]
}
});
/*属性值为键/值对: 键示意module ID 值为途径/途径列表
*(途径列表为数组,当第一项猎取不到的时刻,加载第二项...)
*途径列表中,文件地点指向的是统一文件,只是做备选;
*/
/*
*假如paths属性的值中的途径剧本文件有自著名,该值的键名的值为undefined,而不是该剧本文件;
*只能经由过程自著名来援用该途径的剧本文件;
*/
注重:一些定名的第三方库(如jquery),不能给它更名,键名不能设置jquery之外的名字,不然找不到jquery库;
map:挪用模块文件 & 模块映照——适用于差别模块挪用差别版本的剧本;
//目标:不再运用途径挪用剧本,而仅仅经由过程module ID挪用;
//只运用于真正的AMD模块---挪用define()定义并匿名的模块
//map属性只能用纯module IDs作为键名------纯module IDs?----------------以paths键名最先的途径?
//构建优化不会损坏map设置,即构建后依然可用;
requirejs.config({
map: {
'*': {
'foo': 'foo1.2'
},
'some/newmodule': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
//埋怨下,map我明白的官文是挪用差别的模板,但对jquery不可……
假如要援用差别版本的jquery,请看这里
bundles:设置一个剧本文件中的多个模块——未实践
//目标:将一个剧本中的多个模块暴露出来,使其能够直接被require();
//引荐一个剧本文件一个模块;
//一个剧本文件一个模块,模块会自动绑定到module ID上;
*一个剧本多个模块,模块须要手动的将模块名绑定到module ID上;
requirejs.config({
bundles: {
'primary': ['main', 'util', 'text', 'text!template.html'],
'secondary': ['text!secondary.html']
}
});
//Note that the keys and values are module IDs, not path segments.
shim:兼容不能用define()来声明依靠的传统“浏览器全局”剧本
/*
*按我明白:
*不兼容define(),不相符AMD范例,没有像define()一样,终究return 对象/函数;
*所以须要用shim将个中的某个全局变量exports给requirejs,才被define()和require()援用;
*
*假如须要暴露多个全局变量,就不能用exports,而用init函数
*init:function(){
return{
}
*} */ //仅仅起到声明依靠关联的作用,但不会加载依靠-----能够明白为shim只说不做; //假如要加载shim指定的依靠,仍须要require()/define()挪用; //请求RequireJS2.1.0以上版本 //RequireJS有wrapShim build 属机能自动包裹shimmed code在define()中晋级为AMD,但不保证能平常实行; requirejs.config({ /* *shim只能运用到非AMD范例的剧本文件上; *运用到相符AMD范例的剧本文件上不起作用; */ shim: { /* *shim属性值为键/值对:键值为module ID; *假如backbone、underscore、foo在baseUrl文件中,则不须要paths设置; *不然,运用paths设置 值(文件途径) 到 键名 */ 'backbone': { /* *deps声明依靠关联; *deps的值只能黑白AMD范例的剧本或许“没有依靠关联且竖立全局变量后挪用define()的AMD库”; *假如shim用AMD模块作为依靠的话,会有毛病发作--------由于shim对相符AMD范例的剧本不起作用; */ deps: ['underscore', 'jquery'], //将backbone传统剧本的Backbone函数暴露出来,类似于define()中的return; exports: 'Backbone' }, 'underscore': { exports: '_' }, 'foo': { deps: ['bar'], exports: 'Foo', init: function (bar) { //初始化传统剧本; return this.Foo.noConflict(); } }, //像jQuery插件不须要暴露任何全局变量,则只需声明依靠即可; //若要推断剧本是不是被加载,须要声明exports 'jquery.scroll':['jquery'] } });
那末,怎样晓得暴漏什么属性、对象或许要领呢?
哈哈,我的做法是,看源码末了一行——–平常看return什么就根据须要暴漏什么;config:设置application级别的设置信息;——-未实践
//config的属性值为键/值对; requirejs.config({ config: { 'bar': { size: 'large' }, 'baz': { color: 'blue' } } }); define(function () { //在模块中作为module.config()的属性来读取设置信息; var size = module.config().size; }); //将设置信息传递给一个包package requirejs.config({ //Pass an API key for use in the pixie package's //main module. config: { 'pixie/index': { apiKey: 'XJKDLNS' } }, //Set up config for the "pixie" package, whose main //module is the index.js file in the pixie folder. packages: [ { name: 'pixie', main: 'index' } ] });
nodeIdCompat:node module ID兼容——-未实践
//Node中以为模块ID example.js和example是雷同的------经由过程设置true以为是差别的; //而在RequireJS中,example.js和example是差别的 require.config({ nodeIdCompat:true //假如经由过程npm加载模块的话,须要设置为true-----只对‘.js’后缀起作用; })
waitSeconds:设置超时时候;——-未实践
//目标:设置加载剧本超时时候,超时后摒弃加载; //默许7s; //设置0制止超时; require.config({ waitSeconds:0 })
deps:在require.js加载之前,定义全局对象require设置依靠环境——-未实践
<script> var require = { deps: ["some/module1", "my/module2", "a.js", "b.js"] //依靠数组; } }; </script> <script src="scripts/require.js"></script>
callback:在deps加载完成后实行的顺序——-未实践
<script> var require = { deps: ["some/module1", "my/module2", "a.js", "b.js"] //依靠数组; callback:function(){ //deps加载完成后实行; } } }; </script> <script src="scripts/require.js"></script>
enforceDefine:严厉define()或shim exports ——-未实践
require.config({ enforceDefine:true //设置为true-----加载的剧本必需是经由过程define()定义或许设置shim有exports值,不然抛出毛病; })
xhtml:建立script元素——-未实践
require.config({ xhtml:true //设置为true-----挪用document.createElementNS()建立script元素; })
urlArgs:当地开辟环境应对强缓存计划;——-未实践
//增加分外的查询字符串到RequireJS猎取资本的URLs上; //布置代码的时刻要确保删除此设置; requirejs.config({ //module ID和URL作为参数; urlArgs: function(id, url) { var args = 'v=1'; if (url.indexOf('view.html') !== -1) { args = 'v=2' } //返回字符串增加到URL的背面; return (url.indexOf('?') === -1 ? '?' : '&') + args; } });
scriptType:设置剧本type属性——-未实践
requirejs.config({ //RequireJS增加的script标签type默许为‘text/javascript’; scriptType: ‘text/javascript;version=1.8’ });
skipDataMain:疏忽 data-main属性;——-未实践
requirejs.config({ //设置为true,跳过data-main属性扫描加载模块; //假如两个加载RequireJS的顺序有嵌套关联,被嵌套的不该该有data-main属性???????没懂 skipDataMain: true });
疑问:求列位大神解答
哪些剧本相符AMD范例; 哪些AMD库call define() after they also create a global (like jQuery or lodash) 怎样用mainConfigFile build option来指定shim config 怎样天生依靠关联表; map属性只能用纯module IDs作为键名------纯module IDs?----------------以paths键名最先的途径? bundles----Note that the keys and values are module IDs--------------values的module IDs是从哪来的,define('module IDs')?????? context:怎样用 package:怎样用 skipDataMain:假如两个加载RequireJS的顺序有嵌套关联,被嵌套的不该该有data-main属性???????没懂