YUI 的模塊信息配置優先級關系梳理

背景

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?配置優先級關系從高到底依次為：

1. YUI(args) 里面的 args， args可以是數組, 數組依次執行 applyConfig(arg[i]);

2. YUI_config

3. 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信息優先級更高。 ?

?