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;
	}
});

This entry was posted on Monday, December 29th, 2008 at 8:29 am and is filed under Your Questions. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.