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

V poslední době jsem docela fušoval s Dojo. Cítím se skvěle se svými schopnostmi MooTools a jQuery, ale pokud jde o Dojo, jsem stále trochu syrový. Co je však důležité mít na paměti, je, že úkoly, které se snažím splnit, jsou stejné – syntaxe je prostě jiná. Zde je několik základních úloh JavaScriptu a syntaxe k jejich provedení v každém úžasném rámci.

Spustit kód, když je DOM připraven

Souprava nástrojů Dojo

dojo.ready(function() {
	//do stuff
});

jQuery

jQuery(document).ready(function() {
	//do stuff
});

MooTools

window.addEvent('domready',function() {
	//do stuff
});

Sbírat prvky

Souprava nástrojů Dojo

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

jQuery

var myElement = jQuery('#myElement');
var divs = jQuery('div');

MooTools

var myElement = document.id('myElement');
var divs = $$('div');

Vytvořit posluchače událostí

Souprava nástrojů Dojo

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');
});

jQuery

jQuery('#myElement').click(function() {
	alert('You clicked me!');
});

MooTools

document.id('myElement').addEvent('click',function() {
	alert('You clicked me!');
});

Vytvořte nový prvek, vložte jej do Document.Body

Souprava nástrojů Dojo

dojo.create('div',{
	innerHTML: 'This is a new element',
	id: 'myElement'
},dojo.body());

jQuery

jQuery('<div id="myElement">This is a new element</div>').appendTo('body');

MooTools

new Element('div',{
	id: 'myElement',
	text: 'This is a new element'
}).inject(document.body);

Provádět požadavky AJAX

Souprava nástrojů Dojo

dojo.xhrPost({
	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	}
	load: function(response) {
		alert('Received the following response:  ' + response);
	}
});

jQuery

jQuery.ajax({
	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	},
	success: function(response) {
		alert('Received the following response:  ' + response);
	}
});

MooTools

new Request({
	url: 'save.php',
	method: 'post',
	data: {
		id: document.id('user-id').value
	},
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);
	}
}).send();

Animace neprůhlednosti prvku

Souprava nástrojů Dojo

dojo.anim('myElement',{ opacity: 0.7 }, 250);

jQuery

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

MooTools

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

Vidět? Dojo, jQuery a MooTools nejsou tak odlišné. Stejné problémy, jiná syntaxe řešení. Jak říká Pete Higgins:Je to jen JavaScript!