Provádění běžných úkolů pomocí MooTools, jQuery a Dojo III

Moje láska k frameworkům JavaScript nezná mezí. Bohužel příliš mnoho vývojářů se drží jednoho rámce, aniž by věnovali čas tomu, aby se naučili ostatní. Čím více frameworků znáte, tím lepším programátorem budete a tím více peněz vyděláte. Dovolte mi ukázat vám, jak provést několik dalších úkolů pomocí tří frameworků JavaScript:MooTools, jQuery a Dojo.

Vypočítat rozměry a polohu prvků

Znalost nejen výšky a šířky kóty, ale také její horní/levé pozice od odsazeného nadřazeného prvku nebo těla dokumentu může být velmi užitečná při pokusu o animaci nebo přesunutí prvku DOM.

MooTools

var dimensions = document.id('myElement').getDimensions();
/* returns:
{ 
	height: 4684,
	width: 1408,
	x: 1408,
	y: 4684
}
*/

jQuery

var myElement = jQuery('#myElement');
var position = myElement.position();
var dimensions = {
	height: myElement.height(),
	width: myElement.width(),
	top: position.top,
	left: position.left
};

Dojo

var dimension = dojo.coords('myElement');
/* returns:
{
	h: 4684,
	l: 0,
	t: 0,
	w: 1408,
	x: 0,
	y: 0
}
*/

Rozšířit objekt

Rozšíření objektu znamená převzetí objektu a sloučení vlastností druhého objektu do něj. To je velmi užitečné při slučování výchozích možností s možnostmi instance.

MooTools

$extend(firstObject,{ anotherProperty:'anothervalue' });
//second arg is added to the first object

jQuery

jQuery.extend(firstObject,{ anotherProperty:'anothervalue' })

Dojo

dojo.mixin(firstObject,{ anotherProperty:'anothervalue' });

Zastavení události

Zastavení události je užitečné, když chcete spustit funkci (obvykle požadavek XHR) po kliknutí na odkaz.

MooTools

$('myElement').addEvent('click',function(e) {
	e.stop();
});

jQuery

$('#myElement').click(function(e){ 
	event.stopPropagation();
	e.preventDefault();
	// (no internal method that does both)
});

Dojo

dojo.connect(dojo.byId('myElement'),'onclick',function(e) {
	dojo.stopEvent(e);
});

Načíst obsah do prvku

Jistě, můžeme vytvořit požadavek XHR ručně pro načtení obsahu do prvku, ale proč to dělat, když to za vás může udělat vaše oblíbená knihovna?

MooTools

document.id('myElement').load('ajax/script.html');

jQuery

jQuery('#myElement').load('ajax/script.html');

Dojo

//as found on Pete Higgins' website:
//http://higginsforpresident.net/2009/12/140-characters-of-awesome/
dojo.extend(dojo.NodeList, {
	grab: function(url){
		dojo.xhr('GET', { url:url })
			.addCallback(this, function(response){
				this.addContent(response, 'only');
			});
		return this;
	}
});
dojo.query('#myElement').grab('header.html');

Získejte a nastavte obsah HTML

Získání a nastavení HTML je častá operace JavaScriptu...ale každá knihovna s tím zachází trochu jinak.

MooTools

//get
var html = document.id('myElement').get('html');
//set
document.id('myElement').set('html','Hello!');

jQuery

//get
var html = jQuery('#myElement').html();
//set
jQuery('#myElement').html('Hello!');

Dojo

//get 
var html = dojo.byId('myElement').innerHTML
//set
dojo.byId('myElement').innerHTML = 'Hello!';

Používejte úložiště prvků

Ukládání dat prvku je důležité, protože vám umožňuje ukládat nastavení v rámci samotného prvku – ideální pro překonání problémů s rozsahem a kontextem.

MooTools

//set
document.id('myElement').store('key','value');
//get
var value = document.id('myElement').retrieve('key');

jQuery

//set
jQuery('#myElement').data('key','value');
//get
var value = jQuery('#myElement').data('key');

Dojo

//set
dojo.attr('myElement','data-key','value');
//get
dojo.attr('myElement','data-key');

Tady to máte -- další důkaz, že sady nástrojů jsou stejné, všechny kromě syntaxe. Udělejte si laskavost a naučte se více než jeden rámec JavaScriptu – budete pro to lepší!