Im Folgenden sind die grundlegenden Standards und Best Practices für das Schreiben von jQuery-Code aufgeführt. Sie enthalten keine Standards und Best Practices für natives JS.

jQuery laden

1. Versuchen Sie, jQuery über ein CDN zu laden.

<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>

Die öffentliche CDN-Bibliothek von Baidu dürfte in allen Regionen Chinas die schnellste sein, und sie enthält viele JS-Bibliotheken. Für alle empfehlenswert.

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

Der JS-Bibliotheksbeschleunigungsdienst von Upyun hat in China eine ordentliche Zugriffsgeschwindigkeit, aber leider gibt es relativ wenige JS-Bibliotheken.

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

Die JS/CSS-Bibliothek von Sina, auch bekannt als öffentliche Bibliothek von Sina SAE, hat in China eine ordentliche Zugriffsgeschwindigkeit und eine umfassende Sammlung von JS-Bibliotheken. Für alle empfehlenswert.

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

jQuery-Variablen

• 1. Alle Variablen, die jQuery-Objekte verwenden oder zwischenspeichern, sollten beginnen mit$das Präfix.
• 2. Speichern Sie die von jQuery-Selektoren zurückgegebenen Objekte immer zur Wiederverwendung in lokalen Variablen.

  var $myDiv = $("#myDiv");
  $myDiv.click(function(){....});

• 3. Verwenden Sie die camelCase-Benennung für Variablen.

Selektoren

• 1. Verwenden Sie ID-Selektoren, wann immer verfügbar, da sie interndocument.getElementById()。
• 2. Wenn Sie Klassen-/Pseudoklassen-Selektoren verwenden, hängen Sie immer einen Elementtyp an den Selektor an, um zu vermeiden, dass der gesamte DOM-Baum durchsucht wird.

 // BAD 在整个DOM树中扫描"products"类名
var $products = $(".products");

// GOOD 只在DIV元素中扫描"products"类名
var $products = $("div.products");

• 3. Verwenden Sie in ID > Selektoren auf Kindebene diefind()Methode. Weil die erste Hälfte des Selektors die Sizzle-Selektor-Engine nicht verwendet, um Elemente zu finden.

// BAD, Sizzle选择器引擎查找层级
var $productIds = $("#products div.id");

// GOOD, 只有div.id走Sizzle选择器引擎
var $productIds = $("#products").find("div.id");

• 4. Der hintere Teil des Selektors sollte spezifischer sein als der vordere Teil.

// 未优化
$("div.data .gonzalez");

// 优化
$(".data td.gonzalez");

• 5. Vermeiden Sie redundante Selektoren.

$(".data table.attendees td.gonzalez");

// Better: 有必要时要去掉中间不必要的内容
$(".data td.gonzalez");

• 6. Fügen Sie Selektoren Kontext hinzu.

// 要扫描整个DOM树寻找
$('.class');

// 只在#class-container里扫描
$('.class', '#class-container');

• 7. Vermeiden Sie die Verwendung von Wildcard-Selektoren.

$('div.container > *'); // BAD
$('div.container').children(); // BETTER

• 8. Vermeiden Sie implizite Wildcard-Selektoren. Wenn die folgende Eingabe weggelassen wird, wird der Wildcard-Selektor implizit verwendet.

$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD

• 9. ID-Selektoren verwendendocument.getElementById(). ID-Selektoren müssen nicht verschachtelt werden.

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD

DOM-Operationen

• 1. Trennen Sie vorhandene DOM-Elemente immer zuerst vom DOM, führen Sie dann die Operationen aus und hängen Sie sie schließlich wieder an das DOM an.

var $myList = $("#list-container > ul").detach();
//...针对$myList的许多DOM操作
$myList.appendTo("#list-container");

• 2. Verwenden Sie String-Verkettung oder array.join() anstelle der Methode .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. Arbeiten Sie nicht mit unbekannten Elementen.

// BAD: 这个函数内部要先执行3个函数，才发现选择器选择到的可能是空内容
$("#nosuchthing").slideUp();

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

Ereignisse

• 1. Verwenden Sie nur eine Document-Ready-Funktion pro Seite. Das ist gut für das Debugging.
• 2. Verwenden Sie keine anonymen Funktionen, um Events zu binden. Anonyme Funktionen sind nicht förderlich für Debugging, Wartung, Tests und Wiederverwendung.

$("#myLink").on("click", function(){...}); // BAD

// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

• 3. Document-Ready-Funktionen sollten keine anonymen Funktionen sein. Anonyme Funktionen können nicht wiederverwendet oder getestet werden.

$(function(){ .. }); // BAD: 不容易复用也不利于测试

// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready里可以初始化变量和调用其他初始化函数
}

• 4. Document-Ready-Funktionen sollten in externen Dateien abgelegt werden; rufen Sie sie nach anderen Initialisierungseinstellungen in Inline-JS auf.

<script src="my-document-ready.js.html"></script>
<script>
  // 任何其他需要设置的全局变量
  $(document).ready(initPage); // or $(initPage);
</script>

• 5. Fügen Sie kein Verhalten (Inline-JS) in HTML-Dateien hinzu; das ist ein Albtraum für das Debugging. Verwenden Sie immer jQuery, um Events zu binden, und es wird später einfach sein, Events zu entbinden.

<a id="myLink" href="../index.html" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD

• 6. Verwenden Sie bei Bedarf benutzerdefinierte Namespaces für Events. Dadurch lassen sich bestimmte Events auf einem DOM-Element einfach entbinden, ohne andere Events auf diesem Element zu beeinflussen.

$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 后面会很容易的解绑这个特定的点击事件
$("#myLink").unbind("click.mySpecialClick");

Ajax

• 1. Vermeiden Sie die Verwendung von.getJSON()und.get(), verwenden Sie nur$.ajax(), die ersten beiden verwenden intern Letzteres.
• 2. Nichthttpsauf Websites verwendenhttpAnfragen. Bevorzuge protokollrelative URLs (entferne http/https aus der URL).
• 3. Setze Anfrageparameter nicht in die URL; setze sie stattdessen in das data-Objekt.

// 不可读
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// 可读
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

• 4. Lege den Datentyp explizit fest,dataTypedamit leicht zu erkennen ist, welche Art von Daten du gerade verarbeitest.
• 5. Wenn du Ereignisse an DOM-Elemente bindest, die per Ajax geladen wurden, versuche, Event-Delegation zu verwenden. Der Vorteil von Event-Delegation ist, dass Elemente, die später per Ajax zum DOM hinzugefügt werden, ebenfalls auf Ereignisse reagieren können.

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

• 6. Verwende Promises.

$.ajax({ ... }).then(successHandler, failureHandler);

// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

• 7. Ajax-Vorlagencode:

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);

Effekte und Animationen

1. Verwende einen einheitlichen Ansatz, um Animationen zu implementieren.

2. Übermäßiger Einsatz von Animationseffekten ist zu vermeiden, es sei denn, es dient der Benutzererfahrung.

• Versuche, einfache show/hide/toggle/slideUp/slideDown-Methoden zu verwenden, um Elemente anzuzeigen und auszublenden.
• Versuche, vordefinierte Animationsdauern zu verwenden:slow,fastoder400

Plugins

• 1. Wähle immer Plugins, die gut gepflegt, gut dokumentiert, gut getestet sind und Community-Unterstützung haben.
• 2. Überprüfe sorgfältig die Kompatibilität des Plugins mit der jQuery-Version, die du verwendest.
• 3. Alle wiederverwendbaren/generischen Komponenten sollten in jQuery-Plugins ausgelagert werden.

Verkettung

• 1. Versuche Verkettung zu verwenden, anstatt Variablen zwischenzuspeichern oder Selektor-Methoden mehrfach aufzurufen.

$("#myDiv").addClass("error").show();

• 2. Wenn eine Kette drei Aufrufe überschreitet oder aufgrund von Event-Bindung komplex wird, verwende Zeilenumbrüche und Einrückung, um den Code lesbar zu halten.

$("#myLink")
  .addClass("bold")
  .on("click", myClickHandler)
  .on("mouseover", myMouseOverHandler)
  .show();

• 3. Bei längeren Ketten ist es akzeptabel, ein Zwischenobjekt in einer Variablen zwischenzuspeichern.

Weitere Prinzipien

• 1. Verwende nach Möglichkeit Objektliterale für Parameter.

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

• 2. Mische CSS nicht in jQuery.

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

• 3. Verwende keine veralteten Methoden.
• 4. Verwende native JS-Methoden, wenn nötig.

$("#myId"); // 还是慢了些
document.getElementById("myId");

Verwandte Ressourcen

• jQuery-Tutorial