$ ('<element> ') vs $ (' <element />') trong jQuery

Question

tôi thấy mọi người tạo ra các phần tử HTML trong jQuery theo hai cách khác nhau:

$('<element>') 

và

$('<element />') 

Tôi tò mò mà một là "chính xác hơn". Tôi thấy lợi thế rõ ràng đối với cái đầu tiên chỉ đơn giản là ít hơn để gõ. Liệu nó có tạo sự khác biệt ở tất cả những gì được sử dụng?

Answer 1

Không có sự khác biệt, như đã thấy trong mã nguồn, line 30 & line 121:

/* Line 30*/ 
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, 

/* Line 121 */ 
// If a single string is passed in and it's a single tag 
// just do a createElement and skip the rest 
ret = rsingleTag.exec(selector); 

Sau đây là tương đương :

• <a></a>
• <a />
• <a>

Answer 2

Không, nó hoàn toàn không khác biệt, miễn là định nghĩa phần tử được định dạng đúng. Phong cách thứ hai chỉ đơn giản là an alternate syntax mà có thể thực sự lưu tổ hợp phím:

$('<a href="herp.derp.com/sherp"/>'); // XML-like syntax 
$('<a href="herp.derp.com/sherp"></a>'); // Well-formed HTML 
$('<a href="herp.derp.com/sherp">');  // Malformed (no closing tag) 

Answer 3

Một yếu tố tốc ký <element /> đòi hỏi một dấu gạch chéo vì thay thế nó <element> </element>. Vì vậy, bạn sẽ viết rằng bất cứ nơi nào thích hợp vì lợi ích của đánh dấu hợp lệ. Nhưng nó không phải là cách này hay cách khác.

Đã chỉnh sửa: đây không thực sự là vấn đề. những người khác ở đây dường như đồng ý rằng vấn đề về hiệu suất regex

Answer 4

về mặt kỹ thuật $('<element></element>') là chính xác hơn, vì thẻ đóng tự động sử dụng / đã bị xóa trong HTML5, vì câu lệnh đó được phân tích bởi jQuery. Nếu bất cứ điều gì, chỉ cần sử dụng $('<element>')có thể thực sự nhanh hơn một chút, vì ít ký tự hơn để đọc. Mà nên bỏ qua một số điều kiện Regex là tốt.

Hơn thế nữa, nếu bạn đang tìm kiếm nhanh nhất thể cách sử dụng jQuery:

var temp = new jQuery.fn.init(); 
temp[0] = document.createElement('element'); 
temp.length = 1; 

Phiên bản này là nhanh nhất, bởi vì nó bỏ qua jQuery() mà kết thúc tốt đẹp "jQuery.fn.init mới()" và không chuyển đối số để nó ngay lập tức trả về một đối tượng jQuery mới. Nó bỏ qua rất nhiều điều kiện và báo cáo không an toàn, đó là không cần thiết nếu bạn đã biết chính xác những gì bạn đang cố gắng làm.

Hoặc hơi ngắn hơn:

var temp = $(document.createElement('element')); 

Phiên bản này là hơi chậm, nhưng dễ dàng hơn để đọc, và một gọn gàng rất nhiều. Nó vẫn bỏ qua một đoạn mã lớn được sử dụng để phân tích cú pháp, chuỗi sẽ được truyền đi. Thay vào đó, jQuery có thể tự động biết chúng ta đang làm việc với một nút ở đây.

Reference
HTML5 Does NOT Allow “Self-Closing” Tags
Google: html5 self closing tags
jsperf

Answer 5

Đây là những gì jQuery docs nói về nó:

Để đảm bảo khả năng tương thích đa nền tảng, đoạn phải được well-formed. Thẻ có thể chứa các yếu tố khác cần được kết hợp với một thẻ đóng:

$('<a href="http://jquery.com"></a>');

Ngoài ra, jQuery cho phép cú pháp thẻ XML-tương tự (có hoặc không có dấu cách trước dấu gạch chéo):

$('<a/>');

Thẻ mà không thể chứa các thành phần có thể được nhanh chóng đóng cửa hoặc không:

$('<img />'); $('<input>');

Xem câu hỏi này, tuy nhiên, về những gì là hiệu quả nhất:

What is the most efficient way to create HTML elements using jQuery?

Answer 6

Tôi chạy cả các sản phẩm được jsperf và tìm thấy sự khác biệt tối thiểu giữa hai cho hiệu suất, vì vậy tôi giả sử nó sẽ kết thúc là một vấn đề ưu tiên, và yếu tố nào bạn đang tạo ra. Tôi khuyên bạn nên chạy thử nghiệm thêm trên jsperf.

jsperf faq: http://jsperf.com/faq

Kết quả cuối cùng: jsperf test