Tôi nên biết những phiền toái nào của jQuery với tư cách là người dùng thử nghiệm?

Question

Chúng tôi đang cân nhắc chuyển trang web của mình từ Prototype sang jQuery. Là một người quá quen thuộc với Prototype, tôi nhận thức rõ những điều về Prototype mà tôi thấy hạn chế hoặc gây phiền nhiễu.

Câu hỏi của tôi dành cho người dùng jQuery là: Sau khi làm việc với jQuery trong một thời gian, bạn thấy phiền toái gì? Có những điều về jQuery mà làm cho bạn suy nghĩ về việc chuyển đổi (trở lại) để Prototype?

Answer 1

Có lẽ vấn đề thực sự duy nhất mà tôi từng gặp phải là vấn đề phạm vi $ (này). Ví dụ, nếu bạn đang làm một vòng lặp lồng nhau cho các phần tử và các phần tử con bằng cách sử dụng hàm JQuery .each() được xây dựng sẵn, thì $ (this) này đề cập đến điều gì? Trong trường hợp đó nó đề cập đến phạm vi bên trong nhất, như nó phải là, nhưng nó không phải luôn luôn mong đợi.

Giải pháp đơn giản là chỉ cần bộ nhớ cache $ (this) cho một biến trước khi khoan sâu hơn vào một chuỗi:

$("li").each(function() { 
    // cache this 
    var list_item = $(this); 
    // get all child a tags 
    list_item.find("a").each(function() { 
     // scope of this now relates to a tags 
     $(this).hide("slow"); 
    }); 
}); 

Answer 2

(Điều duy nhất tôi có thể nghĩ đến là đây là phần tử thay vì một đối tượng jQuery trong $("...").each(function) -calls, như $(element) thường được sử dụng sau đó chỉ là phần tử.Và điều cực kỳ nhỏ đó chỉ là về nó

Ví dụ ở trên (giản thể và tôi biết rằng có những cách tốt hơn nhiều khác để làm điều này, tôi chỉ không thể nghĩ ra một ví dụ tốt hơn bây giờ):

// Make all divs that has foo=bar pink. 
$("div").each(function(){ 
    if($(this).attr("foo") == "bar"){ 
    $(this).css("background", "pink"); 
    } 
}); 

each là một chức năng mà phải mất một hàm là tham số, hàm đó được gọi một lần cho mỗi phần tử phù hợp. nction được thông qua, this đề cập đến phần tử DOM trình duyệt thực tế, nhưng tôi thấy rằng bạn thường sẽ muốn sử dụng một số hàm jQuery trên mỗi phần tử, do đó phải sử dụng $(this). Nếu điều này đã được đặt thành những gì $(this) là, bạn sẽ nhận được mã ngắn hơn và bạn vẫn có thể truy cập đối tượng phần tử DOM bằng cách sử dụng this.get(0). Bây giờ tôi thấy lý do cho mọi thứ như họ đang có, cụ thể là viết $(this) thay vì điều này, hầu như không cồng kềnh, và trong trường hợp bạn có thể làm những gì bạn muốn làm với phần tử DOM theo cách nó nhanh hơn cách nó có thể có được, và cách khác sẽ không nhanh hơn trong trường hợp bạn muốn $(this).)

Answer 3

Tôi nghĩ rằng chỉ có được tôi là khi tôi làm một truy vấn lựa chọn cho một yếu tố duy nhất tôi phải nhớ rằng nó trả về một mảng các phần tử mặc dù tôi biết chỉ có một phần tử. Thông thường, điều này không tạo ra bất kỳ sự khác biệt nào trừ khi bạn muốn tương tác trực tiếp với phần tử thay vì thông qua các phương thức jQuery.

Answer 4

Không. Nada. Nyet.

Answer 5

hai điểm đau của tôi đã là địa ngục khung, có thể nhận được rất khó hiểu

$('.myDiv').append($('<ul />').append($('<li />').text('content'))); 

vấn đề phổ biến khác của tôi đã làm với việc sử dụng JSON trong jQuery, tôi luôn nhớ dấu phẩy cuối cùng,

$('.myDiv').tabs({ option1:true, options2:false(, woops)}); 

Cuối cùng, tôi đã sử dụng jQuery trong khoảng 6 tháng và tôi không nghĩ mình sẽ quay lại nguyên mẫu. Tôi hoàn toàn yêu thích jQuery, và rất nhiều các thủ thuật mà họ sử dụng đã giúp tôi học hỏi được rất nhiều. một mẹo thú vị mà tôi thích là sử dụng các chuỗi ký tự cho các cuộc gọi phương thức, tôi chưa bao giờ thực sự làm điều đó quá nhiều với các nguyên mẫu.

$('.myDiv')[(add ? 'add' : 'remove') + 'Class']('redText'); 

Answer 6

.mỗi:

jQuery (bạn cần Index, ngay cả khi bạn không sử dụng nó):

$.each(collection, function(index, item) { 
    item.hide(); 
}); 

Prototype (bạn thường sử dụng item, vì vậy bạn có thể bỏ qua các chỉ số):

collection.each(function(item) { 
    item.hide(); 
}); 

Answer 7

Điều này thực sự chỉ gây phiền toái nếu bạn đang thực hiện rất nhiều thao tác DOM. PrototypeJs tự động thêm API của nó vào DOM Elements, do đó, điều này làm việc trong prototypejs (jQuery tất nhiên không làm điều này):

var el = document.createElement("div"); 
el.addClassName("hello"); // addClassName is a prototypejs method implemented on the native HTMLElement 

Thậm chí không chạy phần tử gốc thông qua hàm $().

PS: Cần lưu ý rằng điều này không hoạt động trong IE.

Answer 8

Tôi không nghĩ rằng có bất kỳ gotchas thực, hoặc thậm chí bất kỳ phiền toái kéo dài. Các câu trả lời khác ở đây dường như để xác nhận điều này - các vấn đề được gây ra đơn giản bởi API hơi khác và kiểu mã hóa JavaScript khác nhau mà jQuery khuyến khích.

Tôi bắt đầu sử dụng Prototype một vài năm trước và thấy nó là một sự mặc khải. Rất mạnh mẽ, thanh lịch. Sau một vài tháng tôi đã thử jQuery và phát hiện ra sức mạnh và sự thanh lịch thực sự là gì. Tôi không nhớ bất kỳ phiền toái nào. Bây giờ tôi đang làm việc trên một dự án sử dụng Prototype và nó cảm thấy như một bước trở lại (để công bằng, chúng tôi đang sử dụng Prototype 1.5.1).

Nếu bạn đảo ngược câu hỏi - "Tôi nên biết những phiền toái về Prototype nào khi là người dùng jQuery?" - bạn sẽ nhận được nhiều câu trả lời hơn.