Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Nettuts +. Deze tutorial werd voor het eerst gepubliceerd in februari 2010.
MooTools is een van de meest flexibele, modulaire en goed geschreven JavaScript-frameworks die beschikbaar zijn. Zoveel mensen gebruiken het, maar veel van hen optimaliseren hun code niet. Dit bericht geeft je vijftien eenvoudige tips om je MooTools-code korter, sneller en sterker te maken.
Een van de grote voordelen van het gebruik van MooTools is dat het ongelooflijk modulair is. Wat betekent dat? Bijna niets is nodig, tenzij je het nodig hebt. Het voordeel van de modulariteit van MooTools is dat uw beperkte, aangepaste MooTools-build uw JavaScript-laadtijd kort kan houden.
Wil je een aangepaste MooTools-build maken voor je volgende project? Volg deze stappen:
Dat is het! Soms vereist uw project echter de hele MooTools Core-bibliotheek. In dat geval kan uw website zichzelf duizenden besparen
van verzoeken per dag met behulp van de complete build van MooTools van Google AJAX-bibliotheken. Je kunt dit op twee manieren doen:
Deze eerste methode bevat eenvoudigweg MooTools op de pagina per normaal. De tweede methode biedt meer functionaliteit en prestaties:
Wat geweldig is aan het gebruik van de Google AJAX Libraries API is dat als een andere website de AJAX Library API gebruikt, die versie van MooTools al in de cache is opgeslagen en de site sneller wordt geladen!
Hoewel het het beste is om op een bepaalde pagina aan één bibliotheek te blijven om een heleboel overhead te vermijden, kunt u soms voorkomen dat u meerdere frameworks nodig heeft.
Gelukkig kunnen MooTools samengaan met JavaScript-frameworks die niet op prototypen zijn gebaseerd. Hier ziet u hoe u jQuery en MooTools op dezelfde pagina kunt gebruiken:
Dankzij de Dollar Safe Mode van MooTools neemt MooTools niet langer de "$" -methode over als deze al is gebruikt!
Ontwikkelaars moeten vaak een element of een verzameling elementen verzamelen. U moet bijvoorbeeld alle A-elementen binnen de pagina grijpen, hun kleur wijzigen en er tooltips van maken.
Accentsconagua
// grijp links, verander van kleur * / $$ ('# footer a'). setStyle ('color', '# f00'); // maak links tooltips var tippers = nieuwe Tips ($$ ('# footer a')); De bovenstaande code is schromelijk inefficiënt. Waarom zou je de DOM twee keer (met $$) ondervragen als je alle elementen één keer kunt verzamelen? Laten we dit efficiënter maken:
// "opslaan" links naar een variabele var links = $$ ('# footer a'); // grijp links, verander van kleur * / links.setStyle ('color', '# f00'); // maak links tooltips var tippers = nieuw Tips (links); Je zou dit nog korter kunnen maken, maar het is niet zo leesbaar:
var tippers = nieuwe Tips ($$ ('# footer a'). setStyle ('color', '# f00')); Leesbaarheid is belangrijk, dus ik zou het niet aanbevelen om op deze manier te coderen als u met een team samenwerkt.
Fietsen door een reeks elementen is niet uniek voor JavaScript-frameworks:
// voor elke link ... $$ ('a'). each (functie (a) // voeg link nudging toe aan het element a.addEvents (mouseenter: function () // animeer naar rechts als (! a .retrieve ('oPad')) a.store ('oPad', a.getStyle ('padding-left')); a.tween ('padding-left', 30);, mouseleave: function () // terug naar links animeren a.tussen ('padding-left', a.retrieve ('oPad')););); Wat veel ontwikkelaars niet weten is dat Element-collecties dezelfde methoden hebben als Elements, dus er is geen noodzaak om er doorheen te bladeren - pas gewoon de gewenste functionaliteit toe op de verzameling:
$$ ('a'). addEvents (mouseenter: function () // animeer naar rechts als (! this.retrieve ('oPad')) this.store ('oPad', this.getStyle ('padding) -links ')); this.tween (' padding-left ', 30);, mouseleave: function () // animeer terug naar links this.tween (' padding-left ', this.retrieve (' oPad '));); Merk op dat het "dit" sleutelwoord wordt gebruikt om te verwijzen naar het "huidige" element binnen de verzameling, niet naar de verzameling zelf.
Met de 'alias'-methode van MooTools kunt u een bestaande methode hernoemen of een alias noemen. Neem het volgende codefragment dat zich momenteel in de MooTools Core-bron bevindt:
Array.alias ('forElke', 'elk'); Met de bovenstaande code kunt u de elk methode in plaats van forEach. Gebruik makend van elk is leesbaarder, een stille standaard tussen de meeste JavaScript-frameworks en het bespaart je zelfs een paar bytes in je code. Als je de Native of Class-methoden van MooTools liever een aangepaste naam geeft, voel je dan vrij!
De Element Class-methode voor het verwijderen van een element uit de DOM is bijvoorbeeld:
$ ( 'MyElement') verwijderen ().;
Stel dat uw web-app over een bepaald onderwerp gaat en dat u binnen die terminologie wilt blijven voor uw code. Hier zijn een paar voorbeelden:
Element.alias ( 'verwijderen', 'kunnen'); // carrièresite? Element.alias ( 'verwijderen', 'steel'); // gevangenissite?
Wat je redenen ook zijn om een methode met een andere naam te noemen, wees niet bang om dat te doen!
Toegang tot een verzameling elementen in de DOM is een kernverantwoordelijkheid van elk JavaScript-framework. Helaas kan het ook belastend zijn en zijn de pseudo-selectors die u zoekt niet altijd beschikbaar. Gelukkig kunt u met MooTools eenvoudig uw eigen pseudo-selectors implementeren! Laten we
maak een pseudo-selector met de naam "uitgeschakeld" die een element retourneert als het is uitgeschakeld.
// grab disabled elements Selectors.Pseudo.disabled = function () return this.disabled; // hoe u het gebruikt var disabledInputs = $$ ('input: disabled'); Voeg eenvoudig uw selector toe aan het Selectors.Pseudo-object. Als de nieuwe pseudo-functie "waar" retourneert, is het element een overeenkomst en wordt het geretourneerd.
Het definiëren van je eigen pseudo-selectors is een geweldige manier om controle te krijgen over je selectors!
De filosofie van MooTools is dat het acceptabel is, zelfs aangemoedigd, om Native (String, Function, Number, etc.) prototypen aan te passen wanneer dat nodig is.
Het implementeren van nieuwe methoden op deze Natives zal hen nog meer macht geven. Laten we een String-methode maken waarmee elke reeks tekst wordt omgezet
"tweet" -formaat (koppelingen toevoegen voor @antwoorden, koppelingen, enz.):
String.implement (toTweet: function () retourneer this.replace (/ (https?: \ / \ / \ S +) / gi, '$ 1'). Replace (/ (^ | \ s) @ (\ w +) /g,'$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2 '););
Nu kun je "toTweet" op elke string aanroepen en krijg je de string terug als een "tweet". Hier zijn een paar voorbeelden:
// stel de html van een element in op een tweetwaarde var el = $ ('myElement'); el.set ( 'html', el.get ( 'html') toTweet ().); // stelt de html van het element in op een gekoppelde tweetwaarde. // waarschuw de tweeted value alert ('Yo @NetTuts, check mijn #MooTools-website: http: //davidwalsh.name'.toTweet ()); // alerts: Yo @NetTuts, kijk op mijn MooTools-website: http://davidwalsh.name Het implementeren van aangepaste methoden op objecten versterkt elke bestaande en toekomstige instantie van dat object.
De OOP-filosofie van MooTools maakt een superkrachtig overervingsmodel mogelijk. Door bestaande klassen uit te breiden, kunt u het herhalen van code voorkomen, bestaande objecten machtigen en bestaande functionaliteit benutten. MooTools Core, More en uw aangepaste klassen breiden bestaande functionaliteit uit. Houd rekening met de Verzoek klasse:
var Request = new Class (Werkt in: [Chain, Events, Options], options: / * onRequest: $ empty, onComplete: $ empty, onCancel: $ empty, onScompess: $ empty, onFailure: $ empty, onException: $ empty, * / url: ", data:", headers: 'X-Requested-With': 'XMLHttpRequest', 'Accepteer': 'text / javascript, text / html, application / xml, text / xml, * / * ', async: true, format: false, methode:' post ', link:' ignore ', isSuccess: null, emulatie: true, urlGemeld: true, codering:' utf-8 ', evalScripts: false, evalResponse: false, noCache: false, initialize: function (options) this.xhr = new Browser.Request (); this.setOptions (options); this.options.isSuccess = this.options.isSuccess || this.isSuccess; this .headers = nieuwe hash (this.options.headers);, onStateChange: function () if (this.xhr.readyState! = 4 ||! this.running) return; this.running = false; this.status = 0; $ try (function () this.status = this.xhr.status; .bind (this)); this.xhr.onreadystatechange = $ empty; if (this.options.isSuccess.call (this, this. stat us)) 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); if (data && methode == 'get') url = url + (url.contains ('?')? '&': '?') + data; data = null; this.xhr.open (method.toUpperCase (), url, this.options.async); this.xhr.onreadystatechange = this.onStateChange.bind (this); this.headers.each (functie (waarde, sleutel) try this.xhr.setRequestHeader (key, value); catch (e) this.fireEvent ('exception', [key, value]);, deze); this.fireEvent ( 'request'); this.xhr.send (data); if (! this.options.async) this.onStateChange (); geef dit terug; , cancel: function () if (! this.running) retourneer dit; this.running = false; this.xhr.abort (); this.xhr.onreadystatechange = $ leeg; this.xhr = nieuwe Browser.Request (); this.fireEvent ( 'annuleren'); geef dit terug; ); Overweeg vervolgens Request.JSONP, dat Verzoek verlengt:
Request.JSON = nieuwe klasse (Extends: Request, options: secure: true, initialize: function (options) this.parent (options); this.headers.extend ('Accept': 'application / json' , 'X-Request': 'JSON');, success: function (text) this.response.json = JSON.decode (text, this.options.secure); this.onSuccess (this.response.json , tekst);); Je ziet hoe klein het is Request.JSONP klasse is? Door toe te voegen Verlengt: Verzoek, de Request.JSONP klasse krijgt alle methoden van de aanvraagklasse. In wezen wordt dit kleine codefragment een krachtpatser omdat het zich uitbreidt Verzoek. U kunt zelfs extensies toevoegen aan extensies. Overweeg nu Request.JSONP en dan Scott Kyle's Request.Twitter klasse:
//Request.JSONP / * --- script: Request.JSONP.js description: definieert Request.JSONP, een klasse voor cross-domein JavaScript via script injection. licentie: auteurs van MIT-stijllicenties: - Aaron Newton - Guillermo Rauch vereist: - core: 1.2.4 / Element - kern: 1.2.4 / Request - / Log biedt: [Request.JSONP] ... * / Request.JSONP = new Klasse (Implementaties: [Ketting, Gebeurtenissen, Opties, Logboek], opties: / * onRetry: $ empty (intRetries), onRequest: $ empty (scriptElement), onComplete: $ empty (data), onSuccess: $ empty (data ), onCancel: $ empty (), log: false, * / url: ", data: , retries: 0, timeout: 0, link: 'ignore', callbackKey: 'callback', injectScript: document.head , initialize: function (options) this.setOptions (options); if (this.options.log) this.enableLog (); this.running = false; this.requests = 0; this.triesRemaining = [];, check: function () if (! this.running) return true; switch (this.options.link) case 'cancel': this.cancel (); return true; case 'chain': this.chain (this. caller.bind (dit, argumenten)); return false; return false;, send: function (options) if (! $ chk (arguments [1]) &&! this.check (options)) geven dit terug; var type = $ type (opties ), old = this.options, index = $ chk (arguments [1])? argumenten [1]: this.requests ++; if (type == 'string' || type == 'element') options = data: options; options = $ extend (data: old.data, url: old.url, options); if (! $ chk (this.triesRemaining [index])) this.triesRemaining [index] = this.options.retries; var overgebleven = this.triesRemaining [index]; (function () var script = this.getScript (options); this.log ('JSONP-script ophalen met url:' + script.get ('src')); this.fireEvent ('request', script); dit .running = true; (function () if (overig) this.triesRemaining [index] = overig - 1; if (script) script.destroy (); this.send (options, index) .fireEvent ('retry ', this.triesRemaining [index]); else if (script && this.options.timeout) script.destroy (); this.cancel (). fireEvent (' failure ');). delay (this .options.timeout, this);). delay (Browser.Engine.trident? 50: 0, this); geef dit terug; , cancel: function () if (! this.running) retourneer dit; this.running = false; this.fireEvent ( 'annuleren'); geef dit terug; , getScript: function (options) var index = Request.JSONP.counter, data; Request.JSONP.counter ++; switch ($ type (options.data)) case 'element': data = document.id (options.data) .toQueryString (); breken; 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: "); if (src.length> 2083) this.log (' JSONP '+ src +' zal mislukken in Internet Explorer, wat een lengte van 2083 bytes afdwingt limit op URI's '); var script = nieuw Element (' script ', type:' text / javascript ', src: src); Request.JSONP.request_map [' request_ '+ index] = function () this. succes (argumenten, script); .bind (this); return script.inject (this.options.injectScript);, success: function (args, script) if (script) script.destroy (); this.running = false; this.log ('JSONP succesvol opgehaald:', args); this.fireEvent ('compleet', args) .fireEvent ('success', args) .callChain ();); Request.JSONP.counter = 0; Request.JSONP.request_map = ; ... en nu Verzoek.Twitter:
Request.Twitter = nieuwe klasse (Extends: Request.JSONP, options: linkify: true, url: 'http://twitter.com/statuses/user_timeline/term.json', data: count: 5 , initialiseren: functie (term, opties) this.parent (options); this.options.url = this.options.url.substitute (term: term);, success: function (data, script) if (this.options.linkify) data.each (functie (tweet) tweet.text = this.linkify (tweet.text);, this); // blijf daaropvolgende aanroepen nieuwer als (data [0]) dit. options.data.since_id = data [0] .id; this.parent (data, script);, linkify: function (text) // gewijzigd van TwitterGitter door David Walsh (davidwalsh.name) // met dank aan Jeremy Parrish (rrish.org) return text.replace (/ (https?: \ / \ / [\ w \ -:;? & = +.% # \ /] +) / gi, '$ 1') .replace (/ ( ^ | \ W) @ (\ w +) / g, '$ 1 @ $ 2') .replace (/ (^ | \ W) # (\ w +) / g, '$ 1 # $ 2'););
Je ziet hoe een watervaleffect van uitbreidende objecten de kleinste klassen tot een absoluut beest van een klasse kan maken?
Experimenteer met het overervingsmodel van MooTools en herhaal geen code!
Ik heb al uitgelegd hoe flexibel de MooTools-selector-engine is, het klassensysteem, en hoe modulair het framework is.1 Waarom zou u iets anders verwachten van het gebeurtenissensysteem van MooTools? Aangepaste evenementen binnen MooTools maken is zo eenvoudig als het wordt. Hier is een basisoverzicht van je eigen MooTools-evenement:
Element.Events.altClick = base: 'click', // de basisconditie: function (event) return event.alt; // Alt toets? , onAdd: function () // doe iets wanneer de gebeurtenis is toegevoegd, onRemove: function () // doe iets als de gebeurtenis is verwijderd;
Hier is een goed voorbeeld van een aangepast evenement - tegelijkertijd luisteren naar "alt" en "klik":
// alt klik Element.Events.altClick = base: 'click', condition: function (event) return event.alt; // Alt toets? ; // usage $ (document.body) .addEvent ('altClick', function () alert ('U hebt altaargeklikt!');); Of u kunt eenvoudig een aangepaste gebeurtenis definiëren zodat een specifieke functie wordt uitgevoerd wanneer dat type gebeurtenis is toegewezen. In mijn volgende voorbeeld kan elke keer dat een klikgebeurtenis aan een element wordt toegewezen, de cursor van dat element automatisch worden gewijzigd in de cursor "aanwijzer".
/ * update cursor bij toevoegen / verwijderen klikgebeurtenis * / Element.Events.click = base: 'klik', onAdd: function () if (this.setStyle) this.store ('original-cursor', this. getStyle ( 'cursor')); this.setStyle ( 'cursor', 'pointer'); , onRemove: function () if (this.setStyle) this.setStyle ('cursor', this.retrieve ('original-cursor')); ; U zult merken dat als de klikgebeurtenis wordt verwijderd, de oorspronkelijke cursor zal worden hersteld.
Hoewel de systeembeleving van MooTools anders is dan die van jQuery, hoeft dit niet zo te zijn! Met een minimale hoeveelheid JavaScript kunt u de gebeurtenissyntax van MooTools laten weergeven door jQuery's.
MooTools houdt alle evenementen in de Element.NativeElements voorwerp:
Element.NativeEvents = klik: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, // muisknoppen mousewheel: 2, DOMMouseScroll: 2, // mouse wheel mouseover: 2, mouseout: 2, mousemove : 2, selectstart: 2, selectend: 2, // muisbeweging keydown: 2, toetsdruk: 2, keyup: 2, // toetsenbordfocus: 2, vervaging: 2, verandering: 2, reset: 2, selecteer: 2, submit: 2, // laden van formulierelementen: 1, unload: 1, beforeunload: 2, formaat wijzigen: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, // window error: 1, abort: 1, scroll: 1 // misc;
Het enige dat u hoeft te doen, is door elk elementtype heenlopen en een methode implementeren in de klasse Element, die wordt genoemd als het gebeurtenistype,
dat simuleert wat addEvent doet:
// hash de element.natives, zodat je er dingen mee kunt doen var hash = new Hash (Element.NativeEvents); // verwijder items die moeten worden vervangen, voeg hun vervangingen toe hash.erase ('mouseover'). wis ('mouseout'). wis ('DOMMouseScroll'); hash.include (MouseEnter ", 1) .include (mouseLeave", 1); // initialiseer deze var-eventHash = nieuwe hash (); // voor elk type gebeurtenis, voeg toe aan de hash hash.getKeys (). each (function (event) eventHash [event] = function (fn) this.addEvent (event, fn); retourneer dit;;) ; // laat het gebeuren Element.implement (eventHash); Nu kunt u luisteren naar evenementen zoals:
$ ('myElement'). klik (function () // do stuff); Als je ervaring hebt met coderen met MooTools, heb je op een gegeven moment ongetwijfeld een element gemaakt en daarop gebeurtenissen toegevoegd:
var myElement = nieuw element ('a', href: 'mypage.php', tekst: 'Klik hier!'); myElement.addEvent ('klik', functie (e) // stop de gebeurtenis als (e) e.stop (); // do stuff); Er is per definitie niets mis met het bovenstaande, maar je zou die gebeurtenissen gewoon kunnen toevoegen tijdens het maken van elementen:
var myElement = nieuw element ('a', href: 'mypage.php', tekst: 'Klik hier!', evenementen: klik: functie () // stop het evenement als (e) e.stop () ; //dingen doen ); Uitbreiding van de klassen werd besproken in tip # 8 hierboven. Laten we nu eens kijken naar de * implement * -functionaliteit in MooTools-klassen. Wat is het verschil? MooTools medewerker Mark Obcena zegt het het beste in zijn artikel getiteld Up The Moo Herd IV: There's A Class For This:
MooTools heeft twee ingebouwde mutators: Extends en Implements. De mutator Uitbreidingen neemt de naam van de klasse door en maakt de nieuwe klasse er rechtstreeks van erven, terwijl Implements de klasse (of klassen) doorgeeft en hun methoden toevoegt aan de nieuwe klasse (of mengt ze in -dus mixin).
Met het verschil tussen uitbreiden en implementeren, laten we er nog eens op terugkomen. Het implementeren van evenementen binnen uw MooTools-klassen kan uw lessen veel flexibeler maken. Beschouw de volgende eenvoudige klasse Overlay:
var Overlay = nieuwe klasse (implementaties: [opties, gebeurtenissen], opties: id: 'overlay', kleur: '# 000', duur: 500, dekking: 0.5, zIndex: 5000, initialiseren: functie (container, opties) this.setOptions (options); this.container = document.id (container); this.overlay = new Element ('div', id: this.options.id, opacity: 0, styles: position: 'absoluut', achtergrond: this.options.color, links: 0, top: 0, 'z-index': this.options.zIndex,). inject (this.container); this.tween = new Fx. Tween (this.overlay, duration: this.options.duration, link: 'cancel', property: 'opacity', onStart: function () this.overlay.setStyles (width: '100%', height: this .container.getScrollSize (). y); .bind (this));, open: function () this.tween.start (this.options.opacity); return this;, close: function ( ) this.tween.start (0); retourneer dit;); Natuurlijk doet de klas wat het zou moeten doen, maar het is lang niet zo flexibel als het zou kunnen zijn. Laten we nu onClick, onClose, onHide, onOpen en onShow-evenementen implementeren:
var Overlay = nieuwe klasse (implementaties: [opties, evenementen], // EVENEMENTEN GEÏMPORTEERD HIER! opties: id: 'overlay', kleur: '# 000', duur: 500, dekking: 0.5, zIndex: 5000 / * , onClick: $ empty, onClose: $ empty, onHide: $ empty, onOpen: $ empty, onShow: $ empty * /, initialize: function (container, opties) this.setOptions (options); this.container = document .id (container); this.overlay = nieuw element ('div', id: this.options.id, opacity: 0, styles: position: 'absolute', background: this.options.color, left: 0 , top: 0, 'z-index': this.options.zIndex, events: click: function () // KLIK EVENT this.fireEvent ('klik'); .bind (this)). inject (this.container); this.tween = new Fx.Tween (this.overlay, duration: this.options.duration, link: 'cancel', property: 'opacity', onStart: function () this.overlay .setStyles (width: '100%', height: this.container.getScrollSize (). y); .bind (this), onComplete: function () this.fireEvent (this.overlay.get ('opacity ') == this.options.opacity?' show ':' verborgen e '); // LAAT OF VERBERG GEBEURTENIS .bind (this)); , open: function () this.fireEvent ('open'); // OPEN EVENT this.tween.start (this.options.opacity); geef dit terug; , close: function () this.fireEvent ('sluiten'); // SLUIT EVENT this.tween.start (0); geef dit terug; ); Wat geweldig is aan het toevoegen van evenementen aan een klas is dat evenementen je toestaan om meer opties te geven en functionaliteit te activeren wanneer onze klassemethoden worden uitgevoerd. In het bovenstaande voorbeeld kunt u elke functionaliteit uitvoeren wanneer de overlay wordt geopend, gesloten, weergegeven, verbergt of waarop wordt geklikt.
In essentie heb je twee kleine codefragmenten aan de klas toegevoegd:
Werktuigen: [Evenementen]
... en het volgende waar u een evenement wilt laten signaleren ...
this.fireEvent ('someEvent', [argument1, argument2]); Dus hoe kun je deze gebeurtenissen besturen als je een exemplaar van de klas maakt? Voeg ze als volgt toe aan de volgende opties:
var overlay = nieuwe overlay (onClick: function () this.hide ();, onOpen: function () alert ('Thank you for opening!');); Je zou moeilijk worden ingedrukt om een klasse te vinden die niet zou profiteren van het implementeren van evenementen!
Evenementdelegatie is het proces waarbij een gebeurtenis aan een ouder voor al zijn kinderen wordt toegevoegd in plaats van de gebeurtenis aan elk afzonderlijk kind toe te wijzen. Het voordeel van gebeurtenisdelegatie is dat u onderliggende elementen aan het bovenliggende element kunt toevoegen zonder de gebeurtenis aan dat nieuwe element toe te wijzen. Als u ervoor kiest om de gebeurtenis te verwijderen, hoeft u deze slechts uit één element te verwijderen.
Dus in plaats van:
$$ ('a'). addEvent ('klik', functie () // dingen doen - individueel toegewezen); … jij doet dit:
$ ('myContainer'). addEvent ('klik: relay (a)', function () // toegewezen aan het bovenliggende element van alle A-elementen (in dit geval #myContainer), om te luisteren naar een gebeurtenis met een elementklik) / Laat de pseudo-syntaxis van ": relay () niet voor de gek houden; Element.Delegation herschrijft de gebeurtenismethoden om plaats te bieden aan: relay.
Een verborgen juweeltje binnen MooTools 'Class is de Class.toElement-methode. Class.toElement speelt een kleine rol maar kan je helpen als het gaat om toegang tot het primaire element in een klas, vooral als je niet weet wat dat element anders is. Implementeren toElement in jouw klas is eenvoudig:
var myClass = nieuwe klasse (implementaties: [opties], initialiseren: functie (container, opties) this.container = $ (container);, toElement: function () return this.container;);
Als u eenmaal een Element hebt gedefinieerd, kunt u uw klasse net als een element gebruiken:
var myInstance = new MyClass ('myElement'); myInstance.setStyle ('color', '# f00'). set ('html', 'Dit is mijn element!'); Kijk eens naar dat - een klasse die virtueel wordt gemanipuleerd door Element-methoden.
Dus we hebben allemaal gezien hoe de JavaScript-frameworks je toestaan om de hel los te zien van methoden. Chaining ziet er zo uit:
$ ('myElement'). setStyles ('color', '# f00'). set ('html', 'Click Here'). fade ('out'). addClass ('cssClass'). addEvent ('klik') , functie (e) if (e) e.stop (); alert ('Clicked'!);); Heilige keten Batman! Wil je dat je lessen voor altijd in de ketting blijven? Geen probleem - alles wat u hoeft te doen is terugkeren "deze":
var myClass = new Class (// options, initialize, implements, etc. doSomething: function () // doe hier een hele reeks functionaliteit en ... return this;, doAnotherThing: function () // do a whole een heleboel functionaliteit hier en ... return this;, doYetAnotherThing: function () // doe hier een hele reeks functionaliteit en ... retourneer dit.);
Omdat je hebt geplaatst stuur dit terug in elke methode kunt u nu het volgende doen:
var klass = new myClass (); . Klass.doSomething () doAnotherThing () doYetAnotherThing ().;
Zorg ervoor dat je terugkeert deze waar het zinvol is. Als u dit doet, kunt u uw Klasse veel gemakkelijker om mee te werken en je code zal korter zijn!
MooTools-effecten zijn ontegenzeggelijk de soepelste van elk JavaScript-framework. De Fx bibliotheek biedt ook veel controle via talloze opties. Laten we eens kijken naar een eenvoudige Tween die een element tot 50% vervaagt:
var myTween = new Fx.Tween ('myElement', duration: 500, fps: 200, // hier een aantal opties); // vervagen tot 50% $ ('myElement'). addEvent ('klik', functie () myTween.start ('opacity', 0.5);); Wist je dat je dit niet allemaal hoeft te typen? U kunt element-snelkoppelingen gebruiken zoals:
. $ ( 'MyElement') fade (0,5); // fading: Fx.Tween $ ('myElement'). tween ('width', 300); // tweening: Fx.Tween $ ('myElement'). morph (width: 200, height: 300); // morph: Fx.Morph De bovenstaande fragmenten vertrouwen er natuurlijk op dat u de standaardopties wilt gebruiken. U kunt per element feitelijk aangepaste opties voor deze snelkoppelingsmethoden instellen:
$ ('myElement'). set ('tween', duration: 500, fps: 200). tween ('width', 300); Bespaar uzelf een paar bytes met behulp van Fx-snelkoppelingen!
Hopelijk heb ik je enkele tips gegeven om je MooTools JavaScript-code te verbeteren, kor
