ข้อผิดพลาด jQuery เพื่อหลีกเลี่ยง [ปิด]

ฉันเริ่มต้นโครงการด้วย jQuery

คุณมีข้อผิดพลาด / ข้อผิดพลาด / ความเข้าใจผิด / การละเมิด / การใช้ผิดประเภทในโครงการ jQuery ของคุณอย่างไร?

การไม่ทราบถึงประสิทธิภาพการทำงานและการใช้ตัวเลือกมากเกินไปแทนที่จะกำหนดให้กับตัวแปรท้องถิ่น ตัวอย่างเช่น:-

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

ค่อนข้างมากกว่า:-

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

หรือดียิ่งขึ้นด้วยการผูกมัด : -

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

ฉันพบสิ่งนี้เป็นช่วงเวลาที่แจ่มใสเมื่อฉันรู้ว่าการโทรสแต็คทำงานอย่างไร

แก้ไข: คำแนะนำที่รวมอยู่ในความคิดเห็น

ทำความเข้าใจวิธีใช้บริบท โดยปกติตัวเลือก jQuery จะค้นหาเอกสารทั้งหมด:

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

แต่คุณสามารถเร่งความเร็วได้โดยค้นหาในบริบท:

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

อย่าใช้ตัวเลือกคลาสเปลือยเช่นนี้:

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

สิ่งนี้จะจบลงที่การดูองค์ประกอบทั้งหมดเพื่อดูว่ามีปุ่ม "ระดับ" หรือไม่

แต่คุณสามารถช่วยได้เช่น:

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

ฉันได้เรียนรู้เมื่อปีที่แล้วจากบล็อกของ Rebecca Murphy

อัปเดต - คำตอบนี้ให้มานานกว่า 2 ปีแล้วและไม่ถูกต้องสำหรับjQuery เวอร์ชันปัจจุบัน หนึ่งในความคิดเห็นรวมถึงการทดสอบเพื่อพิสูจน์สิ่งนี้ นอกจากนี้ยังมีการทดสอบเวอร์ชันอัปเดตซึ่งรวมถึงเวอร์ชันของ jQuery ณ เวลาที่ตอบคำถามนี้

พยายามแยกฟังก์ชั่นที่ไม่ระบุชื่อออกเพื่อให้คุณสามารถนำกลับมาใช้ใหม่

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

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

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

• หลีกเลี่ยงการใช้เอกสารในทางที่ผิด
• เตรียมเอกสารให้พร้อมสำหรับการเริ่มต้นรหัสเท่านั้น
• แยกฟังก์ชั่นออกนอกเอกสารพร้อมเสมอเพื่อให้สามารถนำกลับมาใช้ใหม่ได้

ฉันเห็นโค้ดหลายร้อยบรรทัดในคำสั่ง doc doc น่าเกลียดอ่านไม่ได้และเป็นไปไม่ได้ที่จะรักษา

ในขณะที่ใช้$.ajaxฟังก์ชั่นสำหรับคำขอAjaxไปยังเซิร์ฟเวอร์คุณควรหลีกเลี่ยงการใช้completeเหตุการณ์เพื่อประมวลผลข้อมูลการตอบสนอง มันจะเริ่มต้นไม่ว่าจะเป็นคำขอที่ประสบความสำเร็จหรือไม่

แทนที่จะใช้completesuccess

ดูAjax Eventsในเอกสาร

"Chaining" Animation - events กับ Callbacks

สมมติว่าคุณต้องการทำให้ย่อหน้าหายไปเมื่อคลิก คุณต้องการลบองค์ประกอบออกจาก DOM ในภายหลัง คุณอาจคิดว่าคุณสามารถเชื่อมโยงวิธีการต่าง ๆ :

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

ในตัวอย่างนี้. Remove () จะถูกเรียกใช้ก่อน. fadeOut () ได้เสร็จสิ้นแล้วทำลายเอฟเฟกต์ที่ค่อยๆจางหายไปของคุณและทำให้องค์ประกอบหายไปทันที แต่เมื่อคุณต้องการเรียกใช้คำสั่งเมื่อเสร็จสิ้นก่อนหน้านี้ให้ใช้การติดต่อกลับ:

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

พารามิเตอร์ที่สองของ. fadeOut () เป็นฟังก์ชั่นนิรนามที่จะทำงานเมื่อภาพเคลื่อนไหว. fadeOut () เสร็จสมบูรณ์ สิ่งนี้ทำให้การค่อย ๆ จางหายไปและการกำจัดองค์ประกอบในภายหลัง

หากคุณผูก () เหตุการณ์เดียวกันหลายครั้งมันจะเริ่มทำงานหลายครั้ง ฉันมักจะไปunbind('click').bind('click')เพื่อความปลอดภัยเสมอ

ห้ามใช้ปลั๊กอินในทางที่ผิด

ส่วนใหญ่คุณจะต้องใช้ไลบรารีและอินเทอร์เฟซผู้ใช้ หากคุณทำให้มันง่ายรหัสของคุณจะสามารถรักษาได้ในระยะยาว ปลั๊กอินทั้งหมดไม่ได้รับการสนับสนุนและดูแลรักษาจริง ๆ แล้วส่วนใหญ่ไม่ใช่ปลั๊กอิน หากคุณสามารถเลียนแบบการทำงานโดยใช้องค์ประกอบหลักฉันขอแนะนำอย่างยิ่ง

ปลั๊กอินง่ายต่อการแทรกในรหัสของคุณประหยัดเวลา แต่เมื่อคุณต้องการอะไรเพิ่มเติมมันเป็นความคิดที่ไม่ดีที่จะแก้ไขพวกเขาเนื่องจากคุณสูญเสียการปรับปรุงที่เป็นไปได้ เวลาที่คุณบันทึกเมื่อเริ่มต้นคุณจะหลวมในภายหลังเมื่อเปลี่ยนปลั๊กอินที่เลิกใช้แล้ว

เลือกปลั๊กอินที่คุณใช้อย่างชาญฉลาด นอกเหนือจากห้องสมุดและส่วนต่อประสานผู้ใช้ฉันใช้$ .cookie , $ .form , $ .validateและthickboxอย่างต่อเนื่อง ส่วนที่เหลือฉันพัฒนาปลั๊กอินของตัวเองเป็นส่วนใหญ่

หลุมพราง: การใช้ลูปแทนตัวเลือก

หากคุณพบว่าตัวเองกำลังเข้าถึงวิธี jQuery '.each' เพื่อวนซ้ำองค์ประกอบ DOM ให้ถามตัวเองว่าสามารถใช้ตัวเลือกเพื่อรับองค์ประกอบแทนได้หรือไม่

ข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก jQuery:
http://docs.jquery.com/Selectors

หลุมพราง: ไม่ได้ใช้เครื่องมือเช่น Firebug

Firebug ถูกสร้างขึ้นจริงสำหรับการดีบักแบบนี้ หากคุณกำลังล้อเล่นกับ DOM ด้วย Javascript คุณต้องมีเครื่องมือที่ดีเช่น Firebug เพื่อให้คุณมองเห็นได้

ข้อมูลเพิ่มเติมเกี่ยวกับ Firebug: http://getfirebug.com/

แนวคิดที่ยอดเยี่ยมอื่น ๆ อยู่ในตอนนี้ของ Podcast Polymorphic: (ความลับ jQuery กับ Dave Ward) http://polymorphicpodcast.com/shows/jquery/

ความเข้าใจผิดในการใช้ตัวระบุนี้ในบริบทที่ถูกต้อง ตัวอย่างเช่น

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

และนี่คือหนึ่งในตัวอย่างที่คุณจะแก้ปัญหา:

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

หลีกเลี่ยงการค้นหาผ่าน DOM ทั้งหมดหลายครั้ง นี่คือสิ่งที่สามารถทำให้สคริปต์ของคุณล่าช้าได้จริง ๆ

แย่:

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

ดี:

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

แย่:

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

ดี:

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

แคช $ (นี้) กับตัวแปรที่มีความหมายเสมอโดยเฉพาะใน. each ()

แบบนี้

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

คล้ายกับสิ่งที่ Repo Man พูด แต่ก็ไม่มากนัก

เมื่อพัฒนา ASP.NET winforms ฉันมักจะทำ

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

ลืมเครื่องหมาย # แบบฟอร์มที่ถูกต้องคือ

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

เหตุการณ์ที่เกิดขึ้น

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

ไม่ได้คัดลอกเหตุการณ์ใด ๆ - คุณต้องปฏิเสธพวกเขาทั้งหมด

ตาม commen t - clone () ของ JPจะปฏิเสธกิจกรรมหากคุณผ่านจริง

หลีกเลี่ยงการสร้างวัตถุ jQuery เดียวกันหลายรายการ

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

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

ฉันพูดแบบนี้สำหรับ JavaScript เช่นกัน แต่ jQuery, JavaScript ไม่ควรแทนที่ CSS

นอกจากนี้ตรวจสอบให้แน่ใจว่าไซต์นั้นสามารถใช้งานได้สำหรับบางคนที่ปิด JavaScript (ไม่เกี่ยวข้องเท่าวันนี้ย้อนหลังไปในวัน แต่ควรจะมีไซต์ที่ใช้ได้อย่างสมบูรณ์เสมอ)

ทำให้การเปลี่ยนแปลง DOM มากเกินไป ในขณะที่วิธีการ. html (), .append (), .prepend () ฯลฯ นั้นยอดเยี่ยมเนื่องจากวิธีที่เบราว์เซอร์แสดงผลและแสดงหน้าซ้ำอีกครั้งการใช้งานบ่อยเกินไปจะทำให้การทำงานช้าลง เป็นการดีกว่าถ้าจะสร้าง html เป็นสตริงและรวมไว้ใน DOM หนึ่งครั้งแทนที่จะเปลี่ยน DOM หลายครั้ง

แทน:

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

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

ลองสิ่งนี้:

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

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

$parent.append(html);

หรือแม้กระทั่งสิ่งนี้ ($ wrapper เป็นองค์ประกอบที่สร้างขึ้นใหม่ที่ยังไม่ได้ถูกฉีดเข้าไปยัง DOM การผนวกโหนดในส่วน wrapper นี้ไม่ทำให้เกิดความล่าช้าและท้ายที่สุดเราผนวก $ wrapper เป็น $ parent โดยใช้การจัดการ 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);

ใช้ ClientID เพื่อรับรหัส "ของจริง" ของตัวควบคุมในโครงการ ASP.NET

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

นอกจากนี้หากคุณใช้ jQuery ใน SharePoint คุณต้องโทร jQuery.noConflict ()

ผ่าน ID แทน jQuery วัตถุไปยังฟังก์ชั่น:

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

myFunc("someId");

ผ่านชุดห่อมีความยืดหยุ่นมากขึ้น:

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

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

การใช้มากเกินไปของการผูกมัด

ดูนี่:

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

คำอธิบาย

ใช้สายอักขระแบบตัวสะสม

การใช้ตัวดำเนินการ + สตริงใหม่จะถูกสร้างขึ้นในหน่วยความจำและมีการกำหนดค่าการต่อข้อมูล หลังจากนี้ผลลัพธ์จะถูกกำหนดให้กับตัวแปร เพื่อหลีกเลี่ยงตัวแปรกลางสำหรับผลลัพธ์การต่อข้อมูลคุณสามารถกำหนดผลลัพธ์โดยตรงโดยใช้ + = ตัวดำเนินการ ช้า:

a += 'x' + 'y';

ได้เร็วขึ้น:

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

การดำเนินการดั้งเดิมอาจเร็วกว่าการเรียกใช้ฟังก์ชัน

พิจารณาใช้การดำเนินการดั้งเดิมทางเลือกเหนือการเรียกใช้ฟังก์ชั่นในลูปและฟังก์ชั่นที่สำคัญ ช้า:

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

ได้เร็วขึ้น:

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

อ่านเพิ่มเติมได้ที่JavaScript Best Practices

หากคุณต้องการให้ผู้ใช้เห็นเอนทิตี html ในเบราว์เซอร์ของพวกเขาใช้ 'html' แทน 'text' เพื่อฉีดสตริง Unicode เช่น:

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

สองเซ็นต์ของฉัน)

โดยปกติแล้วการทำงานกับ jquery หมายความว่าคุณไม่ต้องกังวลเกี่ยวกับองค์ประกอบ DOM จริงตลอดเวลา คุณสามารถเขียนสิ่งนี้ - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})และรหัสนี้จะทำงานโดยไม่ทิ้งข้อผิดพลาดใด ๆ

ในบางกรณีสิ่งนี้มีประโยชน์ในบางกรณี - ไม่ใช่ทั้งหมด แต่เป็นข้อเท็จจริงที่ว่า jquery มีแนวโน้มที่จะเป็นมิตรการแข่งขันที่ว่างเปล่า แต่replaceWithจะโยนข้อผิดพลาดหากพยายามใช้กับองค์ประกอบที่ไม่ได้เป็นของเอกสาร ฉันคิดว่ามันค่อนข้างตอบโต้ได้ง่าย

อันตรายก็คือในความคิดของฉันคำสั่งของโหนดที่ส่งกลับโดย prevAll () วิธีการ $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()- ไม่ใช่เรื่องใหญ่จริง แต่เราควรระลึกถึงความจริงข้อนี้

หากคุณวางแผนที่จะใช้ Ajax ในข้อมูลจำนวนมากเช่นพูดว่า 1,500 แถวของตารางที่มี 20 คอลัมน์อย่าคิดแม้แต่การใช้ jQuery เพื่อแทรกข้อมูลนั้นลงใน HTML ของคุณ ใช้ JavaScript ธรรมดา jQuery จะช้าเกินไปสำหรับเครื่องที่ช้าลง

นอกจากนี้ครึ่งหนึ่งของเวลา jQuery จะทำสิ่งต่าง ๆ ที่จะทำให้ช้าลงเช่นพยายามแยกแท็กสคริปต์ใน HTML ที่เข้ามาและจัดการกับนิสัยใจคอของเบราว์เซอร์ หากคุณต้องการความเร็วในการแทรกที่รวดเร็วให้ใช้ JavaScript ธรรมดา

การใช้ jQuery ในโครงการขนาดเล็กที่สามารถทำให้เสร็จได้ด้วย JavaScript ธรรมดาสองบรรทัด

ไม่เข้าใจเหตุการณ์ผูกพัน JavaScript และ jQuery ทำงานแตกต่างกัน

ตามความต้องการที่เป็นที่นิยมตัวอย่าง:

ใน jQuery:

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

ไม่มี jQuery:

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

โดยทั่วไปตะขอที่จำเป็นสำหรับ JavaScript นั้นไม่จำเป็นอีกต่อไป นั่นคือการใช้มาร์กอัปแบบอินไลน์ (onClick ฯลฯ ) เพราะคุณสามารถใช้ ID และคลาสที่นักพัฒนาจะใช้ประโยชน์จาก CSS ตามปกติ