背景
YUI的配置参数较多, 可以在好几个地方配置一个module的相关信息, 如:
//在全局配置, 所以YUI实例共享
YUI_config = {modules: {'w-autcomplete': {requires: ['module1'],path: 'test1.js',}},groups: {modules: {'w-autocomplete': {requires: ['module2'],path: 'test2.js'}}}
}//在某一个YUI实例中配置
YUI({
groups: {fecore: {modules: {'w-autocomplete': {base: 'http://fe.com?f=fecore/test3',type: 'js',requires: ['module3'],}}}
},
modules: {'w-autocomplete': {base: 'http://fe.com?f=fecore/',path: 'w-autocomplete/w-autocomplete.js',type: 'js',}
}
}).use('w-autocomplete', function(Y) {console.log(Y);
}); //在模块文件中申明配置: w-autocomplete.js
M.add('w-autocomplete', function(Y) {...
},
'1.0.0',
{requires: ['module4']
}
);
这三类情况, YUI在加载的时候到底如何来判断, 使用哪一个module的配置信息呢?
配置优先级关系
一个YUI实例config
配置优先级关系从高到底依次为:
-
YUI(args) 里面的 args, args可以是数组, 数组依次执行 applyConfig(arg[i]);
-
YUI_config
-
YUI.GlobalConfig
YUI初始化的时候会将这些参数按如上所述的优先级进行config初始化。 所以当使用YUI(args).use 的方式来使用模块时, args会自动覆盖当前实例Y的modules 配置信息。
当我们需要给所有YUI实例添加配置参数的时候, 可以直接通过配置 YUI_config
或者 YUI.GlobalConfig
来实现。 也可以在YUI或者YUI实例初始化后,进行动态配置,如:
Y.applyConfig({groups: {}, modules: {} });
YUI.applyConfig({groups: {}, modules: {} });
处理同一优先级的配置
对同一优先级的配置使用applyConfig的时候, 由于是Map操作,所以并不能保证config里面的groups & modules的覆盖顺序, 测试了一下for in操作在各个浏览器下的表现, 证明对于key都是字符串的情况,在不同浏览器中执行顺序和书写的顺序有关系。
所以当groups.modules和modules里面都定义了相同module时, 谁定义在后面就以谁的定义为准 。
YUI().add定义的模块信息
YUI().add('w-autocomplete', function(Y) {}, 1.0.0, {requires: ['module1', 'module2'],use: ['module3', 'module4']
}),
在执行add操作时, YUI.Env.mods里面会新增如下对象:
{detail: {requires: ['module1', 'module2']use: ['module3', 'module4']},version: 1.0.0,name: 'w-autocomplate',fn: fn
}
module加载完毕后, 在执行回调之前, 会先检查加载的依赖链中的missing module, missing module包括module定义中的 requires和use。 得到missing列表后,再用Y.use函数进行reload。
var missing = [];
var mods = YUI.Env.mods;
var process = function(names, skip) {var i = 0, a = [], name, len, m, req, use;len = names.length;for (i = 0; i < len; i++) {name = names[i];m = mods[name];req = null;use = null;if (m) {used[name] = true;req = m.details.requires;use = m.details.use;} else {if (!G_ENV._loaded[VERSION][name]) {missing.push(name);} else {used[name] = true; // probably css} } // make sure requirements are attachedif (req && req.length) {process(req);} // make sure we grab the submodule dependencies tooif (use && use.length) {process(use, 1);}}
};
process(modules);
redo = missing.length;
if (redo) {Y._use(missing, function() {if (Y._attach(data)) {Y._notify(callback, response, data)}});
}
so, requires 和 use的定义会影响到loader的加载。而和在前面两种方式配置模块的requires和use 主要区别是, 前两种配置依赖的module会在当前模块加载之前加载, 而后面这种方式会在当前模块加载完成后再进行加载。
但是如果在module里面定义的其他信息,如condition等,loader会忽略不管。
总结
如果每个级别的优先级都配置了mod信息, 会按优先级关系逐级覆盖, module信息以最高优先级的配置为准。
如果同级优先级配置里面 modules 和 groups.modules里面有相同的module配置,取决于for in 遍历的顺序。 测试各浏览器结果会按照定义顺序, 后定义的module信息优先级更高。