7 Amalan Terbaik jQuery_jquery

Dengan peningkatan dalam bilangan aplikasi web yang kaya dan jangkaan tinggi pengguna untuk respons interaktif yang pantas, pembangun telah mula menggunakan perpustakaan JavaScript untuk menyelesaikan beberapa tugasan berulang dengan cepat dan cekap. Salah satu perpustakaan JavaScript yang paling popular ialah jQuery. Tetapi bilangan besar aplikasi jQuery telah membawa soalan lain: Apakah amalan terbaik dan apakah amalan buruk apabila menggunakan perpustakaan JavaScript?

Latar belakang

Dalam artikel ini, saya akan memperkenalkan anda kepada beberapa amalan baik (sekurang-kurangnya pada pendapat saya) semasa menulis, menyahpepijat dan menyemak kod JavaScript. Malah, saya memilih 7 daripada senario yang paling biasa.

1 Gunakan CDN dan alamat sandarannya (sandar)

CDN bermaksud Rangkaian Penghantaran Kandungan dan merupakan pelayan yang menyimpan cache fail JavaScript. Selepas menggunakan CDN, aplikasi anda boleh menggunakan cache CDN dan bukannya memuatkan semula fail perpustakaan daripada pelayan anda setiap kali pengguna baharu memulakan permintaan. Google, Microsoft dan JQuery semuanya menyediakan perkhidmatan CDN.

Memandangkan rangkaian tidak selalunya 100% boleh dipercayai dan pelayan mungkin rosak atas sebab tertentu, anda perlu memastikan bahawa aplikasi anda masih boleh berjalan seperti biasa walaupun perkara ini berlaku. Pada masa ini kita perlu menggunakan alamat sandaran: apabila aplikasi tidak dapat mencari perpustakaan cache, ia akan kembali dan menggunakan fail pelayan.

CDN Google adalah seperti ini:

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

Microsoft CDN adalah seperti ini:

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

Perlu diambil perhatian bahawa kami tidak menyatakan protokol URL sebagai http tetapi menggunakan //. Ini kerana pelayan CDN menyokong http dan https Jika tapak web anda mempunyai pensijilan SSL, anda boleh memuatkan fail seperti biasa tanpa pengubahsuaian.

Selain itu, seperti yang saya nyatakan sebelum ini, kami juga memerlukan alamat sandaran sekiranya terdapat masalah dengan pelayan CDN.

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

Sudah tentu, anda juga boleh menggunakan Require untuk mengkonfigurasi jQuery yang anda perlukan, tetapi saya fikir ini bagus.

2. Hadkan interaksi DOM

Memanipulasi pepohon DOM dengan JavaScript mempunyai kos prestasi. Perkara yang sama berlaku untuk jQuery. Jadi, cuba kurangkan interaksi dengan DOM. Semasa saya membantu rakan sekerja saya meningkatkan kelajuan memaparkan data, saya melihat dia menggunakan pemilih di dalam gelung. Ini adalah pembunuh prestasi! Inilah yang dia tulis:

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

Apa masalahnya? Pada pandangan pertama, tidak ada yang salah dengannya. Dan rakan sekerja saya juga berkata bahawa kod ini sangat menyeronokkan untuk dijalankan! Saya sangat marah! Apabila TotalActions kurang daripada 50, tiada masalah yang diperhatikan tetapi apabila ia mencapai 25,000, kelajuannya menjadi sangat perlahan Sebabnya (saya juga mendapatinya melalui Google) ialah interaksi DOM diletakkan dalam gelung.

Untuk ciri ini, (selepas banyak percubaan yang gagal) saya menggantikan interaksi DOM langsung dalam gelung dengan operasi tolak pada tatasusunan, dan kemudian menyertai tatasusunan dengan rentetan kosong sebagai pembatas. Akhirnya, program ini sudah tentu menjadi lebih lancar dan lebih cekap.

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

3. Cache

Perkara yang paling penting dan tersendiri tentang jQuery ialah pemilihnya dan cara untuk mencari elemen HTML dalam pepohon DOM. Walau bagaimanapun, saya telah melihat banyak kali bahawa sesetengah pembangun memanggil pemilih yang sama beberapa kali dalam fungsi yang sama, seperti $("#divid"). Walaupun jQuery memilih elemen dengan cepat, jangan cari elemen yang sama setiap kali. Jadi, anda boleh cache elemen anda seperti ini:

var $divId = $("#divId")

Kemudian dalam kod berikut, anda boleh menggunakan $divId.

Untuk kod di bawah:

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

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

Kami boleh mengubah suainya seperti ini dan menggunakan sintaks rantaian untuk menjadikannya kelihatan lebih cantik:

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

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

Tetapi sekali lagi, anda tidak perlu menyimpan segala-galanya setiap masa. Lihat contoh di bawah:

$("#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应用程序，真正的帮助到大家。