The Difference Between Element.set/get and Element.store/retrieve
Posted today in the MooTools user group:
Hi!
after a lot of mootools programming and docs studies, I still have a
little question:when should I use get/set and when store/retrieve? Or, in other words,
what’s the best use for get/set and what’s the best for store/
retrieve?
Element.get/set are used for element properties (img src, element class, input value, etc) as well as custom values that include special properties (like ‘html’ and ‘text’ as well as ‘styles’ and ‘events’) and default properties for built-in classes (el.set(‘tween’, options)). Element.set/get almost always accepts and returns strings and objects including the built-in instances of classes (which are also objects) – el.get(‘tween’) returns the built-in instance of Fx.Tween.
Examples:
//setting properties of elements
input.set('value', 'foo');
checkbox.set('checked', true);
myDiv.set('html', '<b>bold!</b>');
myImg.set('src', url);
//set can also take an object
myDiv.set({
styles: { width: 100, height: 100}
events: {
click: function(){ alert('you clicked me!'); }
}
});
//using custom setters/getters
element.set('tween', {duration: 500});
element.get('tween').cancel();
Storage is for storing arbitrary values for an element. These values may be any object type – boolean, array, object, function, class, etc. You can store any data and retrieve any data and not worry about memory leaks (if you stored these things as properties of the elements you would risk creating circular references, which are the main causes of such leaks.
Examples:
//storing misc. data
myImg.store('mouseOverImg', alternateSrcUrl);
myGalleryDiv.store('galleryImgs', $$('img.slide'));
//storing pointers to instances of classes
var myValidator = new FormValidator(myForm);
myForm.store('myFormValidator', myValidator);
You can define custom setters and getters for ‘default’ instances of classes or for other logic as you like. The benefit here is that when you call el.get(‘tween’) until that moment the element doesn’t have a default instance of Fx.Tween. It’s only when you use the getter or setter that it is created.
Example from Fx.Tween:
Element.Properties.tween = {
set: function(options){
//get the instance of tween if there is one already
var tween = this.retrieve('tween');
//cancel it's operation if it's running
if (tween) tween.cancel();
//store the new options and return the element
//note that element.set always returns the element
return this.eliminate('tween').store('tween:options', $extend({link: 'cancel'}, options));
},
get: function(options){
//if options were defined with the get instruction, store them
if (options || !this.retrieve('tween')){
//store the options
if (options || !this.retrieve('tween:options')) this.set('tween', options);
//create a new instance with those options
this.store('tween', new Fx.Tween(this, this.retrieve('tween:options')));
}
//return the instance
return this.retrieve('tween');
}
};
Finally, you can implement methods into the Element prototype to reference these default values (element.tween(‘opacity’, 0) and element.fade(‘out’) both call element.get(‘tween’) to execute their logic).
Again, from Fx.Tween:
Element.implement({
tween: function(property, from, to){
//get the instance of tween and start it
this.get('tween').start(arguments);
//return the element
return this;
}
});
Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.