javascript - change - Trampas jQuery para evitar

change title javascript

Question

Estoy empezando un proyecto con jQuery.

¿Qué errores / errores / conceptos erróneos / abusos / usos incorrectos tuvo en su proyecto jQuery?

Answer 1

"Encadenamiento" de eventos de animación con devoluciones de llamada.

Supongamos que desea animar un párrafo que se desvanece al hacer clic en él. También querías eliminar el elemento del DOM después. Puedes pensar que puedes simplemente encadenar los métodos:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

En este ejemplo, se llamará a .remove () antes de que se complete .fadeOut (), destruyendo su efecto de desvanecimiento gradual y simplemente haciendo que el elemento desaparezca instantáneamente. En su lugar, cuando desee ejecutar un comando solo al finalizar el anterior, use la devolución de llamada:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

El segundo parámetro de .fadeOut () es una función anónima que se ejecutará una vez que se haya completado la animación .fadeOut (). Esto hace que para un desvanecimiento gradual, y una posterior eliminación del elemento.

Answer 2

Desconocer el impacto en el rendimiento y el uso excesivo de los selectores en lugar de asignarlos a las variables locales. Por ejemplo:-

$(''#button'').click(function() {
    $(''#label'').method();
    $(''#label'').method2();
    $(''#label'').css(''background-color'', ''red'');
});

Más bien que:-

$(''#button'').click(function() {
    var $label = $(''#label'');
    $label.method();
    $label.method2();
    $label.css(''background-color'', ''red'');
});

O incluso mejor con el encadenamiento : -

$(''#button'').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

Encontré this momento esclarecedor cuando me di cuenta de cómo funcionan las pilas de llamadas.

Edición: sugerencias incorporadas en los comentarios.

Answer 3

Digo esto para JavaScript también, pero jQuery, JavaScript NUNCA debe reemplazar CSS.

Además, asegúrese de que el sitio sea utilizable para alguien con JavaScript desactivado (no es tan relevante hoy como en el pasado, pero siempre es bueno tener un sitio completamente utilizable).

Answer 4

Entender cómo usar el contexto. Normalmente, un selector de jQuery buscará en todo el documento:

// This will search whole doc for elements with class myClass
$(''.myClass'');

Pero puedes acelerar las cosas buscando dentro de un contexto:

var ct = $(''#myContainer'');
// This will search for elements with class myClass within the myContainer child elements
$(''.myClass'', ct);

Answer 5

Evita buscar a través de todo el DOM varias veces. Esto es algo que realmente puede retrasar su guión.

Malo:

$(".aclass").this();
$(".aclass").that();
...

Bueno:

$(".aclass").this().that();

Malo:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

Bueno:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Answer 6

Evita la creación múltiple de los mismos objetos jQuery.

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

Answer 7

Haciendo demasiadas manipulaciones de DOM. Si bien los métodos .html (), .append (), .prepend (), etc. son excelentes, debido a la forma en que los navegadores representan y vuelven a representar las páginas, su uso con demasiada frecuencia causará ralentizaciones. A menudo es mejor crear el html como una cadena e incluirlo en el DOM una vez, en lugar de cambiarlo varias veces.

En lugar de:

var $parent = $(''#parent'');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $(''<div class="foo-'' + i + ''" />'');
    $parent.append($div);
}

Prueba esto:

var $parent = $(''#parent'');
var iterations = 10;
var html = '''';

for (var i = 0; i < iterations; i++){
    html += ''<div class="foo-'' + i + ''"></div>'';
}

$parent.append(html);

O incluso esto ($ wrapper es un elemento recién creado que aún no se ha inyectado en el DOM. Agregar nodos a este div de wrapper no causa ralentizaciones, y al final agregamos $ wrapper a $ parent, usando solo una manipulación de DOM ):

var $parent = $(''#parent'');
var $wrapper = $(''<div class="wrapper" />'');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $(''<div class="foo-'' + i + ''" />'');
    $wrapper.append($div);
}

$parent.append($wrapper);

Answer 8

Intenta dividir las funciones anónimas para que puedas reutilizarlas.

//Avoid
$(''#div'').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$(''#div'').click( divClickFn );

Answer 9

Malentendido de usar este identificador en el contexto correcto. Por ejemplo:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here ''this'' is not referring first_element anymore.
   })
});

Y aquí una de las muestras cómo puedes resolverlo:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here ''that'' is referring to first_element still.
   })
});

Answer 10

Mientras usa la función $.ajax para las solicitudes de Ajax al servidor, debe evitar usar el evento complete para procesar los datos de respuesta. Se disparará si la solicitud fue exitosa o no.

En lugar de complete , usa el success .

Ver Ajax Events en la documentación.

Answer 11

Mis dos centavos)

Generalmente, trabajar con jquery significa que no tiene que preocuparse por los elementos DOM reales todo el tiempo. Puedes escribir algo como esto: $(''div.mine'').addClass(''someClass'').bind(''click'', function(){alert(''lalala'')}) - y este código se ejecutará sin lanzar ningún errores

En algunos casos, esto es útil, en algunos casos, en absoluto, pero es un hecho que jquery tiende a ser, bueno, vacío para partidos. Sin embargo, replaceWith arrojará un error si uno intenta usarlo con un elemento que no pertenece al documento. Lo encuentro bastante contraintuitivo.

Otro error es, en mi opinión, el orden de los nodos devueltos por el método prevAll () - $(''<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>'').find(''span:last-child'').prevAll() . No es un gran problema, en realidad, pero debemos tener en cuenta este hecho.

Answer 12

No entendiendo la vinculación de eventos. JavaScript y jQuery funcionan de manera diferente.

Por demanda popular, un ejemplo:

En jQuery:

$("#someLink").click(function(){//do something});

Sin jQuery:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

Básicamente, los ganchos necesarios para JavaScript ya no son necesarios. Es decir, usa el marcado en línea (onClick, etc.) porque simplemente puedes usar los ID y las clases que un desarrollador normalmente aprovecharía para fines de CSS.

Answer 13

No use selectores de clase desnuda, como esto:

$(''.button'').click(function() { /* do something */ });

Esto terminará mirando cada elemento para ver si tiene una clase de "botón".

En su lugar, puedes ayudarlo, como:

$(''span.button'').click(function() { /* do something */ });
$(''#userform .button'').click(function() { /* do something */ });

Aprendí esto el año pasado del blog de Rebecca Murphy.

Actualización : esta respuesta se dio hace más de 2 años y no es correcta para la versión actual de jQuery. Uno de los comentarios incluye una prueba para demostrar esto. También hay una versión actualizada de la prueba que incluye la versión de jQuery en el momento de esta respuesta.

Answer 14

Pasando IDs en lugar de objetos jQuery a funciones:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

Pasar un juego envuelto es mucho más flexible:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

Answer 15

Si desea que los usuarios vean entidades html en su navegador, use ''html'' en lugar de ''texto'' para inyectar una cadena Unicode, como:

$(''p'').html("Your Unicode string")

Answer 16

Si planea usar Ajax en muchos datos, como por ejemplo 1500 filas de una tabla con 20 columnas, entonces no piense en usar jQuery para insertar esos datos en su HTML. Usa JavaScript plano. jQuery será demasiado lento en máquinas más lentas.

Además, la mitad del tiempo jQuery hará cosas que harán que sea más lento, como tratar de analizar etiquetas de script en el HTML entrante, y lidiar con las peculiaridades del navegador. Si quieres una rápida velocidad de inserción, quédate con JavaScript plano.

Answer 17

Si vincula () el mismo evento varias veces, se activará varias veces. Por lo general, siempre voy a unbind(''click'').bind(''click'') solo para estar seguro

Answer 18

Siempre cachee $ (esto) a una variable significativa especialmente en un .each ()

Me gusta esto

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Answer 19

Similar a lo que dijo Repo Man, pero no del todo.

Al desarrollar las formas de ganancias ASP.NET, a menudo hago

$(''<%= Label1.ClientID %>'');

olvidando el signo #. La forma correcta es

$(''#<%= Label1.ClientID %>'');

Answer 20

Use cuerdas de estilo acumulador

Usando el operador + se crea una nueva cadena en la memoria y se le asigna el valor concatenado. Solo después de esto se asigna el resultado a una variable. Para evitar la variable intermedia para el resultado de la concatenación, puede asignar directamente el resultado utilizando el operador + =. Lento:

a += ''x'' + ''y'';

Más rápido:

a += ''x'';
a += ''y'';

Las operaciones primitivas pueden ser más rápidas que las llamadas a funciones.

Considere el uso de operaciones primitivas alternativas sobre las llamadas a funciones en bucles y funciones críticas de rendimiento. Lento:

var min = Math.min(a, b);
arr.push(val);

Más rápido:

var min = a < b ? a : b;
arr[arr.length] = val;

Lea más en JavaScript Mejores prácticas de rendimiento

Answer 21

Uso de ClientID para obtener el ID "real" del control en proyectos ASP.NET.

jQuery(''#<%=myLabel.ClientID%>'');

Además, si está utilizando jQuery dentro de SharePoint, debe llamar a jQuery.noConflict ().

Answer 22

Uso excesivo del encadenamiento.

Mira esto:

this.buttonNext[n ? ''bind'' : ''unbind''](this.options.buttonNextEvent, this.funcNext)[n ? ''removeClass'' : ''addClass''](this.className(''jcarousel-next-disabled'')).attr(''disabled'', n ? false : true);

Explanation

Answer 23

Utilizando jQuery en un pequeño proyecto que se puede completar con solo un par de líneas de JavaScript ordinario.

Answer 24

Eventos

$("selector").html($("another-selector").html());

no clonar ninguno de los eventos, tienes que volver a enlazarlos a todos.

De acuerdo con el comentario de JP, t - clone () hace que los eventos se vuelvan a confundir si pasa verdadero.

Answer 25

No abuses de los complementos.

La mayoría de las veces solo necesitarás la biblioteca y tal vez la interfaz de usuario. Si lo mantiene simple, su código se podrá mantener a largo plazo. No todos los complementos son compatibles y mantenidos, en realidad la mayoría no lo son. Si puede imitar la funcionalidad utilizando elementos centrales, lo recomiendo encarecidamente.

Los complementos son fáciles de insertar en su código, le ahorran algo de tiempo, pero cuando necesite algo adicional, es una mala idea modificarlos, ya que pierde las posibles actualizaciones. El tiempo que ahorre al principio lo perderá más tarde al cambiar complementos obsoletos.

Elija los complementos que utiliza sabiamente. Además de la biblioteca y la interfaz de usuario, uso constantemente $.cookie , $.form , $.validate y thickbox . Para el resto mayormente desarrollo mis propios plug-ins.

Answer 26

Pitfall: Usar bucles en lugar de selectores.

Si se encuentra alcanzando el método jQuery ''.each'' para iterar sobre los elementos DOM, pregúntese si puede usar un selector para obtener los elementos.

Más información sobre los selectores de jQuery:
http://docs.jquery.com/Selectors

Trampa: NO usar una herramienta como Firebug

Firebug fue hecho prácticamente para este tipo de depuración. Si va a estar buscando en el DOM con Javascript, necesita una buena herramienta como Firebug para darle visibilidad.

Más información sobre Firebug: http://getfirebug.com/

Otras grandes ideas están en este episodio de Polymorphic Podcast: (jQuery Secrets with Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Answer 27

• Evite abusar de los documentos listos.
• Mantenga el documento listo para el código de inicialización solamente.
• Siempre extraiga las funciones fuera del documento listas para que puedan reutilizarse.

He visto cientos de líneas de código dentro de la declaración doc ready. Feo, ilegible e imposible de mantener.