How and where should I store my own YUI3 JavaScript files?
I'm planning to write some JavaScript modules that should be loaded with YUI3. How should I organize my files and folders? Is there a recommended folder structure? If I store my files similar to the "core" or the "gallery" there should be an easy loading - or not?
Do I have to list every single module in the "YUI().use ..." call if I store my scripts in the followin开发者_StackOverflow中文版g way?
de-mylib-www/mymodules/mod1/mod1-base.js
de-mylib-www/mymodules/mod2/mod2-base.js
de-mylib-www/mymodules/mod3/mod3-base.js
de-mylib-www/mymodules/mod3/mod3-class1.js
de-mylib-www/mymodules/mod3/mod3-class2.js
To get the most out of YUI's loader pattern, you do have to play by a few of its rules. Your example looks almost exactly right, as far as directory patterning goes.
Unless you explicitly include your javascript source files in your document, you will need to notify the YUI loader that the modules exist and what dependencies they have. At the moment, there's a bug in the way dependencies are loaded for a module, so you have to declare the dependencies in two places, in your loader configuration, and as a postfix to your YUI.add statements.
You can configure the loader in two ways: you can pass the config as an argument to YUI() before calling use on it, or you can assign the configuration to the YUI_config global variable:
var cfg = {
/* other configs */
modules: {
'mod3-base': { requires: [ 'mod3-class1', 'mod3-class2' ] },
'mod3-class1': { /* */ },
'mod3-class2': { /* */ }
}
}
// You could pass the config in as an argument:
YUI(cfg).use('mod3-class2', function(Y) {
// your code
});
// Or set it as a magic global:
YUI_config = cfg; // will implicitly configure all YUI().use statements
You'll need to configure the loader so it knows where to find your module files.
Generally, the loader expects each module to have its own directory, which contains one or more submodule files and a concatenated "supermodule" file. For example, looking at the "Base" module we see the following pattern:
- base-base.js
- base-build.js
- base-pluginhost.js
- base.js: a concatenated copy of base-base, base-build, and base-pluginhost
Each of those four types has three variants, a "raw" source file, a "-min", and a "-debug". Depending on how you configure your loader, it might go looking for the minified variants.
The correct way to do this is to list the modules your page needs in the YUI.use()
call and list the modules that those modules need as requirements.
Suppose that you wish to use mod3-class2
in your page and that mod3-class2
depends on mod1-base
and mod3-base
. You would want something like this in your main page:
YUI().use('mod3-class2', function (Y) {
/* Your code here */
});
You would then specify mod3-class2
's dependencies in mod3-class2.js
like this:
YUI.add('mod3-class2', function(Y) {
/* Module code here */
}, 'module version', {
requires: ['mod1-base', 'mod3-base']
});
You can also use the YUI Build Tool, which uses config files to generate that wrapper code.
精彩评论