01.25.11
Adding a Module to YUI3 using YUI.add
I have been using YUI 2 and now YUI 3 for the last year or so. I’m not a major javascript developer by any means but I started with Douglas Crockfords excellent book and series and javascript and YUI have finally started to make sense and I’m begining to put together a few bits and pieces for an internal app we have. I started using YUI 3 recently as there is no reason not to since it works almost seemlessly with YUI 2 with only a little moving around. However I was never quite sure how to put it all together. The standard YUI template looks a bit funny at the begining.
YUI().use(''yui2-tabview', 'yui2-element', 'yui2-connection', function(Y) {
//Do all sorts of cool things here.
});
You see this pattern all over the place, and infact it is how you use YUI3.
After watching some of the excellent videos at YUI Theatre, I figured out that it was really easy to use the YUI.add method to add my own module, but all the code I could find was one slide in the presentation which sort of described how to do it, so I thought it would be useful to do a little how to here to help people out.
Basic Module
Adding a module to YUI is super easy, so easy infact that you will never write YUI code again that isnt part of a module. I guess thats the point.
Instead of just writing functions or objects in your .js file, do this.
YUI.add('mycoolmodule-core', function(Y){
var privatevariable = 'Private Value';
var privatefunction = function(){ //dos something };
Y.namespace('mycoolmodule');
Y.mycoolmodule.core = {
//declare object with public functions and variables.
}
}, '0.1.1' //Version String is Third parameter to add function
//,RequirementsObject //if you wish fourth param can be a Config Object, see API reference for details.
);
Note we do not execute YUI as in the use pattern.
In the above code, the object assigned to Y.mycoolmodule.core is our public module. The public code you would have had in your .js file is in this object, and available to your other code . In order to use it you just need to include the .js file in your page as expected, and call use.
YUI().use(''yui2-tabview', 'yui2-element', 'yui2-connection','mycoolmodule-core', function(Y) {
//Do all sorts of cool things here with my own module.
});
Thats it! It works, and you have all the sandboxing that YUI provides for your code. How brilliant is that?
How do I reference Stuff
One of the things I found confusing initially was how to reference stuff within this module structure, so I’ll show you what I did (if someone wants to correct me to make this better please do, I find the whole this, that, these, those a bit confusing).
YAHOO!
Most people are still using YUI 2 so a reference to the YAHOO object is essential, the way to do this is to declare YAHOO as a private variable in your module, which makes it available to all your module functions.
YUI.add('mycoolmodule-core', function(Y){
var YAHOO = Y.YUI2;
var privatefunction = function(){ //dos something };
Y.namespace('mycoolmodule');
Y.mycoolmodule.core = {
//etc
Your Module
Stuff within your module, such as dialogs, functions, objects , array etc, can be referenced in a number of ways, I suppose you can use ‘this’, but I find this confusing. In my case it works well to refer to it by full namespaces
YUI.add('mycoolmodule-core', function(Y){
var YAHOO = Y.YUI2;
var privatefunction = function(){ //dos something };
Y.namespace('mycoolmodule');
Y.mycoolmodule.core = {
PublicVar : 'A Value',
PublicObj : {a:'A', b:'B'},
afunction : function(){
alert(Y.mycoolmodule.core.PublicObj.a);
}
}
//etc
I hope this helps out with someone needing to get a YUI module working by using YUI.add
