Anti-patrones de jQuery y mejores prácticas

Hace mucho tiempo, en una galaxia muy, muy lejos, JavaScript era un lenguaje odiado. De hecho, "odiado" es una subestimación; JavaScript fue un lenguaje despreciado. Como resultado, los desarrolladores generalmente lo trataron como tal, solo metiendo la punta de los dedos en las aguas de JavaScript cuando necesitaban rociar un poco de estilo en sus aplicaciones. A pesar del hecho de que hay un montón de cosas buenas en el lenguaje JavaScript, debido a la ignorancia generalizada, pocos se tomaron el tiempo para aprenderlo correctamente. En cambio, como algunos de ustedes recordarán, el uso estándar de JavaScript implicó una cantidad significativa de copiar y pegar.

"No se moleste en aprender qué hace el código, o si sigue las mejores prácticas; ¡simplemente péguelo!" - El peor consejo de todos

Debido a que el aumento en jQuery reavivó el interés en el lenguaje JavaScript, gran parte de la información en la web es un poco incompleta..

Irónicamente, resulta que gran parte de lo que la comunidad de desarrollo odiaba tenía muy poco que ver con el lenguaje JavaScript, en sí mismo. No, la verdadera amenaza bajo la máscara era el DOM, o "Modelo de Objeto de Documento", que, especialmente en ese momento, era terriblemente inconsistente de un navegador a otro. "Claro, puede funcionar en Firefox, pero ¿qué pasa con IE8? Bueno, puede funcionar con IE8, pero ¿qué pasa con IE7?" La lista continuó sin descanso.!

Afortunadamente, a partir de hace cinco años, la comunidad de JavaScript vería un cambio increíble para mejorar, ya que las bibliotecas como jQuery se presentaron al público. Estas bibliotecas no solo proporcionaron una sintaxis expresiva que era particularmente atractiva para los diseñadores web, sino que también lograron nivelar la sensación de juego, metiendo las soluciones alternativas para las diversas peculiaridades del navegador en su API. Desencadenar $ .ajax y dejar que jQuery haga la parte difícil. Avancemos hoy, y la comunidad de JavaScript es más vibrante que nunca, en gran parte debido a la revolución jQuery.

Debido a que el aumento en jQuery reavivó el interés en el lenguaje JavaScript, gran parte de la información en la web es un poco incompleta. Esto es menos debido a la ignorancia de los escritores, y más como resultado del hecho de que todos estábamos aprendiendo. Toma tiempo para que surjan las mejores prácticas.

Por suerte, la comunidad ha madurado inmensamente desde esos días. Antes de profundizar en algunas de estas mejores prácticas, primero expongamos algunos consejos que han circulado alrededor de la web..


No uses jQuery

El problema con consejos como este es que llevan la idea de la optimización previa a un extremo.

Al igual que Ruby on Rails, la primera introducción de muchos desarrolladores a JavaScript fue a través de jQuery. Esto condujo a un ciclo común: aprender jQuery, enamorarse, profundizar en JavaScript de vainilla y subir de nivel.

Si bien ciertamente no hay nada de malo en este ciclo, allanó el camino para innumerables artículos, que recomendaron a los usuarios no Utilice jQuery en diversas situaciones, debido a "problemas de rendimiento". No sería raro leer que es mejor usar vainilla para bucles, sobre $. cada. O, en algún momento u otro, es posible que haya leído que es una buena práctica usar document.getElementsByClassName sobre el motor Sizzle de jQuery, porque es más rápido.

El problema con consejos como este es que llevan la idea de la optimización previa a un extremo, y no tienen en cuenta las distintas inconsistencias del navegador, ¡las cosas que jQuery solucionó para nosotros! Hacer una prueba y observar un ahorro de unos pocos milisegundos durante miles de repeticiones no es razón para abandonar jQuery y su elegante sintaxis. Su tiempo es mucho mejor invertido en ajustar partes de su aplicación que realmente harán una diferencia, como el tamaño de sus imágenes..


Múltiples objetos jQuery

Este segundo anti-patrón, una vez más, fue el resultado de que la comunidad (incluida la suya en cierto momento) no entendió completamente lo que estaba ocurriendo bajo el capó de jQuery. Como tal, es probable que haya encontrado (o se haya escrito usted mismo) un código, que envolvió un elemento en el objeto jQuery innumerables veces dentro de una función.

$ ('button.confirm'). on ('click', function () // Do it once $ ('. modal'). modal (); // Y una vez más $ ('. modal'). addClass ('activo'); // Y nuevamente por una buena medida $ ('modal'). css (...););

Si bien, al principio, este código puede parecer inofensivo (y, sinceramente, en el gran esquema de las cosas), seguimos la mala práctica de crear múltiples instancias del objeto jQuery. Cada vez que nos referimos a $ ('. modal'), Se está generando un nuevo objeto jQuery. Es eso inteligente?

Piense en el DOM como un grupo: cada vez que llame $ ('. modal'), jQuery está buceando en la piscina y cazando las monedas (o elementos) asociadas. Cuando consultas repetidamente al DOM para el mismo selector, básicamente estás arrojando esas monedas al agua, solo para saltar y encontrarlas de nuevo.!

Encadene siempre los selectores si pretende utilizarlos más de una vez. El fragmento de código anterior se puede refactorizar para:

$ ('button.confirm'). on ('click', function () $ ('. modal') .modal () .addClass ('active') .css (...););

Alternativamente, use "caching".

$ ('button.confirm'). on ('click', function () // Do it ONLY una vez var modal = $ ('. modal'); modal.modal (); modal.addClass ('active') ; modal.css (…););

Con esta técnica, jQuery salta a la agrupación DOM un total de una vez, en lugar de tres.


Selector de rendimiento

Se presta demasiada atención al rendimiento del selector.

Aunque no es tan ubicuo en estos días, no hace mucho tiempo, la web fue bombardeada por innumerables artículos sobre la optimización del rendimiento del selector en jQuery. Por ejemplo, es mejor usar $ ('div p') o $ ('div'). encontrar ('p')?

Listo para la verdad? Realmente no importa Sin duda, es una buena idea tener una comprensión básica de la forma en que el motor Sizzle de jQuery analiza las consultas de su selector de derecha a izquierda (lo que significa que es mejor ser más específico al final de su selector, en lugar del principio). Y, por supuesto, cuanto más específico pueda ser, mejor. Claramente, $ ('a.button') es mejor para el rendimiento que $ ('botón.'), Debido al hecho de que, con el primero, jQuery puede limitar la búsqueda solo a los elementos de anclaje en la página, en lugar de a todos los elementos.

Más allá de eso, sin embargo, se presta demasiada atención al desempeño del selector. En caso de duda, confíe en el hecho de que el equipo de jQuery está compuesto por los mejores desarrolladores de JavaScript de la industria. Si hay un aumento de rendimiento que se logrará en la biblioteca, lo habrán descubierto. Y, si no es así, uno de los miembros de la comunidad presentará una solicitud de extracción.

Teniendo esto en cuenta, ten en cuenta a tus selectores, pero no te preocupes demasiado por las implicaciones del rendimiento, a menos que puedas verbalizar por qué es necesario hacerlo..


Callback Hell

jQuery ha fomentado el uso generalizado de las funciones de devolución de llamada, que sin duda puede proporcionar una buena comodidad. En lugar de declarar una función, simplemente use una función de devolución de llamada. Por ejemplo:

$ ('a.external'). on ('click', function () // esta función de devolución de llamada se activa // cuando se hace clic en .external);

Ciertamente has escrito un montón de código que se ve así; ¡Sé que tengo! Cuando se usan con moderación, las funciones de devolución de llamadas anónimas sirven como conveniencias útiles. La fricción se produce en la línea, cuando entramos ... infierno de devolución de llamada (sonido de rayo disparador)!

Callback hell es cuando tu código se sangra varias veces, a medida que continúas anidando las funciones de devolución de llamada..

Considere el siguiente código bastante común a continuación:

$ ('a.data'). on ('click', function () var anchor = $ (this); $ (this) .fadeOut (400, function () $ .ajax (// ... success: function (data) anchor.fadeIn (400, function () // acaba de ingresar al infierno de devolución de llamada););););

Como regla general, cuanto más sangrado esté su código, más probable es que haya un olor de código. O, mejor aún, pregúntese, ¿mi código se parece a los Mighty Ducks Flying V?

Cuando se trata de un código de refactorización como este, la clave es preguntarse: "¿Cómo se puede probar esto?" Dentro de este bit de código aparentemente simple, un detector de eventos está enlazado a un enlace, el elemento se desvanece, se realiza una llamada AJAX, si se realiza correctamente, el elemento vuelve a aparecer, presumiblemente, los datos resultantes se adjuntarán en alguna parte. Eso seguro es mucho para probar!

¿No sería mejor dividir este código en partes más manejables y comprobables? Ciertamente. Aunque lo siguiente puede optimizarse aún más, un primer paso para mejorar este código podría ser:

var updatePage = function (el, data) // anexar datos obtenidos a DOM; var fetch = function (ajaxOptions) ajaxOptions = ajaxOptions || // url:… // dataType:… success: updatePage; devuelve $ .ajax (ajaxOptions); ; $ ('a.data'). on ('click', function () $ (this) .fadeOut (400, fetch););

Aún mejor, si tiene una variedad de acciones para activar, contenga los métodos relevantes dentro de un objeto.

Piense en cómo, en un restaurante de comida rápida, como McDonalds, cada trabajador es responsable de una tarea. Joe hace las papas fritas, Karen registra a los clientes y Mike asa hamburguesas. Si los tres miembros del personal lo hicieran todo, esto introduciría una variedad de problemas de mantenimiento. Cuando es necesario implementar cambios, tenemos que reunirnos con cada persona para discutirlos. Sin embargo, si, por ejemplo, mantenemos a Joe concentrado exclusivamente en las papas fritas, si necesitamos ajustar las instrucciones para prepararlas, solo necesitamos hablar con Joe y con nadie más. Debes tomar un enfoque similar a tu código; Cada función es responsable de una tarea..

En el código de arriba, el ha podido recuperar la función simplemente activa una llamada AJAX a la URL especificada. los página de actualización La función acepta algunos datos y la agrega al DOM. Ahora, si queremos probar una de estas funciones para asegurarnos de que funciona como se espera, por ejemplo, página de actualización Método, podemos burlarnos del objeto de datos y enviarlo a la función. Fácil!


Reinventando la rueda

Es importante recordar que el ecosistema jQuery ha madurado mucho en los últimos años. Lo más probable es que, si necesita un componente en particular, alguien más lo haya creado. Ciertamente, continúe construyendo complementos para aumentar su comprensión de la biblioteca jQuery (de hecho, escribiremos uno en este artículo), pero, para uso en el mundo real, consulte cualquier posible complemento existente antes de reinventar la rueda.

Como ejemplo, ¿necesita un selector de fecha para un formulario? Ahórrese el trabajo de la pierna y, en su lugar, aproveche la biblioteca de interfaz de usuario jQuery, impulsada por la comunidad y altamente probada..

Una vez que hace referencia a la biblioteca jQuery UI necesaria y la hoja de estilo asociada, el proceso de agregar un selector de fecha a una entrada es tan fácil como hacerlo:

 

O bien, ¿qué pasa con un acordeón? Claro, usted podría escribir esa funcionalidad usted mismo, o en su lugar, una vez más, aprovechar las ventajas de jQuery UI.

Simplemente crea el marcado necesario para tu proyecto..

Capítulo 1

Algún texto.

Capitulo 2

Algún texto.

Capítulo 3

Algún texto.

Sección 4

Algún texto.

Entonces, automágicamente convertirlo en un acordeón.

$ (función () $ ("# acordeón"). accordion (););

¿Y si pudieras crear pestañas en treinta segundos??

Crear el marcado:

  • Sobre nosotros
  • Nuestra misión
  • Estar en contacto

Acerca de nosotros texto.

Nuestro texto de misión.

Ponte en contacto con el texto.

Y activar el plugin..

$ (function () $ ("# tabs"). tabs (););

¡Hecho! Ni siquiera requiere una comprensión notable de JavaScript.


Desarrollo de plugins

Vamos a profundizar en algunas de las mejores prácticas para la creación de complementos de jQuery, lo que seguramente harás en algún momento de tu carrera de desarrollo..

Usaremos un método relativamente simple. Buzon de mensaje El plugin como demo para nuestro aprendizaje. Siéntase libre de trabajar a lo largo; de hecho, por favor hazlo!

La asignación: Implementar la funcionalidad necesaria para mostrar cuadros de diálogo, utilizando la sintaxis., $. mensaje ('DIGA AL USUARIO'). De esta manera, por ejemplo, antes de eliminar un registro de forma permanente, podemos pedirle al usuario que confirme la acción, en lugar de recurrir a inflexibles y feos. alerta cajas.


Paso 1

El primer paso es averiguar cómo "activar" mensaje de $.. En lugar de extender el prototipo de jQuery, para los requisitos de este complemento, solo necesitamos adjuntar un método al espacio de nombres de jQuery.

(function ($) $ .message = function (text) console.log (text);;) (jQuery);

Es tan fácil como eso; ¡Adelante, pruebalo! Cuando usted llama $. mensaje ('Aquí está mi mensaje'), esa cadena debe registrarse en la consola del navegador (Shift + Command + i, en Google Chrome).


Paso 2

Si bien no hay suficiente espacio para cubrir el proceso de prueba del complemento, este es un paso importante que debe investigar. Se produce una sorprendente sensación de seguridad cuando se refactoriza el código probado..

Por ejemplo, al usar el conjunto de pruebas de jQuery, QUnit, podríamos probar el código del Paso 1 escribiendo:

 módulo ('jQuery.message', test ('está disponible en el espacio de nombres jQuery', 1, function () ok ($. message, 'método de mensaje debería existir');););

los De acuerdo La función, disponible a través de QUnit, simplemente afirma que el primer argumento es un valor verdadero. Si el mensaje El método no existe en el espacio de nombres jQuery, entonces falso Será devuelto, en cuyo caso la prueba falla..

Siguiendo el patrón de desarrollo basado en pruebas, este código sería el primer paso. Una vez que haya observado que la prueba falla, el siguiente paso sería agregar la mensaje método, en consecuencia.

Si bien, por brevedad, este artículo no profundizará en el proceso de desarrollo basado en pruebas en JavaScript, le recomendamos consultar el repositorio de GitHub para este proyecto para revisar todas las pruebas del complemento: https: // github .com / JeffreyWay / MessageBox / blob / master / test / MessageBox_test.js


Paso 3

UNA mensaje ¡El método que no hace nada no ayuda a nadie! Tomemos el mensaje proporcionado y se lo mostremos al usuario. Sin embargo, en lugar de incrustar una gran cantidad de código en el mensaje de $. método, en lugar de eso simplemente usaremos la función para instanciar e inicializar un Mensaje objeto.

(function ($) "use strict"; var Message = initialize: function (text) this.text = text; devuélvalo;; $ .message = function (text) // Needs polyfill for IE8- - devolver Object.create (Message) .initialize (text);;) (jQuery);

No solo este enfoque, de nuevo, hace que Mensaje Objeto más comprobable, pero también es una técnica más limpia, que, entre otras cosas, protege de nuevo el infierno de devolución de llamada. Piensa en esto Mensaje objeto como la representación de un cuadro de mensaje único.


Etapa 4

Si Mensaje representa un solo cuadro de mensaje, ¿cuál será el HTML para uno? Vamos a crear un div con una clase de buzon de mensaje, y ponerlo a disposición del Mensaje instancia, a través de un el propiedad.

var Mensaje = inicializar: función (texto) este.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = texto; devuelve esto ;

Ahora, el objeto tiene una referencia inmediata a la envoltura. div para el cuadro de mensaje. Para acceder a ella, podríamos hacer:

var msg = Object.create (Message) .initialize (); // [
â € ‹
â € ‹] console.log (msg.el);

Recuerde, ahora tenemos un fragmento HTML, pero aún no se ha insertado en el DOM. Esto significa que no tenemos que preocuparnos por reflujos innecesarios, cuando agregamos contenido a la div.


Paso 5

El siguiente paso es tomar la cadena de mensaje proporcionada e insertarla en el div. Eso es fácil!

initialize: function (text) //… this.el.html (this.text);  // [
"Aquí hay un mensaje importante"
â € ‹]

Sin embargo, es poco probable que quisiéramos insertar el texto directamente en el div. De manera más realista, el cuadro de mensaje tendrá una plantilla. Si bien podemos permitir que el usuario del complemento cree una plantilla y la haga referencia, mantengamos las cosas simples y limitemos la plantilla a la Mensaje objeto.

 Mensaje var = plantilla: función (texto, botones) retorno ['

'+ texto +'

','
', botones'
' ].unirse("); //… ;

En situaciones, cuando no tiene más remedio que anidar HTML en su JavaScript, un método popular es almacenar los fragmentos HTML como elementos dentro de una matriz y luego unirlos en una cadena HTML..

En este fragmento anterior, el texto del mensaje ahora se está insertando en un párrafo con una clase de mensaje-cuadro-texto. También hemos establecido un lugar para los botones, que implementaremos en breve..

Ahora el inicializar El método se puede actualizar a:

initialize: function (text) // ... this.el.html (this.template (text, buttons)); 

Cuando se activa, construimos la estructura para el cuadro de mensaje:

Aquí hay un mensaje importante..


Paso 6

Para que el cuadro de mensaje sea lo más flexible posible, el usuario del complemento debe tener la capacidad de especificar opcionalmente, entre otras cosas, qué botones deben presentarse al usuario, como "De acuerdo", "Cancelar", "Sí , "etc. Deberíamos poder agregar el siguiente código:

$ .message ('¿Está seguro?', botones: ['Sí', 'Cancelar']);

... y generar un cuadro de mensaje con dos botones.

Para implementar esta funcionalidad, primero actualice el mensaje de $. definición.

$ .message = function (texto, configuración) var msg = Object.create (Mensaje); msg.initialize (texto, configuración); volver msg; ;

Ahora el ajustes objeto será pasado a través de la inicializar método. Vamos a actualizarlo.

initialize: function (texto, configuración) this.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = texto; this.settings = settings this.el.html (this.template (texto, botones));

No está mal, pero ¿y si el usuario del complemento no especifica ninguna configuración? Siempre considere las diversas formas en que puede usarse su complemento.


Paso 7

Asumimos que el usuario del complemento describirá qué botones presentar, pero, para estar seguro, es importante proporcionar un conjunto de valores predeterminados, que es una mejor práctica al crear complementos..

$ .message = function (texto, configuración) var msg = Object.create (Mensaje); msg.initialize (texto, configuración); volver msg; ; $ .message.defaults = icon: 'info', botones: ['Okay'], callback: null;

Con este enfoque, si el usuario del complemento necesita modificar los valores predeterminados, solo necesita actualizar $ .message.defaults, según sea necesario. Recuerde: nunca oculte los valores predeterminados del usuario. Ponlos a disposición del exterior.

Aquí, hemos establecido algunos valores predeterminados: el icono, los botones y una función de devolución de llamada, que deben activarse, una vez que el usuario haya hecho clic en uno de los botones en el cuadro de mensaje.

jQuery ofrece una manera útil de anular las opciones predeterminadas para un complemento (o cualquier objeto, en realidad), a través de su ampliar método.

initialize: function (texto, botones) // ... this.settings = $ .extend (, $ .message.defaults, settings); 

Con esta modificacion, esto.configuraciones ahora será igual a un nuevo objeto. Si el usuario del complemento especifica alguna configuración, anulará el complemento por defecto objeto.


Paso 8

Si pretendemos agregar un icono personalizado al cuadro de mensaje, dependiendo de la acción, será necesario agregar una clase CSS al elemento y permitir que el usuario aplique una imagen de fondo, según corresponda..

Dentro de inicializar método, añadir:

this.el.addClass ('message-box-' + this.settings.icon);

Si no se especifica ningún icono en el ajustes objeto, el predeterminado, info, se utiliza: .mensaje-cuadro-info. Ahora, podemos ofrecer una variedad de clases de CSS (más allá del alcance de este tutorial), que contiene varios iconos para el cuadro de mensaje. Aquí hay un par de ejemplos para comenzar.

.message-box-info background: url (ruta / a / info / icon.png) no-repetir;  .message-box-warning background: url (path / to / warning / icon.png) no se repite; 

Lo ideal es que, como parte de su complemento MessageBox, quiera incluir una hoja de estilo externa que contenga un estilo básico para el cuadro de mensaje, estas clases y un puñado de iconos..


Paso 9

El complemento ahora acepta una serie de botones que se aplicarán a la plantilla, pero aún no hemos escrito la funcionalidad para que esa información sea utilizable. El primer paso es tomar una serie de valores de botones y traducirlos a las entradas HTML necesarias. Crea un nuevo método en el Mensaje objeto para manejar esta tarea.

createButtons: function (buttons) 

jQuery.map es un método útil que aplica una función a cada elemento dentro de una matriz y devuelve una nueva matriz con las modificaciones aplicadas. Esto es perfecto para nuestras necesidades. Para cada elemento de la matriz de botones, como ['Si no'], queremos reemplazar el texto con una entrada HTML, con el valor establecido, en consecuencia.

createButtons: function (buttons) return $ .map (buttons, function (button) return ''; ).unirse("); 

A continuación, actualice el inicializar Método para llamar a este nuevo método..

initialize: function (texto, configuración) this.el = $ ('
', ' class ':' message-box ',' style ':' display: none '); this.text = texto; this.settings = $ .extend (, $ .message.defaults, settings); var buttons = this.createButtons (this.settings.buttons); this.el.html (this.template (texto, botones)); devuelve esto

Paso 10

¿De qué sirve un botón, si no sucede nada cuando el usuario lo pulsa? Un buen lugar para almacenar todos los oyentes de eventos para una vista es dentro de un especial eventos Método en el objeto asociado, como este:

initialize: function () // ... this.el.html (this.template (texto, botones)); this.events (); , events: function () var self = this; this.el.find ('input'). on ('click', function () self.close (); if (typeof self.settings.callback === 'function') self.settings.callback.call (self, $ (this) .val ());); 

Este código es un poco más complejo, ya que el usuario del complemento debe tener la capacidad de activar su propia función de devolución de llamada cuando se hace clic en un botón en el cuadro de mensaje. El código simplemente determina si un llamar de vuelta La función se registró y, si es así, la activa y se envía a través del valor del botón seleccionado. Imagina que un cuadro de mensaje ofrece dos botones: "Aceptar" y "Cancelar". El usuario del complemento debe tener una forma de capturar el valor del botón pulsado y responder en consecuencia.

Note donde llamamos cierre automático ()? Ese método, que aún no se ha creado, es responsable de una cosa: cerrar y eliminar el cuadro de mensaje del DOM.

close: function () this.el.animate (top: 0, opacity: 'hide', 150, function () $ (this) .remove ();); 

Para agregar un poco de estilo, al ocultar el cuadro de mensaje, nosotros, en el transcurso de 150 milisegundos, desvanecemos el cuadro y hacemos la transición hacia arriba.


Paso 11

La funcionalidad ha sido implementada! El último paso es presentar el cuadro de mensaje al usuario. Añadiremos una última espectáculo método en el Mensaje objeto, que insertará el cuadro de mensaje en el DOM y lo posicionará.

show: function () this.el.appendTo ('body'). animate (top: $ (window) .height () / 2 - this.el.outerHeight () / 2, opacity: 'show', 300); 

Solo se necesita un cálculo simple para colocar la caja verticalmente en el centro de la ventana del navegador. Con eso en su lugar, el plugin está completo!

$ .message = function (texto, configuración) var msg = Object.create (Mensaje) .initialize (texto, configuración); msg.show (); volver msg; ;

Paso 12

Para usar su nuevo plugin, simplemente llame $. mensaje (), y pasar a través de un mensaje y cualquier configuración aplicable, como así:

$ .message ('La fila se ha actualizado.');

O, para solicitar confirmación de alguna acción destructiva:

$ .message ('¿Realmente desea eliminar este registro?', botones: ['Sí', 'Cancelar'], icono: 'alerta', devolución de llamada: función (buttonText) si (buttonText === 'Sí ') // proceder y borrar registro);

Pensamientos de cierre

Para obtener más información sobre el desarrollo de jQuery, le recomendamos que consulte mi curso en este sitio, "30 días para aprender jQuery".

En el transcurso de la construcción de esta muestra. Buzon de mensaje complemento, han surgido una variedad de mejores prácticas, como evitar el infierno de devolución de llamada, escribir código comprobable, hacer que las opciones predeterminadas estén disponibles para el usuario del complemento y asegurar que cada método sea responsable de exactamente una tarea.

Si bien uno podría lograr el mismo efecto incorporando innumerables funciones de devolución de llamada dentro de mensaje de $., hacerlo rara vez es una buena idea, e incluso se considera un anti-patrón.

Recuerde las tres claves para el código de mantenimiento y los complementos y scripts de jQuery flexibles:

  1. ¿Podría probar esto? Si no, refactoriza y divide el código en trozos.
  2. ¿He ofrecido la posibilidad de anular mis configuraciones predeterminadas??
  3. ¿Estoy siguiendo malas prácticas o haciendo suposiciones??

Para obtener más información sobre el desarrollo de jQuery, le recomendamos que consulte mi curso de screencast en este sitio, "30 días para aprender jQuery".