A continuación se presentan las convenciones básicas y las mejores prácticas para escribir código jQuery; estas no incluyen las convenciones y mejores prácticas de JavaScript nativo.

jquery

Cargar jQuery

1. Intenta utilizar una CDN para cargar jQuery.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js.html" type="text/javascript"><\/script>')</script>

La biblioteca pública CDN de Baidu debería ser la más rápida en todas las regiones del país y cuenta con muchas bibliotecas JS, por lo que se recomienda su uso.

<script src="../libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

El servicio de aceleración de la biblioteca JS de Upyun tiene una velocidad de acceso aceptable en el país, pero lamentablemente tiene pocas bibliotecas JS.

<script src="../upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>

La biblioteca JS/CSS de Sina, también conocida como biblioteca pública Sina SAE, tiene una buena velocidad de acceso en el país y cuenta con una amplia variedad de bibliotecas JS; se recomienda su uso.

<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

Variables jQuery

  • 1. Todas las variables que utilicen o almacenen en caché objetos jQuery deben comenzar con$al principio.
  • 2. Siempre almacena en caché en una variable local los objetos devueltos por los selectores de jQuery para reutilizarlos.
  var $myDiv = $("#myDiv");
  $myDiv.click(function(){....});
  • 3. Usa nombres de variables en estilo camelCase.

Selectores

  • 1. Cuando un selector de ID esté disponible, úsalo; internamente utilizadocument.getElementById()。
  • 2. Al usar selectores de clase/pseudoclase, antepón siempre el tipo de elemento al selector para evitar escanear todo el árbol DOM.
 // BAD 在整个DOM树中扫描"products"类名
var $products = $(".products");

// GOOD 只在DIV元素中扫描"products"类名
var $products = $("div.products");
  • 3. En los selectores de jerarquía ID > hijo, utilizafind()el método. Debido a que la primera mitad del selector no utiliza el motor de selectores Sizzle para buscar elementos.
// BAD, Sizzle选择器引擎查找层级
var $productIds = $("#products div.id");

// GOOD, 只有div.id走Sizzle选择器引擎
var $productIds = $("#products").find("div.id");
  • 4. La segunda mitad del selector debe ser más específica que la primera mitad.
// 未优化
$("div.data .gonzalez");

// 优化
$(".data td.gonzalez");
  • 5. Evita selectores redundantes.
$(".data table.attendees td.gonzalez");

// Better: 有必要时要去掉中间不必要的内容
$(".data td.gonzalez");
  • 6. Añade contexto a los selectores.
// 要扫描整个DOM树寻找
$('.class');

// 只在#class-container里扫描
$('.class', '#class-container');
  • 7. Evita usar selectores de comodín (wildcard).
$('div.container > *'); // BAD
$('div.container').children(); // BETTER
  • 8. Evita usar selectores comodín implícitos. Cuando se omite el `input` siguiente, se utiliza implícitamente el selector comodín.
$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD
  • 9. El selector de ID utilizadocument.getElementById(), el selector de ID no necesita anidar IDs.
$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD

Operaciones DOM

  • 1. Siempre separa (detach) primero el elemento DOM existente, luego realiza la operación y finalmente vuelve a adjuntarlo (attach) al DOM.
var $myList = $("#list-container > ul").detach();
//...针对$myList的许多DOM操作
$myList.appendTo("#list-container");
  • 2. Usa concatenación de cadenas o `array.join()` en lugar del método `.append()`.
// BAD
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

// GOOD
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

// EVEN FASTER
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));
  • 3. No operes sobre elementos desconocidos.
// BAD: 这个函数内部要先执行3个函数，才发现选择器选择到的可能是空内容
$("#nosuchthing").slideUp();

// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

Eventos

  • 1. Usa solo una función Document Ready por página. Facilita la depuración.
  • 2. No uses funciones anónimas para vincular eventos. Las funciones anónimas dificultan la depuración, el mantenimiento, las pruebas y la reutilización.
$("#myLink").on("click", function(){...}); // BAD

// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);
  • 3. La función Document Ready no debería ser una función anónima. Las funciones anónimas no pueden reutilizarse ni probarse.
$(function(){ .. }); // BAD: 不容易复用也不利于测试

// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready里可以初始化变量和调用其他初始化函数
}
  • 4. La función Document Ready debe colocarse en un archivo externo, después de otras configuraciones de inicialización, y llamarse a estas funciones desde el JS en línea.
<script src="my-document-ready.js.html"></script>
<script>
  // 任何其他需要设置的全局变量
  $(document).ready(initPage); // or $(initPage);
</script>
  • 5. No agregues comportamiento (JS en línea) en archivos HTML; es una pesadilla para la depuración. Siempre usa jQuery para vincular eventos; luego será fácil desvincularlos.
<a id="myLink" href="../index.html" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD
  • 6. Si es necesario, utiliza espacios de nombres personalizados para los eventos. Esto facilita desvincular eventos específicos en un elemento DOM sin afectar a otros eventos en el mismo elemento.
$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 后面会很容易的解绑这个特定的点击事件
$("#myLink").unbind("click.mySpecialClick");

Ajax

  • 1. Evita usar.getJSON()y.get(), usa solo$.ajax(), los dos primeros usan internamente el último.
  • 2. No useshttpsen sitios webhttpsolicitudes. Enfócate en URL sin esquema (quita http/https de la URL).
  • 3. No pongas los parámetros de la solicitud en la URL, sino en el objeto `data`.
// 不可读
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// 可读
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});
  • 4. Establece explícitamente el tipo de datosdataType, así será fácil saber qué tipo de datos se están manejando actualmente.
  • 5. Al vincular eventos a elementos DOM cargados mediante Ajax, usa delegación de eventos siempre que sea posible. La ventaja de la delegación de eventos es que los elementos añadidos al DOM posteriormente mediante Ajax también pueden responder a los eventos.
$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);
  • 6. Usa Promise
$.ajax({ ... }).then(successHandler, failureHandler);

// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
  • 7. Código de plantilla Ajax:
var jqxhr = $.ajax({
  url: url,
  type: "GET",      // 默认值GET，可根据需要配置
  cache: true,      // 默认值true, dataType是'script'或'jsonp'时为false，可根据需要配置
  data: {},         // 请求参数对象
  dataType: "json", // 设置数据类型
  jsonp: "callback",// 只在操作JSONP时设置此项
  statusCode: {     // 针对特定错误码的回调处理函数
    404: handler404,
    500: handler500
  }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

Efectos y animaciones

1. Usa una forma unificada de implementar animaciones.

2. No abuses de los efectos de animación, a menos que se busque mejorar la experiencia del usuario.

  • Intenta usar los métodos simples `show`/`hide`/`toggle`/`slideUp`/`slideDown` para mostrar y ocultar elementos.
  • Intenta usar los intervalos de tiempo de animación predefinidos:slow,fasto400

Plugins

  • 1. Siempre elige plugins con buen mantenimiento, buena documentación, buenas pruebas y soporte de la comunidad.
  • 2. Comprueba cuidadosamente la compatibilidad del plugin con la versión de jQuery que estés utilizando.
  • 3. Cualquier componente de uso general debería extraerse como plugin de jQuery.

Escritura en cadena

  • 1. Intenta usar la escritura en cadena en lugar de usar caché de variables o llamar varias veces a los métodos de selección.
$("#myDiv").addClass("error").show();
  • 2. Cuando la cadena supere tres llamadas o se vuelva compleja por la vinculación de eventos, usa saltos de línea e indentación para mantener la legibilidad del código.
$("#myLink")
  .addClass("bold")
  .on("click", myClickHandler)
  .on("mouseover", myMouseOverHandler)
  .show();
  • 3. Para cadenas más largas, es aceptable almacenar en caché un objeto intermedio en una variable.

Otros principios

  • 1. Usa objetos literales para los parámetros siempre que sea posible.
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});
  • 2. No mezcles CSS con jQuery
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD
  • 3. No uses métodos obsoletos (deprecados).
  • 4. Cuando sea necesario, puedes usar métodos JS nativos.
$("#myId"); // 还是慢了些
document.getElementById("myId");

Recursos relacionados