jQuery: nó bị "cấm" làm gì trong Javascript đơn giản

Question

Câu hỏi thực hành tốt nhất về jQuery.

Tôi đang viết một trang web chuyên sâu về jQuery. Tôi mới vào jQuery và nhận thấy sức mạnh của nó, nhưng khi tôi đến với kinh nghiệm javascript nặng và kiến ​​thức, câu hỏi của tôi là: Những gì cần được thực hiện trong jQuery và những gì trong javascript đơn giản.

Ví dụ: có các cuộc gọi lại gửi một đối tượng DOM đơn giản làm đối số. Tôi có nên sử dụng nó hay tôi nên quấn nó (như $(this)).

Có vấn đề gì nếu tôi làm điều này.x = y hoặc $ (this) .attr ("x", y).

Answer 1

Nếu hàm của bạn nhận được đối tượng DOM và bạn không cần bất kỳ chức năng jQuery nào cho đối tượng DOM đó, thì không cần phải chuyển đổi nó thành đối tượng jQuery. Ví dụ, nếu bạn nhận được một đối tượng checkbox, bạn có thể kiểm tra thuộc tính checked mà không cần sử dụng jQuery.

Tuy nhiên, nếu bạn cần điều hướng đến một yếu tố khác nhau từ hộp kiểm đó, nó có thể là đáng giá để chuyển đổi nó:

jQuery (cũng như các thư viện khác) pha trộn trong suốt với JS bản địa. Nếu bạn cần thêm chức năng, hãy tăng thêm đối tượng được đề cập.

Đối với câu hỏi cuối cùng của bạn: Bạn có thể thấy chức năng data hữu ích để tránh các thuộc tính DOM không chuẩn. Nếu thuộc tính của bạn x trong câu hỏi của bạn trên thực tế là thuộc tính DOM hợp lệ, bạn có thể viết this.x = y hoặc $(this).attr('x', y), IMO không quan trọng lắm. Tuy nhiên, nếu x không phải là một thuộc tính DOM, sử dụng

$(this).data('key', value) 

Bằng cách đó, bạn có thể lưu trữ cặp khóa-giá trị tùy ý với các phần tử DOM, nơi value có thể là một giá trị nguyên thủy tùy ý hoặc đối tượng.

Answer 2

Tôi nghĩ đó là cuộc gọi phán xét. Sử dụng ý thức chung của bạn.

Ví dụ, nếu bạn có 1000 div của trên trang web, bạn có lẽ sẽ không muốn quấn nó trong $ (..)

$('div').click(function() { 
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid()); 
}); 

Đối với bài tập khác, miễn là bạn hiểu những gì jQuery đang làm, bạn có thể gắn bó với nó chỉ để nhất quán, nhưng hãy nhận biết các vấn đề về hiệu suất như trong ví dụ trên.

Khi @colinmarc đề cập, đôi khi jQuery làm mờ sự khác biệt giữa thuộc tính phần tử và thuộc tính đối tượng có thể gây hiểu nhầm và lỗi.

Answer 3

Khi bạn sử dụng jQuery, nó luôn trả về một thể hiện của jQuery trừ khi bạn sử dụng một hàm như val();

lý do chúng tôi sử dụng $ (this) .value thay vì this.value là để đảm bảo rằng đây là một thể hiện của jQuery.

nếu một nơi nào đó trong mã của bạn, bạn đặt biến được gọi là my_link phù thủy bằng DOM Object chứ không phải hàm jQuery .. trong ứng dụng my_link.val() sẽ dẫn đến lỗi, nhưng bằng cách thực hiện $ (my_link) .val() sẽ đảm bảo với bạn rằng hàm val sẽ có sẵn. khi $() trả về một thể hiện của jquery.

Xin lỗi vì sự hiểu lầm trong bài viết trước của tôi.

Answer 4

Vì các đối tượng jQuery có chức năng phong phú hơn các nút DOM DOM tự nhiên, nếu bạn đang ở trên hàng rào, bạn cũng có thể bọc trong jQuery. JQuery rất nhẹ, không có nhiều lý do để không sử dụng các đối tượng jQuery.

Có vấn đề gì nếu tôi làm điều này.x = y hoặc $ (this) .attr ("x", y).

Bản gốc sẽ là hơi nhanh hơn, nhưng có thể bạn sẽ dành nhiều thời gian hơn trong mã khác-- Duyệt hoặc xây dựng DOM. Trong ví dụ cụ thể này, trước đây là ngắn gọn hơn, vì vậy tôi sẽ chọn điều đó. Vì jQuery rất nhẹ nên tôi có xu hướng chuyển đổi qua lại một cách trôi chảy.

Dưới đây là hướng dẫn khác mà chúng tôi làm theo:

• Đối với callbacks, giống như một bộ xử lý nhấp chuột, bạn sẽ cần phải làm theo các API-- thường là một nút DOM. Mã bạn viết tương tự có lẽ cũng chỉ cần lấy các nút DOM. Nhưng nếu bạn có một danh sách các mục, hãy luôn sử dụng một đối tượng jQuery.
• Đối với hầu hết mã, tôi cố gắng xem liệu bạn có thể cấu trúc mã như một plugin jQuery-- áp dụng một số chuyển đổi cho một tập hợp các nút DOM hay không. Nếu bạn có thể làm điều đó, bạn sẽ nhận được một số hướng dẫn từ kiến ​​trúc plugin.
• Tôi sử dụng cơ chế ràng buộc/kích hoạt của jQuery vì nó khá linh hoạt và khớp nối thấp.
• Để giữ mã thẳng, tôi khuyên bạn nên đặt tên tiền tố cho đối tượng jQuery bằng ký hiệu đô la. Ví dụ: var $this = $(this);. Mặc dù nó thực sự không có gì lớn để gọi $() quá mức, nó sẽ kết thúc tìm kiếm một sloppy nếu bạn gọi nó là quá nhiều.

Hy vọng điều này sẽ hữu ích.