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!