jQuery vs document.querySelector ALL

Tôi đã nghe nhiều lần rằng tài sản mạnh nhất của jQuery là cách nó truy vấn và thao tác các phần tử trong DOM: bạn có thể sử dụng các truy vấn CSS để tạo các truy vấn phức tạp rất khó thực hiện trong javascript thông thường. Tuy nhiên, theo tôi biết, bạn có thể đạt được kết quả tương tự với document.querySelectorhoặc document.querySelectorAll, được hỗ trợ trong Internet Explorer 8 trở lên.

Vì vậy, câu hỏi đặt ra là: tại sao 'rủi ro' chi phí của jQuery nếu tài sản mạnh nhất của nó có thể đạt được bằng JavaScript thuần túy?

Tôi biết jQuery không chỉ có các bộ chọn CSS, ví dụ AJAX trình duyệt chéo, đính kèm sự kiện hay, v.v. Nhưng phần truy vấn của nó là một phần rất lớn trong sức mạnh của jQuery!

Có suy nghĩ gì không?

document.querySelectorAll() có một số điểm không nhất quán trên các trình duyệt và không được hỗ trợ trong các trình duyệt cũ hơn ^{Điều này có thể sẽ không gây ra bất kỳ rắc rối nào nữa hiện nay} . Nó có một cơ chế phạm vi rất không trực quan và một số tính năng không đẹp khác . Ngoài ra với javascript, bạn gặp khó khăn hơn khi làm việc với các tập kết quả của các truy vấn này, trong nhiều trường hợp bạn có thể muốn thực hiện. jQuery cung cấp chức năng để làm việc trên chúng như: filter(), find(), children(),parent() , map(), not()và nhiều hơn nữa. Chưa kể đến khả năng jQuery hoạt động với các bộ chọn lớp giả.

Tuy nhiên, tôi sẽ không coi những thứ này là các tính năng mạnh nhất của jQuery mà là những thứ khác như "hoạt động" trên dom (sự kiện, kiểu dáng, hoạt hình & thao tác) theo cách tương thích chéo hoặc giao diện ajax.

Nếu bạn chỉ muốn công cụ chọn từ jQuery, bạn có thể sử dụng chính một jQuery đang sử dụng: Sizzle Bằng cách đó bạn có sức mạnh của công cụ Selector jQuery mà không cần chi phí khó chịu.

EDIT: Chỉ để ghi lại, tôi là một người hâm mộ JavaScript vanilla lớn. Tuy nhiên, đôi khi bạn cần 10 dòng JavaScript để viết 1 dòng jQuery.

Tất nhiên bạn phải có kỷ luật để không viết jQuery như thế này:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Điều này cực kỳ khó đọc, trong khi phần sau khá rõ ràng:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

JavaScript tương đương sẽ phức tạp hơn nhiều được minh họa bằng mã giả ở trên:

1) Tìm phần tử, xem xét lấy tất cả phần tử hoặc chỉ phần tử đầu tiên.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Lặp lại mảng các nút con thông qua một số vòng lặp (có thể lồng nhau hoặc đệ quy) và kiểm tra lớp (danh sách lớp không có sẵn trong tất cả các trình duyệt!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) áp dụng kiểu css

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Mã này sẽ ít nhất gấp hai lần số dòng mã bạn viết bằng jQuery. Ngoài ra, bạn sẽ phải xem xét các vấn đề trên nhiều trình duyệt sẽ làm giảm lợi thế tốc độ nghiêm trọng (bên cạnh độ tin cậy) của mã gốc.

Nếu bạn đang tối ưu hóa trang của mình cho IE8 hoặc mới hơn, bạn thực sự nên xem xét liệu bạn có cần jquery hay không. Các trình duyệt hiện đại có nhiều tài sản mà jquery cung cấp.

Nếu bạn quan tâm đến hiệu suất, bạn có thể có lợi ích hiệu suất đáng kinh ngạc (nhanh hơn 2-10) bằng cách sử dụng javascript gốc: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Tôi đã chuyển đổi một div-tagcloud từ jquery sang javascript gốc (tương thích IE8 +), kết quả rất ấn tượng. Nhanh hơn 4 lần chỉ với một chút chi phí.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

You Might Not Need Jquery cung cấp một cái nhìn tổng quan thực sự hay, phương thức gốc nào thay thế cho phiên bản trình duyệt nào.

http://youmightnotneedjquery.com/

Phụ lục: So sánh tốc độ hơn nữa cách các phương thức bản địa cạnh tranh với jquery

• Mảng: $ .inArray vs Array.indexOf: Jquery chậm hơn 24%

• DOM: $ .empty vs Node.innerHtml: Jquery chậm hơn 97%

• DOM: $ .on so với Node.addEventListener: Jquery chậm hơn 90%

• DOM: $ .find vs Node.queryselectorall: Jquery chậm hơn 90%

• Mảng: $ .grep vs Array.filter: Chậm hơn 70%

• DOM: $ .show / ẩn vs display none: Jquery chậm hơn 85%

• AJAX: $ .ajax so với XMLHttpRequest: Jquery chậm hơn 89%

• Chiều cao: $ .outerHeight vs offsetHeight: Jquery chậm hơn 87%

• Attr: $ .attr vs setAttribution: Jquery chậm hơn 86%

Để hiểu tại sao jQuery rất phổ biến, điều quan trọng là phải hiểu chúng ta đến từ đâu!

Khoảng một thập kỷ trước, các trình duyệt hàng đầu là IE6, Netscape 8 và Firefox 1.5. Quay trở lại những ngày đó, có rất ít cách để trình duyệt chéo để chọn một phần tử từ DOM bên cạnh đó Document.getElementById().

Vì vậy, khi jQuery được phát hành trở lại vào năm 2006 , nó đã mang tính cách mạng. Trước đó, jQuery đặt tiêu chuẩn cho cách dễ dàng chọn / thay đổi các phần tử HTML và kích hoạt các sự kiện, bởi vì tính linh hoạt và hỗ trợ trình duyệt của nó là chưa từng có.

Bây giờ, hơn một thập kỷ sau, rất nhiều tính năng khiến jQuery trở nên phổ biến đã được đưa vào tiêu chuẩn javaScript:

• Thay vì jQuery $(), bây giờ bạn có thể sử dụngDocument.querySelectorAll()
• Thay vì jQuery $el.on(), bây giờ bạn có thể sử dụngEventTarget.addEventListener()
• Thay vì jQuery $el.toggleClass(), bây giờ bạn có thể sử dụngElement.classList.toggle()
• ...

Chúng thường không có sẵn vào năm 2005. Thực tế là ngày nay chúng rõ ràng đặt ra câu hỏi tại sao chúng ta nên sử dụng jQuery. Và thực sự, mọi người đang ngày càng tự hỏi liệu chúng ta có nên sử dụng jQuery hay không .

Vì vậy, nếu bạn nghĩ rằng bạn hiểu JavaScript đủ tốt để làm mà không cần jQuery, vui lòng làm! Đừng cảm thấy bị buộc phải sử dụng jQuery, chỉ vì rất nhiều người khác đang làm điều đó!

Đó là bởi vì jQuery có thể làm được nhiều hơn thế querySelectorAll.

Trước hết, jQuery (và đặc biệt là Sizzle), hoạt động cho các trình duyệt cũ hơn như IE7-8 không hỗ trợ các bộ chọn CSS2.1-3.

Thêm vào đó, Sizzle (là công cụ chọn sau jQuery) cung cấp cho bạn rất nhiều công cụ chọn nâng cao hơn, như lớp :selectedgiả, :not()bộ chọn nâng cao , cú pháp phức tạp hơn như $("> .children")v.v.

Và nó thực hiện nhiều trình duyệt, hoàn hảo, cung cấp tất cả những gì jQuery có thể cung cấp (plugin và API).

Có, nếu bạn nghĩ rằng bạn có thể dựa vào các bộ chọn id và lớp đơn giản, jQuery là quá nhiều đối với bạn và bạn sẽ phải trả một khoản tiền quá mức. Nhưng nếu bạn không và muốn tận dụng mọi ưu điểm của jQuery, thì hãy sử dụng nó.

Công cụ chọn Sizzle của jQuery có thể sử dụng querySelectorAllnếu có sẵn. Nó cũng làm dịu đi sự không nhất quán giữa các trình duyệt để đạt được kết quả thống nhất. Nếu bạn không muốn sử dụng tất cả jQuery, bạn chỉ có thể sử dụng Sizzle một cách riêng biệt. Đây là một bánh xe khá cơ bản để phát minh.

Dưới đây là một số lựa chọn anh đào từ nguồn hiển thị loại điều jQuery (w / Sizzle) sắp xếp cho bạn:

Chế độ quirks Safari:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Nếu bảo vệ đó thất bại, nó sử dụng phiên bản Sizzle không được cải tiến querySelectorAll. Hơn nữa, có các xử lý cụ thể cho sự không nhất quán trong IE, Opera và trình duyệt Blackberry.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

Và nếu thất bại, nó sẽ trả về kết quả oldSizzle(query, context, extra, seed).

Về khả năng duy trì mã, có một số lý do để gắn bó với một thư viện được sử dụng rộng rãi.

Một trong những vấn đề chính là chúng được ghi chép tốt và có các cộng đồng như ... nói ... stackexchange, nơi có thể tìm thấy trợ giúp với các thư viện. Với một thư viện được mã hóa tùy chỉnh, bạn có mã nguồn và có thể là tài liệu hướng dẫn, trừ khi (các) người viết mã dành nhiều thời gian để ghi lại mã hơn là viết mã, điều này rất hiếm.

Viết thư viện của riêng bạn có thể phù hợp với bạn , nhưng người thực tập ngồi ở bàn kế bên có thể có thời gian dễ dàng hơn để tăng tốc với một cái gì đó như jQuery.

Gọi nó là hiệu ứng mạng nếu bạn thích. Điều này không có nghĩa là mã sẽ vượt trội trong jQuery; chỉ là bản chất ngắn gọn của mã giúp dễ dàng nắm bắt cấu trúc tổng thể cho các lập trình viên ở mọi cấp độ kỹ năng, nếu chỉ vì có nhiều mã chức năng hiển thị cùng một lúc trong tệp bạn đang xem. Theo nghĩa này, 5 dòng mã tốt hơn 10.

Tóm lại, tôi thấy những lợi ích chính của jQuery là mã ngắn gọn và có mặt khắp nơi.

Đây là một so sánh nếu tôi muốn áp dụng cùng một thuộc tính, ví dụ: ẩn tất cả các thành phần của lớp "my-class". Đây là một lý do để sử dụng jQuery.

jQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

Với jQuery đã quá phổ biến, lẽ ra họ đã làm cho document.querySelector () hoạt động giống như $ (). Thay vào đó, document.querySelector () chỉ chọn phần tử phù hợp đầu tiên làm cho nó chỉ hữu ích một nửa.

như trang web chính thức nói: "jQuery: The Write Less, Do More, JavaScript Library"

hãy thử dịch mã jQuery mà không cần bất kỳ thư viện nào

$("p.neat").addClass("ohmy").show("slow");

Tôi nghĩ rằng câu trả lời thực sự là jQuery đã được phát triển từ lâu trước khi querySelector/querySelectorAllcó sẵn trong tất cả các trình duyệt chính.

Bản phát hành ban đầu của jQuery là vào năm 2006 . Trên thực tế, ngay cả jQuery cũng không phải là công cụ đầu tiên triển khai các bộ chọn CSS .

IE là trình duyệt cuối cùng để thực hiện querySelector/querySelectorAll. Phiên bản thứ 8 của nó được phát hành vào năm 2009 .

Vì vậy, bây giờ, các bộ chọn thành phần DOM không còn là điểm mạnh nhất của jQuery nữa. Tuy nhiên, nó vẫn có rất nhiều ưu điểm, như các phím tắt để thay đổi nội dung css và html của phần tử, hình động, ràng buộc sự kiện, ajax.

Câu hỏi cũ, nhưng nửa thập kỷ sau, nó đáng để xem lại. Ở đây tôi chỉ thảo luận về khía cạnh bộ chọn của jQuery.

document.querySelector[All]được hỗ trợ bởi tất cả các trình duyệt hiện tại, cho đến IE8, do đó khả năng tương thích không còn là vấn đề nữa. Tôi cũng đã tìm thấy không có vấn đề về hiệu suất để nói (nó được cho là chậm hơn document.getElementById, nhưng thử nghiệm của riêng tôi cho thấy rằng nó nhanh hơn một chút).

Do đó, khi nói đến việc thao tác trực tiếp một phần tử, nó sẽ được ưu tiên hơn jQuery.

Ví dụ:

var element=document.querySelector('h1');
element.innerHTML='Hello';

là bao la vượt trội so với:

var $element=$('h1');
$element.html('hello');

Để làm bất cứ điều gì, jQuery phải chạy qua hàng trăm dòng mã (tôi đã từng truy tìm mã như ở trên để xem jQuery thực sự đang làm gì với nó). Đây rõ ràng là một sự lãng phí thời gian của mọi người.

Chi phí đáng kể khác của jQuery là thực tế là nó bao bọc mọi thứ bên trong một đối tượng jQuery mới. Chi phí này đặc biệt lãng phí nếu bạn cần mở lại đối tượng hoặc sử dụng một trong các phương thức đối tượng để xử lý các thuộc tính đã được phơi bày trên phần tử gốc.

Tuy nhiên, nơi jQuery có một lợi thế là cách nó xử lý các bộ sưu tập. Nếu yêu cầu là đặt các thuộc tính của nhiều phần tử, jQuery có một eachphương thức dựng sẵn cho phép một cái gì đó như thế này:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Để làm như vậy với Vanilla JavaScript sẽ cần một cái gì đó như thế này:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

mà một số tìm thấy nản chí.

Các bộ chọn jQuery cũng hơi khác nhau, nhưng các trình duyệt hiện đại (không bao gồm IE8) sẽ không nhận được nhiều lợi ích.

Theo quy định, tôi thận trọng không sử dụng jQuery cho các dự án mới :

• jQuery là một thư viện bên ngoài thêm vào chi phí hoạt động của dự án và phụ thuộc vào các bên thứ ba.
• Hàm jQuery rất tốn kém, xử lý khôn ngoan.
• jQuery áp đặt một phương pháp cần phải học và có thể cạnh tranh với các khía cạnh khác trong mã của bạn.
• jQuery chậm để lộ các tính năng mới trong JavaScript.

Nếu không có vấn đề nào ở trên, thì hãy làm những gì bạn muốn. Tuy nhiên, jQuery không còn quan trọng đối với việc phát triển đa nền tảng như trước đây, vì JavaScript và CSS hiện đại tiến xa hơn nhiều so với trước đây.

Điều này làm cho không đề cập đến các tính năng khác của jQuery. Tuy nhiên, tôi nghĩ rằng họ cũng cần một cái nhìn gần hơn.

$ ("# id") so với document.querySelector ALL ("# id")

Thỏa thuận là với hàm $ (), nó tạo ra một mảng và sau đó chia nhỏ cho bạn nhưng với document.querySelectorAll () nó tạo ra một mảng và bạn phải phá vỡ nó.

Chỉ cần một nhận xét về điều này, khi sử dụng lite thiết kế vật liệu, bộ chọn jquery không trả lại tài sản cho thiết kế vật liệu vì một số lý do.

Dành cho:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Những công việc này:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Điều này không:

$('#myinputfield').parentNode.MaterialTextfield.change();