jQuery jebakan untuk menghindari [ditutup]

Saya memulai proyek dengan jQuery.

Apa jebakan / kesalahan / kesalahpahaman / penyalahgunaan / penyalahgunaan yang Anda miliki dalam proyek jQuery Anda?

Menjadi tidak menyadari kinerja hit dan over selector alih-alih menugaskan mereka ke variabel lokal. Sebagai contoh:-

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

Daripada:-

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

Atau bahkan lebih baik dengan rantai : -

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

Saya menemukan ini saat mencerahkan ketika saya menyadari bagaimana tumpukan panggilan bekerja.

Edit: saran yang dimasukkan dalam komentar.

Memahami cara menggunakan konteks. Biasanya, pemilih jQuery akan mencari seluruh dokumen:

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

Tetapi Anda dapat mempercepat dengan mencari dalam konteks:

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

Jangan gunakan pemilih kelas kosong, seperti ini:

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

Ini pada akhirnya akan melihat setiap elemen untuk melihat apakah ia memiliki kelas "tombol".

Sebagai gantinya, Anda dapat membantu, seperti:

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

Saya belajar ini tahun lalu dari blog Rebecca Murphy

Update - Jawaban ini diberikan lebih dari 2 tahun yang lalu dan tidak benar untuk saat ini versi jQuery. Salah satu komentar termasuk tes untuk membuktikan ini. Ada juga versi terbaru dari tes yang menyertakan versi jQuery pada saat jawaban ini.

Cobalah untuk membagi fungsi anonim sehingga Anda dapat menggunakannya kembali.

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

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

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

• Hindari penyalahgunaan dokumen yang siap.
• Siapkan dokumen hanya untuk inisialisasi kode.
• Selalu ekstrak fungsi di luar dokumen siap sehingga mereka dapat digunakan kembali.

Saya telah melihat ratusan baris kode di dalam pernyataan ready doc. Jelek, tidak bisa dibaca, dan tidak mungkin dipertahankan.

Saat menggunakan $.ajaxfungsi untuk permintaan Ajax ke server, Anda harus menghindari menggunakan completeacara untuk memproses data respons. Ini akan memecat apakah permintaan itu berhasil atau tidak.

Daripada complete, gunakan success.

Lihat Acara Ajax dalam dokumen.

"Chaining" Animasi-acara dengan Callback.

Misalkan Anda ingin menghidupkan paragraf yang hilang setelah mengkliknya. Anda juga ingin menghapus elemen dari DOM sesudahnya. Anda mungkin berpikir Anda dapat dengan mudah mengaitkan metode ini:

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

Dalam contoh ini, .remove () akan dipanggil sebelum .fadeOut () telah selesai, menghancurkan efek gradasi-memudar Anda, dan hanya membuat elemen menghilang secara instan. Alih-alih, saat Anda ingin menjalankan perintah hanya setelah menyelesaikan sebelumnya, gunakan callback:

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

Parameter kedua .fadeOut () adalah fungsi anonim yang akan berjalan setelah animasi .fadeOut () selesai. Ini membuat pemudaran bertahap, dan penghapusan elemen berikutnya.

Jika Anda mengikat () acara yang sama beberapa kali, itu akan menyala beberapa kali. Saya biasanya selalu pergi unbind('click').bind('click')hanya untuk aman

Jangan menyalahgunakan plug-in.

Sebagian besar waktu Anda hanya perlu perpustakaan dan mungkin antarmuka pengguna. Jika Anda membuatnya sederhana kode Anda akan dapat dipertahankan dalam jangka panjang. Tidak semua plug-in didukung dan dipelihara, sebenarnya sebagian besar tidak. Jika Anda dapat meniru fungsionalitas menggunakan elemen inti saya sangat merekomendasikannya.

Plug-in mudah untuk dimasukkan ke dalam kode Anda, menghemat waktu Anda, tetapi ketika Anda akan membutuhkan sesuatu tambahan, itu ide yang buruk untuk memodifikasinya, karena Anda kehilangan kemungkinan pembaruan. Saat Anda menghemat di awal, Anda akan kehilangan nanti tentang mengubah plug-in yang sudah usang.

Pilih plug-in yang Anda gunakan dengan bijak. Terlepas dari perpustakaan dan antarmuka pengguna, saya selalu menggunakan $ .cookie , $ .form , $ .validate dan thickbox . Selebihnya saya lebih banyak mengembangkan plug-in saya sendiri.

Pitfall: Menggunakan loop bukan penyeleksi.

Jika Anda menemukan diri Anda meraih metode jQuery '.each' untuk beralih pada elemen DOM, tanyakan pada diri Anda apakah dapat menggunakan pemilih untuk mendapatkan elemen sebagai gantinya.

Informasi lebih lanjut tentang pemilih jQuery:
http://docs.jquery.com/Selector

Pitfall: JANGAN menggunakan alat seperti Firebug

Firebug praktis dibuat untuk debugging semacam ini. Jika Anda akan bergurau tentang DOM dengan Javascript, Anda memerlukan alat yang bagus seperti Firebug untuk memberi Anda visibilitas.

Informasi lebih lanjut tentang Firebug: http://getfirebug.com/

Gagasan hebat lainnya ada di episode Podcast Polimorfik ini: (jQuery Secrets dengan Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Kesalahpahaman dalam menggunakan pengidentifikasi ini dalam konteks yang benar. Misalnya:

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

Dan inilah salah satu contoh bagaimana Anda bisa menyelesaikannya:

$( "#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.
   })
});

Hindari mencari melalui seluruh DOM beberapa kali. Ini adalah sesuatu yang benar-benar dapat menunda skrip Anda.

Buruk:

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

Baik:

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

Buruk:

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

Baik:

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

Selalu cache $ (ini) ke variabel yang bermakna terutama dalam .each ()

Seperti ini

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

Mirip dengan apa yang dikatakan Repo Man, tetapi tidak cukup.

Ketika mengembangkan ASP.NET winforms, saya sering melakukannya

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

lupa tanda #. Bentuk yang benar adalah

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

Acara

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

tidak mengkloning salah satu peristiwa - Anda harus mengulang semuanya.

Sesuai JP clone (- clone ()) tidak mengulangi peristiwa jika Anda lulus benar.

Hindari beberapa kreasi objek jQuery yang sama

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

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

Saya mengatakan ini untuk JavaScript juga, tetapi jQuery, JavaScript tidak akan pernah menggantikan CSS.

Juga, pastikan situs tersebut dapat digunakan untuk seseorang dengan JavaScript dimatikan (tidak relevan hari ini dengan kembali pada hari itu, tetapi selalu menyenangkan untuk memiliki situs yang sepenuhnya dapat digunakan).

Membuat terlalu banyak manipulasi DOM. Meskipun metode .html (), .append (), .prepend (), dll. Sangat bagus, karena cara browser merender dan merender ulang halaman, menggunakannya terlalu sering akan menyebabkan perlambatan. Seringkali lebih baik untuk membuat html sebagai string, dan memasukkannya ke DOM satu kali, daripada mengubah DOM beberapa kali.

Dari pada:

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

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

Coba ini:

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

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

$parent.append(html);

Atau bahkan ini ($ wrapper adalah elemen yang baru dibuat yang belum disuntikkan ke DOM. Menambahkan node ke div wrapper ini tidak menyebabkan perlambatan, dan pada akhirnya kami menambahkan $ wrapper ke $ parent, hanya menggunakan satu manipulasi 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);

Menggunakan ClientID untuk mendapatkan id "nyata" dari kontrol dalam proyek ASP.NET.

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

Juga, jika Anda menggunakan jQuery di dalam SharePoint Anda harus memanggil jQuery.noConflict ().

Melewati ID alih-alih objek jQuery ke fungsi:

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

myFunc("someId");

Melewati set yang terbungkus jauh lebih fleksibel:

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

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

Penggunaan rantai yang berlebihan.

Lihat ini:

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

Penjelasan

Gunakan string akumulator-style

Menggunakan + operator, string baru dibuat dalam memori dan nilai gabungan ditetapkan untuknya. Hanya setelah ini hasilnya ditugaskan ke variabel. Untuk menghindari variabel perantara untuk hasil gabungan, Anda dapat langsung menetapkan hasil menggunakan + = operator. Lambat:

a += 'x' + 'y';

Lebih cepat:

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

Operasi primitif bisa lebih cepat daripada panggilan fungsi

Pertimbangkan untuk menggunakan operasi primitif alternatif di atas pemanggilan fungsi dalam loop dan fungsi kritis kinerja. Lambat:

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

Lebih cepat:

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

Baca Lebih Lanjut di Praktik Terbaik Kinerja JavaScript

Jika Anda ingin pengguna melihat entitas html di browser mereka, gunakan 'html' alih-alih 'teks' untuk menyuntikkan string Unicode, seperti:

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

dua sen saya)

Biasanya, bekerja dengan jquery berarti Anda tidak perlu khawatir tentang elemen DOM yang sebenarnya setiap saat. Anda dapat menulis sesuatu seperti ini - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})- dan kode ini akan dijalankan tanpa ada kesalahan.

Dalam beberapa kasus ini berguna, dalam beberapa kasus - tidak sama sekali, tetapi itu adalah fakta bahwa jquery cenderung, yah, ramah pertandingan kosong. Namun, replaceWithakan menimbulkan kesalahan jika seseorang mencoba menggunakannya dengan elemen yang bukan milik dokumen. Saya merasa agak kontra-intuitif.

Perangkap lain adalah, menurut pendapat saya, urutan node dikembalikan oleh prevAll () method - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Sebenarnya bukan masalah besar, tetapi kita harus mengingat fakta ini.

Jika Anda berencana untuk Ajax dalam banyak data, misalnya, 1500 baris tabel dengan 20 kolom, maka jangan pernah berpikir untuk menggunakan jQuery untuk memasukkan data itu ke dalam HTML Anda. Gunakan JavaScript biasa. jQuery akan terlalu lambat pada mesin yang lebih lambat.

Juga, separuh waktu jQuery akan melakukan hal-hal yang akan membuatnya lebih lambat, seperti mencoba mengurai tag skrip dalam HTML yang masuk, dan menangani kebiasaan browser. Jika Anda ingin kecepatan penyisipan yang cepat, tetap menggunakan JavaScript biasa.

Menggunakan jQuery dalam proyek kecil yang dapat diselesaikan hanya dengan beberapa baris JavaScript biasa.

Tidak memahami acara yang mengikat. JavaScript dan jQuery bekerja secara berbeda.

Dengan permintaan populer, sebuah contoh:

Di jQuery:

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

Tanpa jQuery:

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

Pada dasarnya kait yang diperlukan untuk JavaScript tidak lagi diperlukan. Yaitu menggunakan inline markup (onClick, dll) karena Anda bisa menggunakan ID dan kelas yang biasanya dimanfaatkan pengembang untuk keperluan CSS.