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ší!