Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele Nettuts + historien. Denne opplæringen ble først publisert i februar 2010.
MooTools er en av de mest fleksible, modulære og velskrevne JavaScript-rammene som er tilgjengelige. Så mange bruker det, men mange av dem optimaliserer ikke koden sin. Dette innlegget gir deg femten enkle tips for å gjøre MooTools-koden kortere, raskere og sterkere.
En av de store fordelene ved å bruke MooTools er at den er utrolig modulær. Hva betyr det? Nesten ingenting er nødvendig med mindre du trenger det. Fordelen med MooTools modularitet er at din begrensede, egendefinerte MooTools-konstruksjon kan holde JavaScript-ladetiden kort.
Vil du opprette en tilpasset MooTools bygge for ditt neste prosjekt? Følg disse instruksjonene:
Det er det! Noen ganger krever prosjektet hele MooTools Core-biblioteket. I så fall kan nettstedet ditt spare tusenvis
av forespørsler per dag ved å bruke Google AJAX-biblioteker, fullfør byggingen av MooTools. Du kan gjøre disse to måtene:
Denne første metoden inkluderer bare MooTools i siden per normal. Den andre metoden gir mer funksjonalitet og ytelse:
Hva er bra med å bruke API for Google AJAX-bibliotek, er at hvis et annet nettsted bruker AJAX Library API, er den versjonen av MooTools allerede hurtigbufret i nettleseren, og siden lastes raskere!
Mens det er best å holde seg til ett bibliotek på en gitt side for å unngå en mengde overhead, kan du noen ganger ikke unngå å måtte ha flere rammer.
Heldigvis kan MooTools sameksistere med ikke-prototypebaserte JavaScript-rammer. Slik bruker du jQuery og MooTools på samme side:
Takket være MooTools Dollar Safe Mode, antar MooTools ikke lenger "$" -metoden hvis den allerede er tatt!
Utviklere trenger ofte å samle ett element eller en samling av elementer. For eksempel kan det hende du må ta alle A-elementene på siden, endre fargene deres og lage verktøytips fra dem.
Accentsconagua
// grab koblinger, endre farge * / $$ ('# footer a'). setStyle ('color', '# f00'); // gjør lenker verktøytips var tippers = nye tips ($$ ('# footer a')); Koden ovenfor er grovt ineffektiv. Hvorfor spørre DOM to ganger (med $$) hvis du kan samle alle elementene en gang? La oss gjøre dette mer effektivt:
// "lagre" koblinger til en variabel var koblinger = $$ ('# footer a'); // grab koblinger, endre farge * / links.setStyle ('color', '# f00'); // gjør lenker verktøytips var tippers = nye tips (lenker); Du kan gjøre dette enda kortere, men det er ikke så lesbart:
var tippers = nye tips ($$ ('# footer a'). setStyle ('color', '# f00')); Lesbarhet er viktig, så jeg vil ikke anbefale koding på denne måten hvis du jobber med et lag.
Sykling gjennom en rekke elementer er ikke unik for noen JavaScript-rammeverk:
// for hver lenke ... $$ ('a'). hver (funksjon (a) // legg til lenke nudging til elementet a.addEvents (mouseenter: function () // animere til høyre hvis .retrieve ('oPad')) a.store ('oPad', a.getStyle ('padding-left')); a.tween ('padding-left', 30);, mouseleave: // animere tilbake til venstre a.tween ('padding-left', a.retrieve ('oPad')););); Hvilke mange utviklere er ikke klar over at Element-samlinger har samme metoder som Elements, så det er ikke nødvendig å sykle gjennom dem - bare bruk ønsket funksjonalitet til samlingen:
$$ ('a'). addEvents (mouseenter: function () // animere til høyre hvis (! this.retrieve ('oPad')) this.store ('oPad', this.getStyle -left ')); this.tween (' padding-left ', 30);, mouseleave: funksjon () // animere tilbake til venstre this.tween (' padding-left ', this.retrieve oPad '));); Merk at "dette" søkeordet brukes til å referere til "nåværende" elementet i samlingen, ikke selve samlingen.
MooTools "alias" -metode lar deg omdøpe eller alias en eksisterende metode. Ta følgende kodestykke som for tiden er i MooTools Core-kilden:
Array.alias ('forEach', 'hver'); Koden ovenfor lar deg ringe Hver metode istedenfor for hver. Ved hjelp av Hver er mer lesbar, en rolig standard mellom de fleste JavaScript-rammer, og det sparer deg selv noen byte i koden din. Hvis du foretrekker å gi MooTools 'Native eller Class-metoder et egendefinert navn, vær så snill å!
For eksempel er Element Class 'metoden for å fjerne en Element-form DOM:
$ ( 'MyElement') kast (.);
Anta at webappen din handler om et gitt emne, og du vil bli innenfor denne terminologien for koden din. Her er noen eksempler:
Element.alias ( 'avhende', 'kan'); // karriere nettsted? Element.alias ( 'avhende', 'skaft'); // fengselssted?
Uansett årsakene er at du ringer en metode med et annet navn, bare vær ikke redd for å gjøre det!
Å få tilgang til en samling av elementer i DOM er et sentralt ansvar for alle JavaScript-rammer. Dessverre kan det også beskattes og de pseudovelgerne du vil ha, er ikke alltid tilgjengelige. Heldigvis kan MooTools du enkelt implementere dine egne pseudo-selektorer! la oss
opprett en pseudovelger kalt "deaktivert" som returnerer et element hvis det er deaktivert.
// Grip deaktiverte elementer Selectors.Pseudo.disabled = function () return this.disabled; // hvordan du bruker det var deaktivertInputs = $$ ('input: disabled'); Bare legg til selectoren til Selectors.Pseudo-objektet. Hvis den nye pseudo funksjonen returnerer "true", er elementet en kamp og vil bli returnert.
Å definere egne pseudo-selektorer er en fin måte å ta kontroll over dine valgorer!
MooTools filosofi er at det er akseptabelt, til og med oppfordret til å modifisere prototyper når det trengs Native (String, Function, Number, etc.).
Implementering av nye metoder på disse innfødte vil styrke dem enda mer. La oss lage en strengmetode som vil gjøre hvilken tekst som helst
"tweet" format (legg til linker for @ svar, linker, etc.):
String.implement (toTweet: function () return this.replace (/ (https ?: \ / \ / \ S +) / gi, '$ 1' /g,'$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2 '););
Nå kan du ringe "toTweet" på en hvilken som helst streng, og du får strengen tilbake som en "tweet". Her er noen eksempler:
// sett elementets html til en tweet-verdi var el = $ ('myElement'); el.set ( 'html', el.get ( 'html') toTweet ().); // setter elementets html til en koblet, tweet-verdi. // varsling av tweeted value alert ('Yo @NetTuts, sjekk ut #MooTools nettsted: http: //davidwalsh.name'.toTweet ()); // varsler: Yo @NetTuts, sjekk ut min MooTools nettsted: http://davidwalsh.name Implementering av egendefinerte metoder på Objekter styrker alle eksisterende og fremtidige forekomster av objektet.
MooTools OOP-filosofi tillater en supermektig arvsmodell. Ved å utvide eksisterende klasser kan du unngå å gjenta kode, styrke eksisterende objekter og utnytte eksisterende funksjonalitet. MooTools Core, More, og dine tilpassede klasser utvider eksisterende funksjonalitet. Vurder Be om klasse:
Var Request = New Class (Utførelser: [Chain, Events, Options], alternativer: / * onRequest: $ empty, onComplete: $ tom, onCancel: $ empty, onSuccess: $ tom, onFailure: $ empty, onException: $ tomme, * / url: ", data:", overskrifter: 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'tekst / javascript, tekst / html, søknad / xml, tekst / xml, * / * ', async: true, format: false, metode:' post ', link:' ignore ', isSuccess: null, emulering: true, urlEncoded: true, encoding:' utf-8 ', evalScripts: false, evalResponse: false, noCache: false, initialiser: funksjon (alternativer) this.xhr = new Browser.Request (); this.setOptions (options); this.options.isSuccess = this.options.isSuccess || this.isSuccess; dette .headers = new Hash (this.options.headers);, onStateChange: funksjon () hvis (denne.xhr.readyState! = 4 ||! this.running) return; this.running = false; this.status = 0; $ try (funksjon () this.status = this.xhr.status; .bind (dette)); this.xhr.onreadystatechange = $ empty; hvis (this.options.isSuccess.call (dette, dette. stat 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: funksjon () 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); hvis (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 (dette); this.headers.each (funksjon (verdi, nøkkel) prøv this.xhr.setRequestHeader (nøkkel, verdi); fangst (e) this.fireEvent ('unntak', [nøkkel, verdi]); dette); this.fireEvent (be om '); this.xhr.send (data); hvis (! this.options.async) this.onStateChange (); returnere dette; , avbryt: funksjon () hvis (! this.running) returnerer dette; this.running = false; this.xhr.abort (); this.xhr.onreadystatechange = $ empty; this.xhr = new Browser.Request (); this.fireEvent ( 'avbryt'); returnere dette; ); Deretter vurderer Request.JSONP, som utvider Request:
Request.JSON = ny klasse (Extends: Request: Options: secure: true, initialiser: funksjon (alternativer) this.parent (options); this.headers.extend ('Accept': 'application / json' , 'X-Request': 'JSON');, suksess: funksjon (tekst) this.response.json = JSON.decode (text, this.options.secure); this.onSuccess (this.response.json , tekst);); Du ser hvor liten Request.JSONP klassen er? Ved å legge til Utvider: Forespørsel, de Request.JSONP Klassen får alle Request Class-metodene. I hovedsak blir denne lille kodestykket et kraftverk fordi det strekker seg Be om. Du kan til og med legge til utvidelser til utvidelser. Nå vurdere Request.JSONP og så Scott Kyle Request.Twitter klasse:
//Request.JSONP / * --- script: Request.JSONP.js beskrivelse: Definerer Request.JSONP, en klasse for kryssdomenet JavaScript via script injection. lisens: MIT-stil lisensforfattere: - Aaron Newton - Guillermo Rauch krever: - kjerne: 1.2.4 / Element - kjerne: 1.2.4 / Request - / Log gir: [Request.JSONP] ... * / Request.JSONP = new Klasse (Utførelser: [Kjede, Hendelser, Alternativer, Log], Alternativer: / * onRetry: $ tom (intRetries), onRequest: $ empty (scriptElement), onComplete: $ tom (data), onSuccess: $ empty ), onCancel: $ empty (), logg: false, * / url: ", data: , retries: 0, timeout: 0, link: 'ignore', callbackKey: 'callback', injectScript: document.head , initialiser: funksjon (alternativer) this.setOptions (options); hvis (this.options.log) this.enableLog (); this.running = false; this.requests = 0; this.triesRemaining = [];, sjekk: funksjon () hvis (! this.running) returner true; bytt (this.options.link) case 'cancel': this.cancel (); returner true; case 'chain': this.chain (dette. caller.bind (dette, argumenter)), return false; return false; send: funksjon (alternativer) if (! $ chk (argumenter [1]) &&! this.check (alternativer)) returnere dette; var type = $ type (alternativer ), old = this.options, index = $ chk (argumenter [1])? argumenter [1]: this.requests ++; hvis (type == 'streng' || type == 'element') alternativer = data: options; alternativer = $ utvide (data: old.data, url: old.url, alternativer); hvis (! $ chk (this.triesRemaining [index])) this.triesRemaining [index] = this.options.retries; Var resterende = this.triesRemaining [index]; (funksjon () var script = this.getScript (alternativer); this.log ('JSONP henter script med url:' + script.get ('src')); this.fireEvent ('request', script); dette .running = true; (funksjon () hvis (gjenværende) this.triesRemaining [index] = remaining - 1; hvis (script) script.destroy (); this.send (alternativer, indeks) .fireEvent ', this.triesRemaining [index]); else hvis (script && this.options.timeout) script.destroy (); this.cancel (). fireEvent (' failure ');). forsinkelse .options.timeout, dette);). forsinkelse (Browser.Engine.trident? 50: 0, this); returnere dette; , avbryt: funksjon () hvis (! this.running) returnerer dette; this.running = false; this.fireEvent ( 'avbryt'); returnere dette; , getScript: funksjon (alternativer) var index = Request.JSONP.counter, data; Request.JSONP.counter ++; bytte ($ type (options.data)) case 'element': data = document.id (options.data) .toQueryString (); gå i stykker; case 'object': case '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: "); hvis (src.length> 2083) this.log (' JSONP '+ src +' mislykkes i Internet Explorer, som håndhever en 2083 bytes lengde grense på URIer); var script = nytt element ('script', type: 'text / javascript', src: src); Request.JSONP.request_map ['request_' + index] = funksjon suksess (argumenter, script); .bind (dette); return script.inject (this.options.injectScript);, suksess: funksjon (args, script) if (script) script.destroy (); this.running = false; this.log ('JSONP vellykket hentet:', args); this.fireEvent ('complete', args) .fireEvent ('suksess', args) .callChain ();); Request.JSONP.counter = 0; Request.JSONP.request_map = ; ... og nå Request.Twitter:
Request.Twitter = ny klasse (Extends: Request.JSONP, alternativer: linkify: true, url: 'http://twitter.com/statuses/user_timeline/term.json', data: count: 5 , initialiser: funksjon (term, alternativer) this.parent (options); this.options.url = this.options.url.substitute (term: term;, suksess: funksjon (data, script) hvis (this.options.linkify) data.each (funksjon (tweet) tweet.text = this.linkify (tweet.text);, dette); // opprettholde påfølgende samtaler nyere hvis (data [0]) dette. options.data.since_id = data [0] .id; this.parent (data, script); linkify: funksjon (tekst) // modifisert fra TwitterGitter av David Walsh (davidwalsh.name) // takk til Jeremy Parrish (rrish.org) returnere text.replace (/ (https?: \ / \ / \ w \ -;;? & = +.% # \ /] +) / gi, '$ 1') .replace ^ (\ W +) / g, '$ 1 @ $ 2');
Du ser hvordan en foss effekt av å forlenge gjenstander kan gjøre de minste av klassene til et absolutt dyr i en klasse?
Eksperimenter med MooTools arvsmodell og gjenta ikke kode!
Jeg har allerede forklart hvor fleksibel MooTools selektormotoren er, klassesystemet er, og hvor modulært rammen er.1 Hvorfor ville du forvente noe annet enn MooTools hendelsessystem? Å lage egendefinerte hendelser innen MooTools er like enkelt som det blir. Her er en grunnleggende oversikt over MooTools egendefinerte arrangement:
Element.Events.altClick = base: 'click', // "base" hendelsesbetingelsen: funksjon (hendelse) return event.alt; // alt nøkkel? , påAdd: funksjon () // gjør noe når hendelsen er lagt til, onRemove: function () // gjør noe når hendelsen er fjernet;
Her er et godt eksempel på en tilpasset begivenhet - lytte etter "alt" og "klikk" samtidig:
// alt klikk Element.Events.altClick = base: 'klikk', tilstand: funksjon (hendelse) return event.alt; // alt nøkkel? ; // bruk $ (document.body) .addEvent ('altClick', funksjon () alert ('Du har alt klikkt meg!');); Eller du kan ganske enkelt definere en tilpasset hendelse slik at en bestemt funksjon kjører når som helst, hvilken type hendelse er tildelt. I mitt neste eksempel, når et klikkhendelse er tilordnet et element, vil elementets markør automatisk bli endret til "pekeren" -markøren.
/ * oppdater markøren på add / remove click event * / Element.Events.click = base: 'klikk', påAdd: funksjon () if (this.setStyle) this.store ('original-cursor', dette. getStyle ( 'markør')); this.setStyle ( 'markør', 'pekeren'); , onRemove: function () if (this.setStyle) this.setStyle ('cursor', this.retrieve ('original-cursor')); ; Du vil legge merke til at hvis klikkhendelsen er fjernet, vil den opprinnelige markøren bli gjenopprettet.
Selv om sytten til MooTools-arrangementet er forskjellig fra jQuery, trenger det ikke å være! Med en minimal mengde JavaScript kan du gjøre MooTools 'syntseksempel gjenspeilet jQuery.
MooTools har alle sine hendelser i Element.NativeElements gjenstand:
Element.NativeEvents = klikk: 2, dblclick: 2, mouseup: 2, mousedown: 2, kontekstmeny: 2, // museknapper mousewheel: 2, DOMMouseScroll: 2, // mouse wheel mouseover: 2, mouseout: 2, mousemove : 2, selectstart: 2, selectend: 2, // musebevegelse keydown: 2, tastetrykk: 2, tastatur: 2, // tastaturfokus: 2, uskarphet: 2, endre: 2, tilbakestill: 2, velg: 2, send inn: 2, // formelementer last: 1, loss: 1, beforeunload: 2, resize: 1, flytt: 1, DOMContentLoaded: 1, readystatechange: 1, // vindu feil: 1, avbryte: 1, bla: 1 // misc;
Nesten alt du trenger å gjøre er å sykle gjennom hver elementtype og implementere en metode på Element-klassen, oppkalt som hendelsestypen,
som simulerer hva addEvent gjør:
// hash element.natives slik at du kan gjøre ting med det var hash = new Hash (Element.NativeEvents); // fjerne elementer som må byttes ut, legg til erstatninger hash.erase ('mouseover'). slette ('mouseout'). slette ('DOMMouseScroll'); hash.include ( 'mouseenter', 1) .include ( 'mouseleave', 1); // initialiser dette var eventHash = nytt Hash (); // for hver hendelse type, legg til hash hash.getKeys (). hver (funksjon (hendelse) eventHash [event] = funksjon (fn) this.addEvent (event, fn); return dette;;) ; // gjør det skje Element.implement (eventHash); Nå kan du lytte etter hendelser som:
$ ('myElement'). klikk (funksjon () // gjør ting); Hvis du har erfaring med koding med MooTools, har du på et tidspunkt opprettet et element og senere lagt til hendelser til det:
var myElement = nytt element ('a', href: 'mypage.php', tekst: 'Klikk her!'); myElement.addEvent ('klikk', funksjon (e) // stopp eventet hvis (e) e.stop (); // gjør ting); Det er ikke noe galt med det ovenfor, per si, men du kan bare legge til disse hendelsene under elementskaping:
var myElement = nytt element ('a', href: 'mypage.php', tekst: 'Klikk her!', hendelser: klikk: funksjon () // stopp eventen hvis (e) e.stop ; //gjøre ting ); Utvidende klasser ble diskutert i tips # 8 ovenfor. La oss nå utforske * implementer * funksjonaliteten i MooTools klasser. Hva er forskjellen? MooTools bidragsyter Mark Obcena sier det best i sin artikkel med tittelen Up The Moo Herd IV: Det er en klasse for dette:
MooTools har to innebygde mutatorer: Utvider og Utførelser. The Extends mutator tar klassenavnet videre til den og gjør den nye klassen arv direkte fra den, mens implementer tar klassen (eller klassene) passert og legger til metodene sine i den nye klassen (eller blander dem inn - dermed mixin).
Med forskjellen mellom utvidelse og implementering, la oss komme tilbake til det. Implementering av hendelser i MooTools-klassene kan gjøre klassene dine mye mer fleksible. Vurder følgende enkle overleggsklasse:
var Overlay = ny klasse (Utførelser: [Alternativer, Hendelser], alternativer: id: 'overlay', farge: '# 000', varighet: 500, opacity: 0.5, zIndex: 5000 alternativer) this.setOptions (options); this.container = document.id (container); this.overlay = nytt element ('div', id: this.options.id, opacity: 0, styles: posisjon: 'absolutt', bakgrunn: this.options.color, venstre: 0, topp: 0, 'z-indeks': this.options.zIndex,). injiser (this.container); this.tween = new Fx. Tween (this.overlay, varighet: this.options.duration, link: 'cancel', egenskap: 'opacity', onStart: funksjon () this.overlay.setStyles (bredde: '100%', høyde: dette .container.getScrollSize (). y); .bind (dette));, åpne: funksjon () this.tween.start (this.options.opacity); returner dette;, lukk: funksjon ) this.tween.start (0); returner dette;); Sikker på at klassen gjør hva det skal, men det er ikke så fleksibelt det kan være. La oss nå implementere onClick, onClose, onHide, onOpen og onShow events:
var Overlay = ny klasse (Utførelser: [Alternativer, Hendelser], // EVENTER IMPLEMENTERT HER! Alternativer: id: 'overlay', farge: '# 000', varighet: 500, opacity: 0.5, zIndex: 5000 / * , onClick: $ tom, onClose: $ tom, onHide: $ tom, onOpen: $ empty, onShow: $ empty * /, initialiser: funksjon (container, alternativer) this.setOptions (options); this.container = document .id (container); this.overlay = nytt element ('div', id: this.options.id, opacity: 0, stiler: posisjon: 'absolutt', bakgrunn: this.options.color, left: 0 , toppen: 0, 'z-indeks': this.options.zIndex, hendelser: klikk: funksjon () // KLIKK HENDELSE this.fireEvent ('klikk'); .bind (dette)). injiser (this.container); this.tween = new Fx.Tween (this.overlay, varighet: this.options.duration, link: 'cancel', egenskap: 'opacity', onStart: function () this.overlay .setStyles (width: '100%', høyde: this.container.getScrollSize (). y); .bind (dette), onComplete: function () this.fireEvent (this.overlay.get ') == this.options.opacity?' show ':' skjult e '); // VIS ELLER HIDE EVENT .bind (dette)); , åpne: funksjon () this.fireEvent ('open'); // OPEN EVENT this.tween.start (this.options.opacity); returnere dette; , lukk: funksjon () this.fireEvent ('close'); // CLOSE EVENT this.tween.start (0); returnere dette; ); Det som er bra med å legge til hendelser i en klasse er at hendelsene tillater at du gir flere alternativer og utløserfunksjonalitet når våre klassemetoder utfører. I eksemplet ovenfor kan du utføre en hvilken som helst funksjonalitet når overlegget åpnes, lukkes, viser, gjemmer eller blir klikket.
I hovedsak la du to små kodestykker til klassen:
Redskaper: [Events]
... og følgende hvor du vil at en hendelse skal signaliseres ...
this.fireEvent ('someEvent', [argument1, argument2]); Så hvordan kan du kontrollere disse hendelsene når du lager en forekomst av klassen? Legg til dem i alternativene som dette:
var overlay = nytt overlegg (onClick: function () this.hide ();, onOpen: function () alert ('Takk for åpningen!');); Du ville bli presset hardt for å finne en klasse som ikke ville ha nytte av å implementere hendelser!
Hendelse delegering er prosessen med å legge til en hendelse til en forelder for alle sine barn i stedet for å tildele arrangementet til hvert enkelt barn. Fordelen ved hendelse delegering er at du kan legge til barnelementer til foreldreelementet uten å måtte tildele hendelsen til det nye elementet. Hvis du velger å fjerne hendelsen, trenger du bare å fjerne den fra ett element.
Så, i stedet for:
$$ ('a'). addEvent ('klikk', funksjon () // gjør ting - individuelt tildelt); … du gjør dette:
$ ('myContainer'). addEvent ('klikk: relé (a)', funksjon () // tilordnet foreldrene til alle A-elementene (i dette tilfellet #myContainer) / Ikke la ": relay ()" pseudo-syntaks lure deg; Element.Delegation omskriver hendelsesmetodene for å imøtekomme for: relé.
En skjult perle i MooTools 'klasse er Class.toElement-metoden. Class.toElement spiller en liten rolle, men kan hjelpe deg når det gjelder å få tilgang til det primære elementet i en klasse, spesielt hvis du ikke vet hva dette elementet ellers er. implementering toElement på klassen din er enkelt:
var myClass = ny klasse (Utførelser: [Alternativer], initialiser: funksjon (container, alternativer) this.container = $ (container);, toElement: function () return this.container;);
Når du har definert Element, kan du bruke klassen din som et element:
var myInstance = ny MyClass ('myElement'); myInstance.setStyle ('color', '# f00'). set ('html', 'Dette er mitt element!'); Se på det - en klasse praktisk talt manipulert av Element-metoder.
Så vi har alle sett hvordan JavaScript-rammene lar deg koble helvete ut av metoder. Kjetting ser slik ut:
$ ('myElement'). setStyles ('color', '# f00') .sett ('html', 'Klikk her') .fade ('out'). addClass ('cssClass'). addEvent , funksjon (e) hvis (e) e.stop (); alert ('Clicked'!);); Hellige kjetting Batman! Vil du ha klasser for å kjede for alltid? Ikke noe problem - alt du trenger å gjøre er å returnere "dette":
var myClass = ny klasse (// opsjoner, initialisere, redskaper osv. doSomething: function () // gjør en hel masse funksjonalitet her og ... returnere dette;, doAnotherThing: function () // gjør en hel masse funksjonalitet her og ... returnere dette;, doYetAnotherThing: funksjon () // gjør en hel masse funksjonalitet her og ... returnere dette.);
Siden du plasserte returnere dette i hver metode, nå kan du gjøre:
var klasse = ny myClass (); . Klass.doSomething () doAnotherThing () doYetAnotherThing (.);
Pass på at du kommer tilbake dette uansett hvor det er fornuftig. Å gjøre det kan gjøre din Klasse mye enklere å jobbe med og koden din vil bli kortere!
MooTools effekter er unarguably det smidigeste av noen JavaScript-rammeverk. De fx Biblioteket gir også mye kontroll gjennom mange alternativer. La oss ta en titt på en grunnleggende Tween som fader et element til 50%:
var myTween = ny Fx.Tween ('myElement', varighet: 500, fps: 200, // en rekke alternativer her); // fade til 50% $ ('myElement'). addEvent ('klikk', funksjon () myTween.start ('opacity', 0,5);); Visste du at du ikke trenger å skrive ut alt dette? Du kan bruke element snarveier som:
. $ ( 'MyElement') fade (0,5); // fading: Fx.Tween $ ('myElement'). tween ('bredde', 300); // tweening: Fx.Tween $ ('myElement'). morph (bredde: 200, høyde: 300); // morph: Fx.Morph Ovennevnte utdrag er selvfølgelig avhengig av at du vil bruke standardalternativene. Du kan faktisk angi egendefinerte alternativer for disse snarveiene per element:
$ ('myElement'). sett ('tween', varighet: 500, fps: 200). tween ('bredde', 300); Lagre deg selv et par byte ved hjelp av Fx snarveier!
Forhåpentligvis har jeg gitt deg noen tips for å forbedre MooTools JavaScript-koden, noe som gjør den kortere, raskere og sterkere. Har du noen av dine egne tips for å dele? Plasser dem i kommentarene nedenfor!
