Share
Como editor de Nettuts +, puedo revisar un montón de código de los envíos de tutoriales. A pesar del hecho de que jQuery ha estado disponible durante años, todavía hay un error frecuente que veo más que nada.
Considere el siguiente bit de código:
Accentsconagua
$ ('. nav a'). haga clic en (función () $ (this) .hide (); $ (this) .css ('color', 'red'); $ (this) .show (); alert ('algo más'); $ (this) .hide (); return false;); El código anterior es demasiado complicado por una variedad de razones. No te preocupes por lo que realmente hace el código (es un engaño). En su lugar, quiero que mire todas esas referencias a $ (esto).
Piense en el DOM como una piscina.
Piense en el DOM como una piscina. ¿Recuerdas cuando eras niño y te metías en la piscina a buscar monedas, mientras tus padres actuaban como si estuvieran mirando? Esa será nuestra comparación del mundo real..
Cada vez que uses $ ('. someClass'), jQuery salta al grupo (DOM) y busca esa moneda (o nodos). Entonces, cuando se hace referencia varias veces dentro de una función, eso es mucho buceo. O, para cortar la comparación del mundo real, es inútil e innecesario. ¿Por qué llamar a jQuery si no lo requiere? Usted debe realizar lo que llamamos? Caching.?
$ ('. nav a'). click (función (e) var anchor = $ (this); anchor .hide () .css ('color', 'red') .show (); alert ('algo más '); anchor.hide (); e.preventDefault ();); Esto es mucho más limpio. Si bien los motores de los navegadores modernos son increíblemente rápidos en estos días y compensarán su mala codificación de la mejor manera posible, aún debe esforzarse por escribir un código eficiente y evitar el gasto de toda esa energía en la piscina. Ahora, técnicamente, si pasa jQuery un nodo DOM, como esta, no vuelve a consultar el DOM. Simplemente devuelve un objeto jQuery.
Solo porque la diferencia de rendimiento entre los dos será honestamente insignificante, escribimos código limpio para nosotros mismos.
Consideremos un ejemplo un poco más complicado: pestañas.
$ ('. tabs li'). css ('position', 'relative'); $ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .addClass ('active'); $ (this) .load ( 'someHref', function () ); // example $ (this) .css ('top', '1px');); Este código está por todo el lugar. Es feo, e ineficiente. La solución número uno es deshacerse de todo ese CSS. Solo colocaría el estilo en su JavaScript si los valores se crearan dinámicamente. Por ejemplo, si necesita calcular la ubicación precisa que debe tener un elemento en la pantalla, puede usar .css ('izquierda', valor calculado). En este caso, todo se puede exportar a una hoja de estilo externa. Eso nos deja con:
$ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .load ('someHref', function () ); / / example $ (this) .addClass ('active');); A continuación, una vez más, ¿por qué seguimos consultando el DOM para .pestañas li y $ (esto)? Deja de saltar en la piscina. Vamos a caché? la ubicación de .pestañas li.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (this) .load ('someHref', function () ); // example $ (this) .addClass ('active'); ); Mejor, pero seguimos llamando $ (esto) dos veces, lo que no es un gran problema Pero, a partir de mis experiencias, si no lo elimina de inmediato, este número aumenta rápidamente.
var tabs = $ ('. tabs li'); tabs.click (function () var tab = $ (this); tabs.removeClass ('active'); tab.addClass ('active') .load ('someHref', function () ); // example ); Otra opción (ligeramente menos optimizada) sería utilizar el filtrado.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active') .filter (this) .addClass ('active') .load ('someHref', function () ); // example); La diferencia en este caso, es que, en lugar de hacer referencia a $ (esto), estamos usando el filtrar() Método para reducir la colección de elementos de la lista a solo el que se hizo clic.
Sí, el mundo no se acabará si hace referencia. $ ('. pestañas) Varias veces dentro de una función. Los motores de JavaScript son súper rápidos en estos días. Si tuviera que probar el rendimiento de hacerlo miles de veces, la diferencia en la ejecución podría ser de unos doscientos milisegundos. Pero aún así, la pregunta sigue siendo: ¿por qué?
A veces, cuando usamos abstracciones masivas como jQuery, es fácil olvidar eso $ ('. tabs') Es una función real que ejecuta una buena cantidad de código. También se debe tener en cuenta que estos conceptos se aplican a JavaScript en general, no solo a jQuery.
Utilizar el almacenamiento en caché ¿Técnicas descritas anteriormente para escribir código más limpio? para ti.
