Cạm bẫy jQuery để tránh [đóng]

Tôi đang bắt đầu một dự án với jQuery.

Những cạm bẫy / lỗi / quan niệm sai lầm / lạm dụng / lạm dụng bạn đã có trong dự án jQuery của bạn là gì?

Không biết về hiệu suất nhấn và lạm dụng các bộ chọn thay vì gán chúng cho các biến cục bộ. Ví dụ:-

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

Thay vì: -

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

Hoặc thậm chí tốt hơn với chuỗi : -

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

Tôi thấy đây là khoảnh khắc khai sáng khi tôi nhận ra cách các ngăn xếp cuộc gọi hoạt động.

Chỉnh sửa: kết hợp các đề xuất trong ý kiến.

Hiểu cách sử dụng bối cảnh. Thông thường, một bộ chọn jQuery sẽ tìm kiếm toàn bộ tài liệu:

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

Nhưng bạn có thể tăng tốc mọi thứ bằng cách tìm kiếm trong một ngữ cảnh:

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

Không sử dụng bộ chọn lớp trần, như thế này:

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

Điều này cuối cùng sẽ xem xét từng yếu tố để xem liệu nó có một lớp "nút" hay không.

Thay vào đó, bạn có thể giúp nó ra, như:

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

Tôi đã học được điều này năm ngoái từ blog của Rebecca Murphy

Cập nhật - Câu trả lời này đã được đưa ra hơn 2 năm trước và không chính xác cho phiên bản hiện tại của jQuery. Một trong những ý kiến ​​bao gồm một bài kiểm tra để chứng minh điều này. Ngoài ra còn có một phiên bản cập nhật của bài kiểm tra bao gồm phiên bản jQuery tại thời điểm trả lời này.

Cố gắng tách ra các chức năng ẩn danh để bạn có thể sử dụng lại chúng.

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

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

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

• Tránh lạm dụng tài liệu đã sẵn sàng.
• Giữ tài liệu sẵn sàng chỉ để khởi tạo mã.
• Luôn trích xuất các chức năng bên ngoài tài liệu sẵn sàng để chúng có thể được sử dụng lại.

Tôi đã thấy hàng trăm dòng mã bên trong câu lệnh sẵn sàng doc. Xấu xí, không thể đọc được và không thể duy trì.

Trong khi sử dụng $.ajaxchức năng cho các yêu cầu Ajax tới máy chủ, bạn nên tránh sử dụng completesự kiện để xử lý dữ liệu phản hồi. Nó sẽ kích hoạt cho dù yêu cầu có thành công hay không.

Thay vì complete sử dụngsuccess .

Xem các sự kiện Ajax trong các tài liệu.

"Chuỗi" Hoạt hình - sự kiện với Callbacks.

Giả sử bạn muốn làm động một đoạn biến mất khi nhấp vào nó. Bạn cũng muốn xóa phần tử khỏi DOM sau đó. Bạn có thể nghĩ rằng bạn có thể đơn giản xâu chuỗi các phương thức:

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

Trong ví dụ này, .remove () sẽ được gọi trước khi .fadeOut () hoàn thành, phá hủy hiệu ứng mờ dần của bạn và chỉ cần làm cho phần tử biến mất ngay lập tức. Thay vào đó, khi bạn chỉ muốn thực hiện một lệnh khi hoàn thành lệnh trước đó, hãy sử dụng lệnh gọi lại:

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

Tham số thứ hai của .fadeOut () là một hàm ẩn danh sẽ chạy sau khi hoạt ảnh .fadeOut () hoàn thành. Điều này làm cho sự mờ dần dần và loại bỏ phần tử tiếp theo.

Nếu bạn liên kết () cùng một sự kiện nhiều lần, nó sẽ bắn nhiều lần. Tôi thường luôn đi unbind('click').bind('click')chỉ để được an toàn

Đừng lạm dụng trình cắm.

Hầu hết thời gian bạn sẽ chỉ cần thư viện và có thể giao diện người dùng. Nếu bạn giữ nó đơn giản, mã của bạn sẽ được duy trì trong thời gian dài. Không phải tất cả các trình cắm đều được hỗ trợ và bảo trì, thực tế hầu hết là không. Nếu bạn có thể bắt chước chức năng bằng các yếu tố cốt lõi, tôi thực sự khuyên bạn nên sử dụng nó.

Các plugin dễ dàng chèn mã của bạn, giúp bạn tiết kiệm thời gian, nhưng khi bạn cần thêm một thứ gì đó, thì việc sửa đổi chúng là một ý tưởng tồi, vì bạn mất các bản cập nhật có thể. Thời gian bạn tiết kiệm khi bắt đầu, bạn sẽ mất dần sau khi thay đổi các plugin không dùng nữa.

Chọn các plugin bạn sử dụng một cách khôn ngoan. Ngoài thư viện và giao diện người dùng, tôi liên tục sử dụng $ .cookie , $ .form , $ .validate và thickbox . Đối với phần còn lại, tôi chủ yếu phát triển các trình cắm riêng của mình.

Cạm bẫy: Sử dụng các vòng lặp thay vì bộ chọn.

Nếu bạn thấy mình đang tiếp cận phương thức '.each' của jQuery để lặp lại các phần tử DOM, hãy tự hỏi mình có thể sử dụng bộ chọn để lấy các phần tử thay thế không.

Thông tin thêm về bộ chọn jQuery:
http://docs.jquery.com/Selector

Cạm bẫy: KHÔNG sử dụng một công cụ như Fireorms

Fireorms thực tế đã được thực hiện cho loại gỡ lỗi này. Nếu bạn đang tìm hiểu về DOM bằng Javascript, bạn cần một công cụ tốt như Fireorms để cung cấp cho bạn khả năng hiển thị.

Thông tin thêm về Fireorms: http://getfireorms.com/

Những ý tưởng tuyệt vời khác nằm trong tập phim này của Podcast đa hình: (Bí mật jQuery với Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Hiểu lầm về việc sử dụng định danh này trong bối cảnh phù hợp. Ví dụ:

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

Và đây là một trong những mẫu làm thế nào bạn có thể giải quyết nó:

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

Tránh tìm kiếm trong toàn bộ DOM nhiều lần. Đây là một cái gì đó thực sự có thể trì hoãn kịch bản của bạn.

Xấu:

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

Tốt

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

Xấu:

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

Tốt

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

Luôn lưu trữ $ (cái này) vào một biến có ý nghĩa, đặc biệt là trong .each ()

Như thế này

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

Tương tự như những gì Repo Man nói, nhưng không hoàn toàn.

Khi phát triển winforms ASP.NET, tôi thường làm

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

quên dấu #. Hình thức đúng là

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

Sự kiện

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

không sao chép bất kỳ sự kiện nào - bạn phải buộc lại tất cả.

Theo commen t - clone () của JP sẽ khởi động lại các sự kiện nếu bạn vượt qua sự thật.

Tránh tạo nhiều đối tượng jQuery giống nhau

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

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

Tôi cũng nói điều này với JavaScript, nhưng jQuery, JavaScript KHÔNG BAO GIỜ nên thay thế CSS.

Ngoài ra, hãy đảm bảo rằng trang web có thể sử dụng được đối với người đã tắt JavaScript (không liên quan đến ngày hôm nay như ngày trước, nhưng luôn luôn tốt để có một trang web hoàn toàn có thể sử dụng được).

Làm quá nhiều thao tác DOM. Mặc dù các phương thức .html (), .append (), .prepend (), v.v. rất tuyệt vời, do cách trình duyệt kết xuất và kết xuất lại các trang, sử dụng chúng quá thường xuyên sẽ gây ra chậm. Thường thì tốt hơn là tạo html dưới dạng chuỗi và đưa nó vào DOM một lần, thay vì thay đổi DOM nhiều lần.

Thay vì:

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

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

Thử cái này:

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

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

$parent.append(html);

Hoặc thậm chí điều này ($ Wrapper là một phần tử mới được tạo chưa được đưa vào DOM. Việc thêm các nút vào div trình bao bọc này không gây ra sự chậm lại và cuối cùng, chúng tôi sẽ thêm $ Wrapper vào $ Parent, chỉ sử dụng một thao tác 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);

Sử dụng ClientID để lấy id "thực" của điều khiển trong các dự án ASP.NET.

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

Ngoài ra, nếu bạn đang sử dụng jQuery trong SharePoint, bạn phải gọi jQuery.noConflict ().

Truyền ID thay vì các đối tượng jQuery cho các hàm:

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

myFunc("someId");

Vượt qua một bộ bọc là linh hoạt hơn nhiều:

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

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

Sử dụng quá nhiều chuỗi.

Xem cái này:

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

Giải trình

Sử dụng kiểu tích lũy chuỗi

Sử dụng toán tử +, một chuỗi mới được tạo trong bộ nhớ và giá trị được nối được gán cho nó. Chỉ sau đó, kết quả được gán cho một biến. Để tránh biến trung gian cho kết quả nối, bạn có thể gán trực tiếp kết quả bằng toán tử + =. Chậm:

a += 'x' + 'y';

Nhanh hơn:

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

Các hoạt động nguyên thủy có thể nhanh hơn các cuộc gọi chức năng

Xem xét sử dụng hoạt động nguyên thủy thay thế cho các lệnh gọi hàm trong các vòng lặp và các hàm quan trọng về hiệu năng. Chậm:

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

Nhanh hơn:

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

Đọc thêm tại Thực tiễn tốt nhất về hiệu suất JavaScript

Nếu bạn muốn người dùng thấy các thực thể html trong trình duyệt của họ, hãy sử dụng 'html' thay vì 'text' để thêm chuỗi Unicode, như:

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

theo quan điểm của tôi)

Thông thường, làm việc với jquery có nghĩa là bạn không phải lo lắng về các yếu tố DOM thực tế mọi lúc. Bạn có thể viết một cái gì đó như thế này $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})- và mã này sẽ thực thi mà không gây ra bất kỳ lỗi nào.

Trong một số trường hợp, điều này rất hữu ích, trong một số trường hợp - hoàn toàn không, nhưng thực tế là jquery có xu hướng, tốt, thân thiện với các trận đấu trống. Chưa,replaceWith sẽ đưa ra một lỗi nếu một người cố gắng sử dụng nó với một yếu tố không thuộc về tài liệu. Tôi thấy nó khá phản trực giác.

Một cạm bẫy khác là, theo ý kiến ​​của tôi, thứ tự các nút được trả về bởi phương thức prosAll () - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Thực sự không phải là một vấn đề lớn, nhưng chúng ta nên ghi nhớ thực tế này.

Nếu bạn có kế hoạch với Ajax trong nhiều dữ liệu, như giả sử, 1500 hàng của một bảng có 20 cột, thì bạn thậm chí không nghĩ đến việc sử dụng jQuery để chèn dữ liệu đó vào HTML của mình. Sử dụng JavaScript đơn giản. jQuery sẽ quá chậm trên các máy chậm hơn.

Ngoài ra, một nửa thời gian jQuery sẽ làm những việc sẽ khiến nó chậm hơn, như cố gắng phân tích các thẻ script trong HTML đến và xử lý các yêu cầu của trình duyệt. Nếu bạn muốn tốc độ chèn nhanh, hãy sử dụng JavaScript đơn giản.

Sử dụng jQuery trong một dự án nhỏ có thể được hoàn thành chỉ bằng một vài dòng JavaScript thông thường.

Không hiểu ràng buộc sự kiện. JavaScript và jQuery hoạt động khác nhau.

Theo nhu cầu phổ biến, một ví dụ:

Trong jQuery:

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

Không có jQuery:

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

Về cơ bản, các hook cần thiết cho JavaScript không còn cần thiết nữa. Tức là sử dụng đánh dấu nội tuyến (onClick, v.v.) vì bạn chỉ có thể sử dụng ID và các lớp mà nhà phát triển thường sử dụng cho mục đích CSS.