Share
Två gånger i månaden besöker vi några av våra läsares favoritinlägg från hela Nettuts + historien. Denna handledning publicerades först i februari 2010.
MooTools är en av de mest flexibla, modulära och välskrivna JavaScript-ramarna som finns tillgängliga. Så många använder det, men många av dem optimerar inte deras kod. Det här inlägget ger dig femton enkla tips för att göra din MooTools-kod kortare, snabbare och starkare.
En av de stora fördelarna med att använda MooTools är att det är otroligt modulärt. Vad betyder det? Nästan ingenting krävs om du inte behöver det. Fördelen med MooTools modularitet är att din begränsade, anpassade MooTools-byggnad kan hålla din JavaScript-laddningstid kort.
Vill du skapa en anpassad MooTools-byggnad för ditt nästa projekt? Följ dessa steg:
Det är allt! Ibland kräver ditt projekt hela MooTools Core-biblioteket. I så fall kan din webbplats rädda sig tusentals
av förfrågningar per dag genom att använda Google AJAX-biblioteken komplett byggnad av MooTools. Du kan göra två sätt:
Den här första metoden innehåller bara MooTools till sidan per normal. Den andra metoden möjliggör mer funktionalitet och prestanda:
Vad som är bra med att använda Google AJAX Library API är att om en annan webbplats använder AJAX Library API, är den versionen av MooTools redan cachad i sin webbläsare och webbplatsen laddas snabbare!
Medan det är bäst att hålla sig till ett bibliotek på en given sida för att undvika en massa överhead, ibland kan du inte undvika att behöva flera ramar.
Lyckligtvis kan MooTools samexistera med alla icke-prototypbaserade JavaScript-ramar. Så här kan du använda jQuery och MooTools på samma sida:
Tack vare MooTools Dollar Safe Mode antar MooTools inte längre "$" -metoden om den redan har tagits!
Utvecklare behöver ofta samla ett element eller en samling element. Du kan till exempel behöva fånga alla A-element på sidan, ändra färg och skapa verktygstips från dem.
Accentsconagua
// grab länkar, ändra färg * / $$ ('# footer a'). setStyle ('color', '# f00'); // gör länkar verktygstips var tippers = nya tips ($$ ('# footer a')); Koden ovan är grovt ineffektiv. Varför fråga DOM två gånger (med $$) om du kan samla alla element en gång? Låt oss göra det mer effektivt:
// "spara" länkar till en variabel var länkar = $$ ('# footer a'); // greppa länkar, ändra färg * / links.setStyle ('color', '# f00'); // gör länkar verktygstips var tippers = nya tips (länkar); Du kan göra detta ännu kortare, men det är inte så läsbart:
var tippers = nya tips ($$ ('# footer a'). setStyle ('color', '# f00')); Läsbarhet är viktigt, så jag rekommenderar inte kodning på det här sättet om du arbetar med ett lag.
Cykling genom en rad element är inte unik för någon JavaScript-ram:
// för varje länk ... $$ ('a'). varje (funktion (a) // lägg länk till elementet a.addEvents (mouseenter: function () // animera till höger om .retrieve ('oPad')) a.store ('oPad', a.getStyle ('padding-left')); a.tween ('padding-left', 30);, mouseleave: function // animera tillbaka till vänster a.tween ('padding-left', a.retrieve ('oPad')););); Vilka många utvecklare är inte medvetna om att Element-samlingar har samma metoder som Elements, så det finns ingen anledning att cykla genom dem - använd bara önskad funktionalitet till samlingen:
$$ ('a'). addEvents (mouseenter: function () // animera till höger om (! this.retrieve ('oPad')) this.store ('oPad', this.getStyle -left ')); this.tween (' padding-left ', 30);, mouseleave: function () // animera tillbaka till vänster this.tween (' padding-left ', this.retrieve oPad '));); Observera att "detta" nyckelord används för att referera till det aktuella elementet i samlingen, inte själva samlingen.
MooTools "alias" -metod låter dig byta namn eller alias en befintlig metod. Ta följande kodsats som är närvarande i MooTools Core-källan:
Array.alias ("forEach", "each"); Ovanstående kod låter dig ringa varje metod istället för för varje. Använder sig av varje är mer läsbar, en tyst standard mellan de flesta JavaScript-ramar, och det sparar dig till och med några byte i din kod. Om du föredrar att ge MooTools inbyggda eller klassmetoder ett eget namn, är du välkommen att!
Exempelvis är Element-klassens metod för att ta bort en Element-form DOM:
$ (MyElement) avyttra ().
Antag att din webapp handlar om ett visst ämne och du vill stanna inom den terminologin för din kod. Här är några exempel:
Element.alias ( 'avyttra', 'kan'); // karriär webbplats? Element.alias ( 'avyttra', 'skaft'); // fängelseplats?
Oavsett dina skäl för att ringa en metod med ett annat namn, var bara inte rädd för att göra det!
Att få tillgång till en samling av element i DOM är ett kärnansvar för alla JavaScript-ramar. Tyvärr kan det också beskattas och de pseudo-selektorer du vill ha är inte alltid tillgängliga. Lyckligtvis gör MooTools dig enkelt att implementera dina egna pseudo-selektorer! låt oss
skapa en pseudovelector med namnet "disabled" som returnerar ett element om det är inaktiverat.
// greppa inaktiverade element Selectors.Pseudo.disabled = function () returnera this.disabled; // hur du använder det var disabledInputs = $$ ('input: disabled'); Lägg bara din väljare till Selectors.Pseudo-objektet. Om den nya pseudofunktionen returnerar "true", är elementet en match och kommer att returneras.
Att definiera egna pseudo-selektorer är ett utmärkt sätt att ta kontroll över dina väljare!
MooTools filosofi är att det är acceptabelt, även uppmuntrat, att modifiera prototyper när det behövs Native (String, Function, Number, etc.).
Genomförandet av nya metoder för dessa infödingar kommer att ge dem ännu större kraft. Låt oss skapa en strängmetod som kommer att göra vilken text som helst
tweet-format (lägg till länkar för @ svar, länkar, etc.):
String.implement (toTweet: function () returnera this.replace (/ (https ?: \ / \ / \ S +) / gi, '$ 1' /g''$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2 '););
Nu kan du kalla "toTweet" på vilken sträng som helst och du kommer att få strängen tillbaka som en "tweet". Här är några exempel:
// ange ett element html till ett tweet värde var el = $ ('myElement'); el.set ( 'html', el.get ( 'html') toTweet ().); // anger elementets html till ett länkt tweet-värde. // varning för tweeted value alert ('Yo @NetTuts, kolla in min #MooTools hemsida: http: //davidwalsh.name'.toTweet ()); // varningar: Yo @NetTuts, kolla in min MooTools hemsida: http://davidwalsh.name Genomförandet av anpassade metoder på Objekt stärker varje befintlig och framtida förekomst av det objektet.
MooTools OOP-filosofi möjliggör en supermäktig arvsmodell. Genom att utöka befintliga klasser kan du undvika att upprepa kod, befästa befintliga objekt och utnyttja befintlig funktion. MooTools Core, More, och dina anpassade klasser utökar befintlig funktionalitet. Överväga Begäran klass:
Var Request = New Class (Redskap: [Chain, Events, Options], alternativ: / * onRequest: $ empty, onComplete: $ tom, onCancel: $ empty, onSuccess: $ tom, onFailure: $ empty, onException: $ tomma, * / url: ", data:", rubriker: 'X-Requested-With': 'XMLHttpRequest', 'Acceptera': 'text / javascript, text / html, application / xml, text / xml, * / * ', async: true, format: false, metod:' post ', länk:' ignore ', isSuccess: null, emulering: true, urlEncoded: true, encoding:' utf-8 ', evalScripts: false, evalResponse: false, noCache: false, initialisera: funktion (alternativ) this.xhr = new Browser.Request (); this.setOptions (options); this.options.isSuccess = this.options.isSuccess || this.isSuccess .headers = new Hash (this.options.headers);, onStateChange: function () if (this.xhr.readyState! = 4 ||! this.running) returnera; this.running = false; this.status = 0; $ try (funktion () this.status = this.xhr.status; .bind (detta)); this.xhr.onreadystatechange = $ empty; om (this.options.isSuccess.call (detta, detta. statistik oss)) this.response = text: this.xhr.responseText, xml: this.xhr.responseXML; this.success (this.response.text, this.response.xml); else this.response = text: null, xml: null; this.failure (); , isSuccess: function () return ((this.status> = 200) && (this.status < 300)); , processScripts: function(text) if (this.options.evalResponse || (/(ecma|java)script/).test(this.getHeader('Content-type'))) return $exec(text); return text.stripScripts(this.options.evalScripts); , success: function(text, xml) this.onSuccess(this.processScripts(text), xml); , onSuccess: function() this.fireEvent('complete', arguments).fireEvent('success', arguments).callChain(); , failure: function() this.onFailure(); , onFailure: function() this.fireEvent('complete').fireEvent('failure', this.xhr); , setHeader: function(name, value) this.headers.set(name, value); return this; , getHeader: function(name) return $try(function() return this.xhr.getResponseHeader(name); .bind(this)); , check: function() if (!this.running) return true; switch (this.options.link) case 'cancel': this.cancel(); return true; case 'chain': this.chain(this.caller.bind(this, arguments)); return false; return false; , send: function(options) if (!this.check(options)) return this; this.running = true; var type = $type(options); if (type == 'string' || type == 'element') options = data: options; var old = this.options; options = $extend(data: old.data, url: old.url, method: old.method, options); var data = options.data, url = String(options.url), method = options.method.toLowerCase(); switch ($type(data)) case 'element': data = document.id(data).toQueryString(); break; case 'object': case 'hash': data = Hash.toQueryString(data); if (this.options.format) var format = 'format=' + this.options.format; data = (data) ? format + '&' + data : format; if (this.options.emulation && !['get', 'post'].contains(method)) var _method = '_method=' + method; data = (data) ? _method + '&' + data : _method; method = 'post'; if (this.options.urlEncoded && method == 'post') var encoding = (this.options.encoding) ? '; charset="+ this.options.encoding :"; this.headers.set("Content-type', 'application/x-www-form-urlencoded' + encoding); if (this.options.noCache) var noCache = 'noCache=' + new Date().getTime(); data = (data) ? noCache + '&' + data : noCache; var trimPosition = url.lastIndexOf('/'); if (trimPosition > -1 && (trimPosition = url.indexOf ('#'))> -1) url = url.substr (0, trimPosition); om (data && method == 'get') url = url + (url.contains ('?')? '&': '?') + data; data = null; this.xhr.open (method.toUpperCase (), url, this.options.async); this.xhr.onreadystatechange = this.onStateChange.bind (detta); this.headers.each (funktion (värde, nyckel) försök this.xhr.setRequestHeader (nyckel, värde); fånga (e) this.fireEvent ("exception", [key, value]); detta); this.fireEvent ( 'begäran'); this.xhr.send (data); om (! this.options.async) this.onStateChange (); returnera detta; , avbryt: funktion () om (! this.running) returnera detta; this.running = false; this.xhr.abort (); this.xhr.onreadystatechange = $ empty; this.xhr = ny webbläsare.Request (); this.fireEvent ( 'Avbryt'); returnera detta; ); Tänk sedan på Request.JSONP, som utökar begäran:
Request.JSON = ny klass (Extends: Request: options: secure: true, initialisera: funktion (alternativ) this.parent (options); this.headers.extend ('Acceptera': 'application / json' , 'X-Request': 'JSON');, framgång: funktion (text) this.response.json = JSON.decode (text, this.options.secure); this.onSuccess (this.response.json , text);); Du ser hur liten Request.JSONP klassen är? Genom att lägga till Utökar: Begäran, de Request.JSONP klassen får alla förfrågningsklassens metoder. I huvudsak blir detta lilla kodstycke ett kraftverk eftersom det sträcker sig Begäran. Du kan till och med lägga till tillägg till tillägg. Nu överväga Request.JSONP och då Scott Kyle s Request.Twitter klass:
//Request.JSONP / * --- script: Request.JSONP.js description: Definierar Request.JSONP, en klass för cross domain JavaScript via script injection. licens: MIT-stil licens författare: - Aaron Newton - Guillermo Rauch kräver: - kärna: 1.2.4 / Element - kärna: 1.2.4 / Request - / Log ger: [Request.JSONP] ... * / Request.JSONP = new Klass (Utrustning: [Kedja, Händelser, Alternativ, Logg], Alternativ: / * onRetry: $ tom (intRetries), onRequest: $ empty (scriptElement), onComplete: $ empty (data), onSuccess: $ empty ), onCancel: $ empty (), logg: false, * / url: ", data: , retries: 0, timeout: 0, länk: 'ignorera', callbackKey: 'callback', injectScript: document.head , initiera: funktion (alternativ) this.setOptions (options); om (this.options.log) this.enableLog (); this.running = false; this.requests = 0; this.triesRemaining = [];, check: funktion () om (! this.running) returnera true; switch (this.options.link) fall 'cancel': this.cancel (); returnera true; case 'chain': this.chain (this. caller.bind (this, arguments)), return false; return false;, send: funktion (alternativ) if (! $ chk (arguments [1]) &&! this.check typ = $ typ (alternativ ), gamla = this.options, index = $ chk (argument [1])? argument [1]: this.requests ++; om (typ == 'sträng' || typ == 'element') alternativ = data: options; options = $ extend (data: old.data, url: old.url, alternativ); om (! $ chk (this.triesRemaining [index])) this.triesRemaining [index] = this.options.retries; var kvar = this.triesRemaining [index]; (funktion () var script = this.getScript (alternativ); this.log ('JSONP hämta script med url:' + script.get ('src')); this.fireEvent ("request", script); .running = true; (funktion () if (remaining) this.triesRemaining [index] = remaining - 1; om (script) script.destroy (); this.send (alternativ, index) .fireEvent ', this.triesRemaining [index]); annars om (script && this.options.timeout) script.destroy (); this.cancel (). fireEvent (' failure ');). .options.timeout, this);). delay (Browser.Engine.trident? 50: 0, this); returnera detta; , avbryt: funktion () om (! this.running) returnera detta; this.running = false; this.fireEvent ( 'Avbryt'); returnera detta; , getScript: funktion (alternativ) var index = Request.JSONP.counter, data; Request.JSONP.counter ++; switch ($ type (options.data)) case 'element': data = document.id (options.data) .toQueryString (); ha sönder; fall "objekt": fall "hash": data = Hash.toQueryString (options.data); var src = options.url + (options.url.test ('\\?')? '&': '?') + (options.callbackKey || this.options.callbackKey) + '= Request.JSONP. request_map.request _ '+ index + (data?' & '+ data: "); om (src.length> 2083) this.log (' JSONP '+ src +' misslyckas i Internet Explorer, vilket styr en 2083 bytes längd gräns för URI: er); var script = nytt element ("script", typ: "text / javascript", src: src); Request.JSONP.request_map ['request_' + index] = funktion framgång (argument, skript); .bind (detta), returnera script.inject (this.options.injectScript);, framgång: funktion (args, script) if (script) script.destroy (); this.running = false; this.log ('JSONP lyckades hämtas:', args); this.fireEvent ('complete', args) .fireEvent ('framgång', args) .callChain ();); Request.JSONP.counter = 0; Request.JSONP.request_map = ; ... och nu Request.Twitter:
Request.Twitter = ny klass (Extends: Request.JSONP, alternativ: linkify: true, url: 'http://twitter.com/statuses/user_timeline/term.json', data: count: 5 , initiera: funktion (term, alternativ) this.parent (options); this.options.url = this.options.url.substitute (term: term;, framgång: funktion (data, script) om (this.options.linkify) data.each (funktion (tweet) tweet.text = this.linkify (tweet.text);, detta); // Håll efterföljande samtal nyare om (data [0]) detta. options.data.since_id = data [0] .id; this.parent (data, script); linkify: funktion (text) // modifierad från TwitterGitter av David Walsh (davidwalsh.name) // med tillstånd av Jeremy Parrish (rrish.org) returnera text.replace (/ (https?: \ / \ / \ w \ -;;? & = +.% # \ /] +) / gi, '$ 1') .plats ^ (\ W +) / g, '$ 1 @ $ 2') .replace (/ (^ | \ W) # (\ w +) / g, '$ 1 # $ 2'););
Du ser hur en vattenfallseffekt av utökade föremål kan göra det minsta av klasserna ett absolut djur i en klass?
Experimentera med MooTools arvsmodell och upprepa inte kod!
Jag har redan förklarat hur flexibel MooTools väljarmotor är, klasssystemet är och hur modulärt ramverket är.1 Varför skulle du förvänta dig något annat än MooTools händelsessystem? Att skapa anpassade händelser inom MooTools är så enkelt som det blir. Här är en grundläggande översikt över din MooTools anpassade händelse:
Element.Events.altClick = bas: "klicka", // "bas" händelse villkor: funktion (händelse) return event.alt; // alt-tangenten? , påAdd: funktion () // gör något när händelsen läggs till, onRemove: function () // gör något när händelsen är borttagen;
Här är ett bra exempel på en anpassad händelse - lyssna på "alt" och "klicka" samtidigt:
// alt klick Element.Events.altClick = bas: 'klicka', villkor: funktion (händelse) return event.alt; // alt-tangenten? ; // användning $ (document.body) .addEvent ('altClick', funktion () alert ('Du har allt-klickat på mig!');); Eller du kan helt enkelt definiera en anpassad händelse så att en viss funktion utförs när som helst vilken typ av händelse som tilldelats. I mitt nästa exempel, varje gång en klickhändelse tilldelas ett element, kommer elementets markör automatiskt att ändras till markören "pekare".
/ * uppdatera markören på add / remove click event * / Element.Events.click = bas: 'klicka', påAdd: funktion () if (this.setStyle) this.store ('original-cursor', this. getStyle ( 'markör')); this.setStyle ( 'markör', 'pekare'); , onRemove: function () if (this.setStyle) this.setStyle ('cursor', this.retrieve ('original-cursor')); ; Du kommer märka att om klickhändelsen tas bort kommer originalmarkören att återställas.
Även om syftet med MooTools-händelsen skiljer sig från jQuery, behöver det inte vara! Med en minimal mängd JavaScript kan du göra MooTools händelsesyntax reflektera jQuery s.
MooTools håller alla sina händelser i Element.NativeElements objekt:
Element.NativeEvents = klick: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, // musknappar mousewheel: 2, DOMMouseScroll: 2, // mouse wheel mouseover: 2, mouseout: 2, mousemove : 2, selectstart: 2, selectend: 2, // musrörelse keydown: 2, tangenttryck: 2, knapptryckning: 2, // tangentbordsfokus: 2, oskärpa: 2, ändra: 2, återställ: 2, välj: 2, skicka in: 2, // formulärelement belastning: 1, lossa: 1, beforeunload: 2, ändra storlek: 1, flytta: 1, DOMContentLoaded: 1, readystatechange: 1, // fönsterfel: 1, avbryt: 1, bläddra: 1 // misc;
Nästan allt du behöver göra är att cykla genom varje elementstyp och implementera en metod på Element-klassen, som heter som händelsetypen,
som simulerar vad addEvent gör:
// hash element.natives så att du kan göra saker med det var hash = new Hash (Element.NativeEvents); // ta bort objekt som behöver bytas ut, lägg till deras ersättare hash.erase ('mouseover'). radera ('mouseout'). radera ('DOMMouseScroll'); hash.include ( 'mouseenter', 1) .include ( 'mouseleave', 1); // initiera denna var händelseHash = ny Hash (); // för varje händelse typ, lägg till hash hash.getKeys (). varje (funktion (händelse) eventHash [event] = function (fn) this.addEvent (händelse, fn); returnera detta;;) ; // gör det hända Element.implement (eventHash); Nu kan du lyssna på händelser som:
$ ('myElement'). klicka (funktion () // gör saker); Om du har erfarenhet som kodar med MooTools, har du vid något tillfälle skapat ett element och sedan lagt till händelser för det:
var myElement = nytt element ('a', href: 'mypage.php', text: 'Klicka här!'); myElement.addEvent ('klick', funktion (e) // stoppa händelsen om (e) e.stop (); // gör saker); Det finns inget fel med ovanstående, men du kan bara lägga till de händelserna under elementskapande:
var myElement = nytt element ('a', href: 'mypage.php', text: 'Klicka här!', händelser: klicka: funktion () // stoppa händelsen om (e) e.stop ; //göra saker ); Utökande klasser diskuterades i tips # 8 ovan. Låt oss nu undersöka funktionen * implementera * inom MooTools-klasserna. Vad är skillnaden? MooTools bidragsgivare Mark Obcena säger det bäst i sin artikel med titeln Up The Moo Herd IV: Det finns en klass för detta:
MooTools har två inbyggda mutatorer: förlänger och implementerar. Extends mutatören tar klassnamnet vidare till det och gör den nya klassen ärv direkt från den, medan Implementerar tar klassen (eller klasserna) passerade och lägger till sina metoder i den nya klassen (eller blandar dem in-thus mixin).
Med skillnaden mellan att utvidga och implementera, låt oss komma tillbaka till det. Genomförandet av händelser inom MooTools-klasserna kan göra dina lektioner mycket mer flexibla. Tänk på följande enkla överlagringsklass:
var Överlay = ny klass (Redigeringsalternativ: [Alternativ, händelser], alternativ: id: 'överlagring', färg: '# 000', varaktighet: 500, opacitet: 0,5, zIndex: 5000 alternativ) this.setOptions (options); this.container = document.id (container); this.overlay = nytt Element ('div', id: this.options.id, opacity: 0, styles: position: 'absolut', bakgrund: this.options.color, left: 0, top: 0, 'z-index': this.options.zIndex,). injicera (this.container); this.tween = new Fx. Tween (this.overlay, duration: this.options.duration, länk: 'cancel', egenskap: 'opacity', onStart: function () this.overlay.setStyles (width: '100%', height: this .container.getScrollSize (). y); .bind (detta));, öppna: funktion () this.tween.start (this.options.opacity); returnera detta;, stäng: funktion ) this.tween.start (0); returnera detta;); Visst gör klassen vad den ska men det är inte så flexibel det kan vara. Nu ska vi implementera onClick, onClose, onHide, onOpen och onShow events:
Var Överlay = Ny Klass (Utrustning: [Alternativ, Händelser], // HÄNDELSER GENOMFÖRES HÄR! Alternativ: id: 'överlagring', färg: '# 000', varaktighet: 500, opacitet: 0,5, zIndex: 5000 / * , onClick: $ tom, onClose: $ empty, onHide: $ tom, onOpen: $ empty, onShow: $ empty * /, initialisera: funktion (container, alternativ) this.setOptions (options); this.container = document .id (behållare); this.overlay = nytt Element ('div', id: this.options.id, opacitet: 0, stilar: position: 'absolut', bakgrund: this.options.color, left: 0 , topp: 0, z-index: this.options.zIndex, händelser: klicka: funktion () // KLICKA HÄNDELSE this.fireEvent ('click'); .bind (detta)). injicera (this.container); this.tween = new Fx.Tween (this.overlay, duration: this.options.duration, länk: 'cancel', egenskap: 'opacity', onStart: function () this.overlay .setStyles (bredd: '100%', höjd: this.container.getScrollSize (). y); .bind (detta), onComplete: function () this.fireEvent (this.overlay.get ') == this.options.opacity?' show ':' gömd e '); // SHOW ELLER HIDE EVENT .bind (this)); , öppna: funktion () this.fireEvent ('open'); // ÖPPEN HÄNDELSE this.tween.start (this.options.opacity); returnera detta; , stäng: funktion () this.fireEvent ('close'); // CLOSE EVENT this.tween.start (0); returnera detta; ); Vad som är bra med att lägga till händelser i en klass är att händelser gör det möjligt för dig att ge fler alternativ och utlösningsfunktionalitet när våra klassmetoder exekveras. I ovanstående exempel kan du utföra alla funktioner när överlägget öppnas, stängs, visar, döljer eller klickar på.
I huvudsak har du lagt till två små kodstycken till klassen:
Redskap: [Händelser]
... och följande där du vill att en händelse ska signaleras ...
this.fireEvent ('someEvent', [argument1, argument2]); Så hur kan du styra dessa händelser när du skapar en förekomst av klassen? Lägg till dem i alternativen så här:
var overlay = nytt överlägg (onClick: function () this.hide ();, onOpen: function () alert ('Tack för att du öppnade!');); Du skulle vara svårt att hitta en klass som inte skulle gynnas av att genomföra händelser!
Event delegation är processen att lägga till en händelse för en förälder för alla sina barn istället för att tilldela händelsen till varje enskilt barn. Fördelen med händelsedelegation är att du kan lägga till barnelement till moderelementet utan att behöva tilldela händelsen till det nya elementet. Om du väljer att ta bort händelsen behöver du bara ta bort det från ett element.
Så, i stället för:
$$ ('a'). addEvent ('klick', funktion () // gör saker - individuellt tilldelade); ... du gör det här:
$ ('myContainer'). addEvent ('klicka: relä (a)', funktion () // tilldelad föräldern till alla A-element (i det här fallet #myContainer) / Låt inte pseudo-syntaxen ": relay ()" lura dig; Element.Delegation omskriver händelse metoder för att rymma för: relä.
En dold pärla inom MooTools Class är klassen. ToElement-metoden. Class.toElement spelar en liten roll men kan hjälpa dig när det gäller att komma åt det primära elementet i en klass, särskilt om du inte vet vad det här elementet är annars. Genomförandet toElement på din klass är lätt:
var myClass = ny klass (Implementer: [Alternativ], initiera: funktion (container, alternativ) this.container = $ (container);, toElement: function () return this.container;);
När du väl har definierat Element kan du använda din klass precis som ett element:
var myInstance = ny MyClass ('myElement'); myInstance.setStyle ('color', '# f00'). set ('html', 'Detta är mitt element!'); Titta på det - en klass praktiseras praktiskt med Element-metoder.
Så vi har alla sett hur JavaScript-ramarna tillåter dig att kedja helvetet ur metoder. Chaining ser ut så här:
$ ('myElement'). setStyles ('color', '# f00') .set ('html', 'Klicka här'). fade ('out'). addClass ('cssClass'). addEvent , funktion (e) om (e) e.stop (); alert ('Clicked'!);); Helig kedja Batman! Vill du ha dina kurser för alltid? Inget problem - allt du behöver göra är att återvända "detta":
var myClass = ny klass (// alternativ, initiera, implementerar etc. gör något: funktion () // gör en hel massa funktionalitet här och ... returnera detta;, görAnotherThing: funktion () // gör en hel massor av funktionalitet här och ... returnera detta;, doYetAnotherThing: function () // gör en hel massa funktionalitet här och ... returnera detta.);
Sedan du placerat returnera detta i varje metod, nu kan du göra:
var klass = ny myClass (); . Klass.doSomething () doAnotherThing () doYetAnotherThing ().;
Se till att återvända detta vart det är vettigt. Att göra det kan göra din Klass mycket lättare att arbeta med och din kod kommer att bli kortare!
MooTools effekter är otvetydigt det smidaste av alla JavaScript-ramar. De Fx Biblioteket ger också många kontroller genom många alternativ. Låt oss ta en titt på en grundläggande Tween som bleknar ett element till 50%:
var myTween = new Fx.Tween ('myElement', duration: 500, fps: 200, // en massa alternativ här); // fade till 50% $ ('myElement'). addEvent ('klick', funktion () myTween.start ('opacity', 0,5);); Visste du att du inte behövde skriva ut allt detta? Du kan använda elementgenvägar som:
. $ ( 'MyElement') blekna (0,5); // fading: Fx.Tween $ ('myElement'). tween ('bredd', 300); // tweening: Fx.Tween $ ('myElement'). morph (bredd: 200, höjd: 300); // morph: Fx.Morph Ovanstående utdrag beror givetvis på att du vill använda standardalternativen. Du kan faktiskt ange anpassade alternativ för dessa genvägsmetoder per element:
$ ('myElement'). set ('tween', duration: 500, fps: 200). tween ('bredd', 300); Spara dig själv några byte med hjälp av Fx genvägar!
Förhoppningsvis har jag gett dig några tips för att förbättra din MooTools JavaScript-kod, vilket gör den kortare, snabbare och starkare. Har du några egna tips för att dela med dig? Placera dem i kommentarerna nedan!
