Share
Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores de toda la historia de Nettuts +. Este tutorial se publicó por primera vez en febrero de 2010..
MooTools es uno de los marcos de JavaScript más flexibles, modulares y mejor escritos disponibles. Mucha gente lo usa, pero muchos de ellos no optimizan su código. Esta publicación le proporcionará quince consejos simples para hacer que su código MooTools sea más corto, más rápido y más fuerte.
Una de las grandes ventajas de usar MooTools es que es increíblemente modular. Qué significa eso? Casi nada es requerido a menos que lo necesites. La ventaja de la modularidad de MooTools es que su construcción limitada y personalizada de MooTools puede mantener su tiempo de carga de JavaScript corto..
¿Desea crear una compilación MooTools personalizada para su próximo proyecto? Sigue estos pasos:
¡Eso es! A veces, sin embargo, su proyecto requiere la biblioteca completa de MooTools Core. En ese caso, su sitio web puede ahorrarse miles.
de solicitudes por día utilizando las bibliotecas de AJAX de Google para completar la compilación de MooTools. Puedes hacerlo de dos maneras:
Este primer método simplemente incluye MooTools en la página por normal. El segundo método permite más funcionalidad y rendimiento:
Lo bueno de usar la API de Google AJAX Libraries es que si otro sitio web utiliza la API de AJAX Library, esa versión de MooTools ya está en caché en su navegador y el sitio se cargará más rápido!
Si bien es mejor atenerse a una biblioteca en una página determinada para evitar una gran cantidad de sobrecarga, a veces no puede evitar la necesidad de múltiples marcos.
Afortunadamente, MooTools puede coexistir con cualquier marco de JavaScript no basado en prototipos. Aquí le mostramos cómo puede usar jQuery y MooTools en la misma página:
Gracias al modo seguro de dólares de MooTools, MooTools ya no asume el método "$" si ya está en uso.!
Los desarrolladores a menudo necesitan recopilar un elemento o una colección de elementos. Por ejemplo, es posible que deba tomar todos los elementos A dentro de la página, cambiar su color y crear información sobre herramientas a partir de ellos..
Accentsconagua
// agarrar enlaces, cambiar color * / $$ ('# footer a'). setStyle ('color', '# f00'); // crear vínculos tooltips var tippers = new Tips ($$ ('# footer a')); El código anterior es muy ineficiente. ¿Por qué consultar el DOM dos veces (con $$) si puede recopilar todos los elementos una vez? Hagamos esto más eficiente:
// "guardar" enlaces en una variable var enlaces = $$ ('# footer a'); // Agarra los enlaces, cambia de color * / links.setStyle ('color', '# f00'); // hacer enlaces tooltips var tippers = nuevos consejos (enlaces); Puedes hacer esto aún más corto, pero no es tan legible:
var tippers = new Tips ($$ ('# footer a'). setStyle ('color', '# f00')); La legibilidad es importante, por lo que no recomendaría la codificación de esta manera si trabajas con un equipo.
El ciclo a través de una serie de elementos no es exclusivo de ningún marco de JavaScript:
// para cada enlace ... $$ ('a'). each (function (a) // agrega un enlace al elemento a.addEvents (mouseenter: function () // animate a la derecha if (! a recuperar ('oPad')) a.store ('oPad', a.getStyle ('padding-left')); a.tween ('padding-left', 30);, mouseleave: function () // animar de nuevo a la izquierda a.tween ('padding-left', a.retrieve ('oPad')););); Lo que muchos desarrolladores no saben de las colecciones de elementos tienen los mismos métodos que los elementos, por lo que no hay necesidad de alternar entre ellos, simplemente aplique la funcionalidad deseada a la colección:
$$ ('a'). addEvents (mouseenter: function () // animate a la derecha if (! this.retrieve ('oPad')) this.store ('oPad', this.getStyle ('padding -left ')); this.tween (' padding-left ', 30);, mouseleave: function () // animate de nuevo a la izquierda this.tween (' padding-left ', this.retrieve (' oPad '));); Tenga en cuenta que la palabra clave "this" se usa para hacer referencia al elemento "actual" dentro de la colección, no a la colección en sí..
El método de "alias" de MooTools le permite cambiar el nombre o alias de un método existente. Tome el siguiente fragmento de código que se encuentra actualmente en la fuente de MooTools Core:
Array.alias ('forEach', 'each'); El código anterior le permite llamar al cada método en lugar de para cada. Utilizando cada es más legible, un estándar silencioso entre la mayoría de los marcos de JavaScript, e incluso le ahorra algunos bytes en su código. Si prefiere dar un nombre personalizado a los métodos nativos o de clase de MooTools, no dude en!
Por ejemplo, el método de la Clase de elementos para eliminar un elemento del DOM es:
$ ('myElement'). dispose (); Supongamos que su aplicación web trata sobre un tema determinado y le gustaría permanecer dentro de esa terminología para su código. Aquí están algunos ejemplos:
Element.alias ('dispose', 'can'); // sitio de carrera? Element.alias ('dispose', 'shank'); // sitio de la prisión? Cualesquiera sean sus razones para llamar a un método con un nombre diferente, simplemente no tenga miedo de hacerlo!
El acceso a una colección de Elementos en el DOM es una responsabilidad fundamental de cualquier marco de JavaScript. Desafortunadamente, también puede ser agotador y los pseudo selectores que desea no siempre están disponibles. Afortunadamente, MooTools le permite implementar fácilmente sus propios pseudo selectores. Vamos a
crear un pseudo selector llamado "deshabilitado" que devuelve un elemento si está deshabilitado.
// capturar elementos deshabilitados Selectors.Pseudo.disabled = function () return this.disabled; // cómo lo usas var disabledInputs = $$ ('input: disabled'); Simplemente agregue su selector al Selectors.Pseudo objeto. Si la nueva función de pseudo devuelve "verdadero", el elemento es una coincidencia y será devuelto.
Definir sus propios pseudo selectores es una excelente manera de tomar control de sus selectores.!
La filosofía de MooTools es que es aceptable, incluso recomendable, modificar los prototipos nativos (cadena, función, número, etc.) cuando sea necesario.
Implementar nuevos métodos en estos nativos les dará aún más poder. Vamos a crear un método de cadena que convierta cualquier cadena de texto en
Formato "tweet" (agregar enlaces para @ reply's, enlaces, etc.):
String.implement (toTweet: function () return this.replace (/ (https?: \ / \ / \ S +) / gi, '$ 1'). Replace (/ (^ | \ s) @ (\ w +) /g,'$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2 '););
Ahora puedes llamar "toTweet" en cualquier cadena y obtendrás la cadena como "tweet". Aquí están algunos ejemplos:
// establece el html de un elemento en un valor de tweet var el = $ ('myElement'); el.set ('html', el.get ('html'). toTweet ()); // establece el html del elemento en un valor de tweet vinculado. // alerta la alerta de valor tweeteado ('Yo @NetTuts, echa un vistazo a mi sitio web #MooTools: http: //davidwalsh.name'.toTweet ()); // alertas: Yo @NetTuts, echa un vistazo a mi sitio web de MooTools: http://davidwalsh.name La implementación de métodos personalizados en Objetos fortalece cada instancia existente y futura de ese objeto.
La filosofía OOP de MooTools permite un modelo de herencia súper poderoso. Extender las clases existentes le permite evitar repetir el código, potenciar los objetos existentes y aprovechar la funcionalidad existente. MooTools Core, More y sus clases personalizadas amplían la funcionalidad existente. Considera el Solicitud clase:
var Solicitud = nueva Clase (Implementa: [Cadena, Eventos, Opciones], opciones: / * onRequest: $ empty, onComplete: $ empty, onCancel: $ empty, onSuccess: $ empty, onFailure: $ empty, onException: $ vacío, * / url: ", datos:", encabezados: 'X-Requested-With': 'XMLHttpRequest', 'Aceptar': 'text / javascript, text / html, application / xml, text / xml, * / * ', async: true, formato: false, método:' post ', link:' ignore ', isSuccess: null, emulation: true, urlEncoded: true, encoding:' 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 = new 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. estado 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; esto.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 && method == 'get') url = url + (url.contains ('?')? '&': '?') + data; datos = nulo; this.xhr.open (method.toUpperCase (), url, this.options.async); this.xhr.onreadystatechange = this.onStateChange.bind (this); this.headers.each (función (valor, clave) try this.xhr.setRequestHeader (clave, valor); catch (e) this.fireEvent ('excepción', [clave, valor]);, esta); this.fireEvent ('solicitud'); this.xhr.send (datos); if (! this.options.async) this.onStateChange (); devuelve esto , cancel: function () if (! this.running) devuelve esto; esto.running = falso; this.xhr.abort (); this.xhr.onreadystatechange = $ empty; this.xhr = new Browser.Request (); this.fireEvent ('cancelar'); devuelve esto ); Entonces considere Request.JSONP, que extiende la Solicitud:
Request.JSON = new Class (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 , texto);); Ya ves lo pequeño que es el Solicitud.JSONP clase es? Añadiendo Extiende: Solicitud, la Solicitud.JSONP clase obtiene todos los métodos de la clase de solicitud. Esencialmente, este pequeño fragmento de código se convierte en una fuente de poder porque se extiende Solicitud. Incluso puedes agregar extensiones a las extensiones. Ahora considera Solicitud.JSONP y entonces De Scott Kyle Solicitud.Twitter clase:
//Request.JSONP / * --- script: Descripción de Request.JSONP.js: Define Request.JSONP, una clase de JavaScript de dominio cruzado mediante inyección de script. licencia: autores de licencias de estilo MIT: - Aaron Newton - Guillermo Rauch requiere: - núcleo: 1.2.4 / Elemento - núcleo: 1.2.4 / Solicitud - / Registro proporciona: [Request.JSONP]… * / Request.JSONP = new Clase (Implementa: [Cadena, Eventos, Opciones, Registro], opciones: / * onRetry: $ empty (intRetries), onRequest: $ empty (scriptElement), onComplete: $ empty (data), onSuccess: $ empty (data ), onCancel: $ empty (), log: false, * / url: ", data: , reintentos: 0, timeout: 0, link: 'ignore', callbackKey: 'callback', injectScript: document.head , inicialice: 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 (esto, argumentos)); devolver falso; devolver falso;, enviar: función (opciones) si (! $ chk (argumentos [1]) &&! this.check (opciones)) devolver esto; var type = $ type (opciones ), old = this.options, index = $ chk (argumentos [1])? argumentos [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 restante = this.triesRemaining [índice]; (function () var script = this.getScript (opciones); this.log ('JSONP recupera el script con url:' + script.get ('src')); this.fireEvent ('request', script); este .running = true; (function () if (restante) this.triesRemaining [index] = restante - 1; if (script) script.destroy (); this.send (options, index) .fireEvent ('reintentar ', 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); devuelve esto , cancel: function () if (! this.running) devuelve esto; esto.running = falso; this.fireEvent ('cancelar'); devuelve esto , getScript: function (options) var index = Request.JSONP.counter, data; Request.JSONP.counter ++; switch ($ type (options.data)) case 'element': data = document.id (options.data) .toQueryString (); descanso; caso 'objeto': caso 'hash': datos = 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 +' fallará en Internet Explorer, que impone una longitud de 2083 bytes límite en URI '); var script = new Element (' script ', type:' text / javascript ', src: src); Request.JSONP.request_map [' request_ '+ index] = function () this. success (argumentos, script); .bind (this); return script.inject (this.options.injectScript);, success: function (args, script) if (script) script.destroy (); this.running = falso; this.log ('JSONP recuperado exitosamente:', args); this.fireEvent ('complete', args) .fireEvent ('success', args) .callChain ();); Request.JSONP.counter = 0; Request.JSONP.request_map = ; ... y ahora Request.Twitter:
Request.Twitter = new Class (Extends: Request.JSONP, opciones: linkify: true, url: 'http://twitter.com/statuses/user_timeline/term.json', data: count: 5 , initialize: function (término, opciones) this.parent (options); this.options.url = this.options.url.substitute (term: term);, success: function (data, script) if (this.options.linkify) data.each (function (tweet) tweet.text = this.linkify (tweet.text);, this); // mantiene las llamadas posteriores más recientes si (data [0]) this. options.data.since_id = data [0] .id; this.parent (data, script);, linkify: function (text) // modificado de TwitterGitter por David Walsh (davidwalsh.name) // cortesía de Jeremy Parrish (rrish.org) return text.replace (/ (https?: \ / \ / [\ w \ -:;? & = +.% # \ /] +) / gi, '$ 1') .replace (/ ( ^ | \ W) @ (\ w +) / g, '$ 1 @ $ 2') .replace (/ (^ | \ W) # (\ w +) / g, '$ 1 # $ 2'););
Usted ve cómo un efecto de cascada al extender objetos puede hacer que la clase más pequeña sea una bestia absoluta de una clase.?
Experimente con el modelo de herencia de MooTools y no repita el código!
Ya he explicado qué tan flexible es el motor de selección de MooTools, el sistema de clase y qué tan modular es el marco.1 ¿Por qué esperaría algo diferente del sistema de eventos de MooTools? Crear eventos personalizados dentro de MooTools es tan simple como se hace. Aquí hay un resumen básico de su evento personalizado de MooTools:
Element.Events.altClick = base: 'click', // la condición de evento "base": function (event) return event.alt; // ¿tecla Alt? , onAdd: function () // hacer algo cuando se agrega el evento, onRemove: function () // hacer algo cuando se elimina el evento;
Aquí hay un gran ejemplo de un evento personalizado: escuchar "alt" y "hacer clic" al mismo tiempo:
// alt haga clic en Element.Events.altClick = base: 'click', condition: function (event) return event.alt; // ¿tecla Alt? ; // use $ (document.body) .addEvent ('altClick', function () alert ('Alt-clicked me!');); O simplemente puede definir un evento personalizado para que una función específica se ejecute cada vez que se asigna ese tipo de evento. En mi siguiente ejemplo, cada vez que se asigna un evento de clic a un elemento, el cursor de ese elemento se cambiará automáticamente al cursor "puntero".
/ * actualizar el cursor al agregar / eliminar evento de clic * / Element.Events.click = base: 'click', 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.rtrieve ('original-cursor')); ; Notará que si se elimina el evento de clic, se restaurará el cursor original.
Si bien la sintaxis de eventos de MooTools es diferente de jQuery, ¡no tiene por qué serlo! Con una cantidad mínima de JavaScript, puede hacer que la sintaxis del evento de MooTools refleje jQuery.
MooTools tiene todos sus eventos en el Element.NativeElements objeto:
Element.NativeEvents = click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, // botones del mouse mousewheel: 2, DOMMouseScroll: 2, // mouse wheel mouseover: 2, mouseout: 2, mousemove : 2, selectstart: 2, selectend: 2, // keydown de movimiento del mouse: 2, tecla: 2, keyup: 2, // focus de teclado: 2, blur: 2, change: 2, reset: 2, select: 2, enviar: 2, // elementos de formulario carga: 1, descargar: 1, antes de descargar: 2, cambiar el tamaño: 1, mover: 1, DOMContentLoaded: 1, readystatechange: 1, // error de ventana: 1, cancelar: 1, desplazarse: 1 // misc;
Esencialmente, todo lo que necesita hacer es recorrer cada tipo de elemento e implementar un método en la clase Element, llamado como el tipo de evento,
que simula lo que hace addEvent:
// hash the element.natives para que puedas hacer cosas con él var hash = new Hash (Element.NativeEvents); // eliminar los elementos que necesitan ser reemplazados, agregar sus reemplazos hash.erase ('mouseover'). erase ('mouseout'). erase ('DOMMouseScroll'); hash.include ('mouseenter', 1) .include ('mouseleave', 1); // inicializa este var eventHash = new Hash (); // para cada tipo de evento, agregue al hash hash.getKeys (). each (function (event) eventHash [event] = function (fn) this.addEvent (event, fn); devuélvalo;;) ; // hacer que suceda Element.implement (eventHash); Ahora puedes escuchar eventos como:
$ ('myElement'). click (function () // do stuff); Si tiene experiencia en la codificación con MooTools, en algún momento sin duda ha creado un elemento y posteriormente le ha agregado eventos:
var myElement = new Element ('a', href: 'mypage.php', texto: 'Click here!'); myElement.addEvent ('clic', función (e) // detener el evento if (e) e.stop (); // hacer cosas); No hay nada de malo en lo anterior, por ejemplo, pero podría agregar esos eventos durante la creación del elemento:
var myElement = new Element ('a', href: 'mypage.php', texto: 'Click here!', eventos: click: function () // detener el evento if (e) e.stop () ; //hacer cosas ); La extensión de las clases se discutió en la punta # 8 arriba. Ahora exploremos la funcionalidad * implementar * dentro de las clases de MooTools. ¿Cual es la diferencia? Mark Obcena, colaborador de MooTools, lo dice mejor en su artículo titulado Up The Moo Herd IV: Hay una clase para esto:
MooTools tiene dos mutadores incorporados: Extensiones e Implementos. El mutador Extends toma el nombre de la clase que se le pasa y hace que la nueva clase se herede directamente de él, mientras que Implements toma la clase (o clases) que se pasa y agrega sus métodos a la nueva clase (o los mezcla en la mezcla)..
Con la diferencia entre extender e implementar, volvamos a ello. Implementar eventos dentro de tus clases de MooTools puede hacer que tus clases sean mucho más flexibles. Considere la siguiente clase simple de superposición:
var Overlay = new Class (Implements: [Options, Events], options: id: 'overlay', color: '# 000', duración: 500, opacidad: 0.5, zIndex: 5000, initialize: function (contenedor, opciones) this.setOptions (opciones); this.container = document.id (container); this.overlay = new Element ('div', id: this.options.id, opacity: 0, styles: position: 'absoluto', fondo: this.options.color, left: 0, top: 0, 'z-index': this.options.zIndex,). inyectar (this.container); this.tween = new Fx. Tween (this.overlay, duration: this.options.duration, link: 'cancel', propiedad: 'opacity', onStart: function () this.overlay.setStyles (width: '100%', height: this .container.getScrollSize (). y); .bind (this));, open: function () this.tween.start (this.options.opacity); devuélvalo;, close: function ( ) this.tween.start (0); devuélvalo;); Seguro que la clase hace lo que se supone que debe hacer, pero no es tan flexible como podría ser. Ahora implementemos los eventos onClick, onClose, onHide, onOpen y onShow:
var Overlay = new Class (Implements: [Options, Events], // EVENTS IMPLEMENTED HERE! options: id: 'overlay', color: '# 000', duración: 500, opacidad: 0.5, zIndex: 5000 / * , onClick: $ empty, onClose: $ empty, onHide: $ empty, onOpen: $ empty, onShow: $ empty * /, initialize: function (container, options) this.setOptions (options); this.container = document .id (contenedor); this.overlay = new Element ('div', id: this.options.id, opacidad: 0, estilos: posición: 'absoluta', fondo: this.options.color, izquierda: 0 , arriba: 0, 'z-index': this.options.zIndex, events: click: function () // CLICK EVENT this.fireEvent ('click'); .bind (this)). inyectar (this.container); this.tween = new Fx.Tween (this.overlay, duration: this.options.duration, link: 'cancel', propiedad: '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 ':' hid mi'); // MOSTRAR U OCULTAR EVENTO .bind (this)); , abrir: function () this.fireEvent ('abrir'); // EVENTO ABIERTO this.tween.start (this.options.opacity); devuelve esto , close: function () this.fireEvent ('close'); // CIERRE EL EVENTO this.tween.start (0); devuelve esto ); Lo bueno de agregar eventos a una clase es que los eventos le permiten dar más opciones y activar la funcionalidad cuando se ejecutan nuestros métodos de clase. En el ejemplo anterior, puede ejecutar cualquier funcionalidad cuando la superposición se abre, se cierra, se muestra, se oculta o se hace clic.
Esencialmente agregaste dos pequeños fragmentos de código a la clase:
Implementos: [Eventos]
... y lo siguiente donde quiera que desee que se marque un evento ...
this.fireEvent ('someEvent', [argument1, argument2]); Entonces, ¿cómo puedes controlar estos eventos cuando creas una instancia de la clase? Agrégalos en las opciones como esta:
var overlay = new Overlay (onClick: function () this.hide ();, onOpen: function () alert ('¡Gracias por abrir!');); Sería difícil encontrar una clase que no se beneficiaría con la implementación de eventos!
La delegación de eventos es el proceso de agregar un evento a un padre para todos sus hijos en lugar de asignar el evento a cada niño individual. La ventaja de la delegación de eventos es que puede agregar elementos secundarios al elemento principal sin necesidad de asignar el evento a ese elemento nuevo. Si elige eliminar el evento, solo necesita eliminarlo de un elemento.
Entonces, en lugar de:
$$ ('a'). addEvent ('click', function () // hacer cosas - asignadas individualmente); … tu hiciste esto:
$ ('myContainer'). addEvent ('click: relay (a)', function () // asignado al padre de todos los elementos A (en este caso, #myContainer), para escuchar el evento de clic de Un elemento) / No dejes que la pseudo-sintaxis ": relay ()" te engañe; Element.Delegation reescribe los métodos de evento para adaptarse a: relé.
Una gema oculta dentro de la clase de MooTools es el método Class.toElement. Class.toElement tiene un pequeño papel, pero puede ayudarte cuando se trata de acceder al elemento principal dentro de una clase, especialmente si no sabes qué es ese elemento. Implementar toElement en tu clase es fácil:
var myClass = new Class (Implements: [Options], initialize: function (container, options) this.container = $ (container);, toElement: function () return this.container;);
Una vez que haya definido ToElement, puede usar su clase como un elemento:
var myInstance = new MyClass ('myElement'); myInstance.setStyle ('color', '# f00'). set ('html', '¡Este es mi elemento!'); Mira eso - una clase virtualmente manipulada por los métodos del Elemento..
Así que todos hemos visto cómo los marcos de JavaScript le permiten encadenar los métodos. El encadenamiento se ve así:
$ ('myElement'). setStyles ('color', '# f00'). set ('html', 'Click Here'). fade ('out'). addClass ('cssClass'). addEvent ('click' , función (e) if (e) e.stop (); alert ('Clicked'!);); Santo encadenamiento de Batman! ¿Quieres que tus clases encadenen para siempre? No hay problema, todo lo que necesitas hacer es regresar "esta":
var myClass = new Class (// opciones, inicializar, implementos, etc. doSomething: function () // haga un montón de funcionalidades aquí y ... devuelva esto;, doAnotherThing: function () // haga un entero manojo de funcionalidades aquí y ... devuelva esto;, doYetAnotherThing: function () // haga un montón de funciones aquí y ... devuelva esto.);
Desde que colocaste devuelve esto En cada método, ahora puedes hacer:
var klass = new myClass (); klass.doSomething (). doAnotherThing (). doYetAnotherThing ();
Asegúrate de volver esta donde sea que tenga sentido Si lo hace, puede hacer que su Clase mucho más fácil de trabajar y su código será más corto!
Los efectos de MooTools son indiscutiblemente los más suaves de cualquier marco de JavaScript. los Fx La biblioteca también proporciona un montón de control a través de numerosas opciones. Echemos un vistazo a una interpolación básica que desvanece un elemento al 50%:
var myTween = new Fx.Tween ('myElement', duration: 500, fps: 200, // un montón de opciones aquí); // se desvanece a 50% $ ('myElement'). addEvent ('click', function () myTween.start ('opacity', 0.5);); ¿Sabías que no necesitabas escribir todo esto? Podrías usar atajos de elementos como:
$ ('myElement'). fade (0.5); // desvanecimiento: Fx.Tween $ ('myElement'). tween ('width', 300); // interpolación: Fx.Tween $ ('myElement'). morph (width: 200, height: 300); // morph: Fx.Morph Los fragmentos de código anteriores, por supuesto, confían en que desee utilizar las opciones predeterminadas. Puede configurar opciones personalizadas para estos métodos de acceso directo por elemento:
$ ('myElement'). set ('tween', duration: 500, fps: 200). tween ('width', 300); Guárdate unos bytes usando atajos Fx!
Espero haberte dado algunos consejos para mejorar tu código JavaScript de MooTools, haciéndolo más corto, más rápido y más fuerte. ¿Tienes algunos de tus propios consejos para compartir? Colóquelos en lo
