7 Best Practices für jQuery_jquery

Angesichts der zunehmenden Anzahl umfangreicher Webanwendungen und der hohen Erwartungen der Benutzer an schnelle interaktive Antworten haben Entwickler begonnen, JavaScript-Bibliotheken zu verwenden, um einige sich wiederholende Aufgaben schnell und effizient zu erledigen. Eine der beliebtesten JavaScript-Bibliotheken ist jQuery. Aber die große Anzahl von Anwendungen von jQuery hat eine andere Frage aufgeworfen: Was sind die Best Practices und was sind die Bad Practices bei der Verwendung von JavaScript-Bibliotheken?

Hintergrund

In diesem Artikel stelle ich Ihnen einige bewährte Methoden (zumindest meiner Meinung nach) beim Schreiben, Debuggen und Überprüfen von JavaScript-Code vor. Tatsächlich habe ich sieben der häufigsten Szenarien ausgewählt.

1. Verwenden Sie CDN und seine Fallback-Adresse (Fallback)

CDN steht für Content Delivery Network und ist ein Server, der JavaScript-Dateien zwischenspeichert. Nachdem Sie ein CDN verwendet haben, kann Ihre Anwendung den CDN-Cache verwenden, anstatt die Bibliotheksdateien jedes Mal neu von Ihrem Server laden zu müssen, wenn ein neuer Benutzer eine Anfrage initiiert. Google, Microsoft und JQuery bieten alle CDN-Dienste an.

Da das Netzwerk nicht immer 100 % zuverlässig ist und der Server aus irgendeinem Grund ausfallen kann, müssen Sie sicherstellen, dass Ihre Anwendung auch in solchen Fällen weiterhin normal ausgeführt werden kann. Zu diesem Zeitpunkt müssen wir die Fallback-Adresse verwenden: Wenn die Anwendung die Cache-Bibliothek nicht finden kann, greift sie zurück und verwendet die Serverdatei.

Google CDN sieht so aus:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN sieht so aus:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

Es ist zu beachten, dass wir das URL-Protokoll nicht als http angegeben haben, sondern // verwendet haben. Dies liegt daran, dass der CDN-Server http und https unterstützt. Wenn Ihre Website über eine SSL-Zertifizierung verfügt, können Sie Dateien normal und ohne Änderungen laden.

Außerdem benötigen wir, wie ich bereits erwähnt habe, eine Fallback-Adresse für den Fall, dass es ein Problem mit dem CDN-Server gibt.

<script>Window.JQuery || document.write(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

Natürlich können Sie Require auch verwenden, um die benötigte jQuery zu konfigurieren, aber ich finde das gut.

2. Beschränken Sie die DOM-Interaktion

Die Manipulation des DOM-Baums mit JavaScript verursacht Leistungseinbußen. Das Gleiche gilt für jQuery. Versuchen Sie also, die Interaktion mit dem DOM zu minimieren. Als ich einem Kollegen dabei half, die Geschwindigkeit der Datenanzeige zu verbessern, sah ich, wie er einen Selektor innerhalb einer Schleife verwendete. Das ist ein Leistungskiller! Das hat er geschrieben:

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

Was ist das Problem? Auf den ersten Blick ist daran nichts auszusetzen. Und meine Kollegen sagten auch, dass die Ausführung dieses Codes sehr viel Spaß macht! Ich bin so sauer! Wenn TotalActions weniger als 50 beträgt, wird kein Problem bemerkt. Wenn es jedoch 25.000 erreicht, verlangsamt sich die Geschwindigkeit erheblich. Der Grund (ich habe es auch über Google gefunden) ist, dass die DOM-Interaktion in die Schleife eingefügt wird.

Für diese Funktion habe ich (nach vielen fehlgeschlagenen Versuchen) die direkte DOM-Interaktion in der Schleife durch eine Push-Operation für ein Array ersetzt und die Arrays dann mit einer leeren Zeichenfolge als Trennzeichen verbunden. Am Ende ist das Programm sicherlich reibungsloser und effizienter geworden.

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3. Cache

Das Wichtigste und Besondere an jQuery ist sein Selektor und die Möglichkeit, HTML-Elemente im DOM-Baum zu finden. Ich habe jedoch oft gesehen, dass einige Entwickler denselben Selektor mehrmals in derselben Funktion aufrufen, z. B. $("#divid"). Obwohl jQuery Elemente sehr schnell auswählt, sollten Sie nicht jedes Mal nach demselben Element suchen. Sie können Ihre Elemente also wie folgt zwischenspeichern:

var $divId = $("#divId")

Dann können Sie im folgenden Code $divId verwenden.

Für den Code unten:

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

Wir können es wie folgt ändern und die Kettensyntax verwenden, um es schöner aussehen zu lassen:

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

Aber andererseits müssen Sie nicht jedes Mal alles zwischenspeichern. Schauen Sie sich das Beispiel unten an:

$("#link").click(function()
{
  $(this).addClass("gored");
}

在这里，我既没有用 $(“#link”)，或者将其缓存起来，而是使用的$(this)。因为在这个例子中，我操作的对象就是这个链接本身。

4、find 和 filter

最近，在使用find()来获取jQuery对象结合的时候，我产生了一些困惑。然后我发现，这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要：

find: 将会从选定的元素开始，一直向下查找DOM树

filter: 是在jQuery集合当中查找
5、end()

当在jQuery集合中进行链式操作的时候，我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS，然后希望回到表格对象，对其添加一些样式。在你对行应用完样式之后，只要使用end()方法，你就会自动回到表格对象，然后随意的对其添加样式吧！

（译者注：find()、filter()和end()原文是大写，其实应该是小写）

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候，你可以使用对象字面量方式来提升性能。比如这段代码：

$("#myimg").attr("src", "thepath").attr("alt", "the alt text");

变成下面这样之后，不仅避免了操作DOM元素，而且还不用多次调用相关的设置方法：

$("#myimg").attr({"src": "thepath", "alt": "the alt text"});

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序，真正的帮助到大家。