jQuery vs document.querySelectorAll

ฉันได้ยินมาหลายครั้งแล้วว่าเนื้อหาที่แข็งแกร่งที่สุดของ jQuery คือวิธีการสืบค้นและจัดการองค์ประกอบใน DOM: คุณสามารถใช้การสืบค้น CSS เพื่อสร้างการสืบค้นที่ซับซ้อนซึ่งยากที่จะทำในจาวาสคริปต์ปกติ อย่างไรก็ตามเท่าที่ฉันรู้คุณสามารถบรรลุผลลัพธ์เดียวกันกับdocument.querySelectorหรือdocument.querySelectorAllซึ่งได้รับการสนับสนุนใน Internet Explorer 8 ขึ้นไป

ดังนั้นคำถามคือ: ทำไมค่าใช้จ่าย 'ความเสี่ยง' jQuery หากสินทรัพย์ที่แข็งแกร่งที่สุดสามารถทำได้ด้วย JavaScript ที่บริสุทธิ์?

ฉันรู้ว่า jQuery มีมากกว่าตัวเลือก CSS เช่น AJAX ข้ามเบราว์เซอร์ที่ดีกิจกรรมที่แนบมาเป็นต้น แต่ส่วนการสืบค้นมันเป็นส่วนสำคัญของความแข็งแกร่งของ jQuery!

ความคิดใด ๆ

document.querySelectorAll() ได้หลายไม่สอดคล้องกันในเบราว์เซอร์และไม่ได้รับการสนับสนุนในเบราว์เซอร์ที่เก่ากว่า^{นี้อาจจะไม่ก่อให้เกิดปัญหาใด ๆ} อีกต่อไปในปัจจุบัน มันมีกลไกการกำหนดขอบเขตที่ไม่ได้ใช้งานง่ายและคุณสมบัติอื่น ๆ ที่ไม่ค่อยดีนัก นอกจากนี้สำหรับจาวาสคริปต์คุณจะทำงานกับชุดผลลัพธ์ของข้อความค้นหาเหล่านี้ได้ยากขึ้นซึ่งในหลายกรณีคุณอาจต้องการทำเช่นนั้น jQuery ให้ฟังก์ชั่นการทำงานกับพวกเขาที่ชอบ: filter(), find(), children(), parent(), map(), not()และอีกหลาย ไม่ต้องพูดถึงความสามารถของ jQuery ในการทำงานกับตัวเลือก pseudo-class

อย่างไรก็ตามฉันจะไม่พิจารณาสิ่งเหล่านี้เป็นคุณสมบัติที่แข็งแกร่งที่สุดของ jQuery แต่สิ่งอื่น ๆ เช่น "การทำงาน" ใน dom (เหตุการณ์, การจัดแต่งทรงผม, ภาพเคลื่อนไหวและการจัดการ) ในวิธีที่เข้ากันได้กับ crossbrowserหรืออินเตอร์เฟส ajax

หากคุณต้องการให้เครื่องมือเลือกจาก jQuery คุณสามารถใช้หนึ่ง jQuery เองใช้: Sizzleวิธีที่คุณมีพลังของเครื่องยนต์ jQuerys Selector โดยไม่มีค่าใช้จ่ายที่น่ารังเกียจ

แก้ไข: สำหรับบันทึกฉันเป็นแฟน JavaScript ขนาดใหญ่ อย่างไรก็ตามในบางครั้งคุณจำเป็นต้องมี JavaScript 10 บรรทัดซึ่งคุณจะเขียน 1 บรรทัด jQuery

แน่นอนคุณต้องมีวินัยในการไม่เขียน jQuery เช่นนี้:

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

อ่านยากมากในขณะที่ตัวหลังค่อนข้างชัดเจน:

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

JavaScript ที่เทียบเท่าจะมีความซับซ้อนมากยิ่งขึ้นโดยรหัสเทียมข้างบน:

1) ค้นหาองค์ประกอบพิจารณาองค์ประกอบทั้งหมดหรือเฉพาะรายการแรก

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

2) ทำซ้ำอาร์เรย์ของโหนดชายด์ผ่านลูปบางอัน (อาจซ้อนหรือเรียกซ้ำ) และตรวจสอบคลาส (รายการคลาสไม่พร้อมใช้งานในเบราว์เซอร์ทั้งหมด!)

//.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) ใช้สไตล์ css

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

รหัสนี้จะมีอย่างน้อยสองเท่าของบรรทัดที่คุณเขียนด้วย jQuery นอกจากนี้คุณจะต้องพิจารณาปัญหาข้ามเบราว์เซอร์ซึ่งจะลดความได้เปรียบของความเร็วที่รุนแรง (นอกเหนือจากความน่าเชื่อถือ) ของรหัสเนทีฟ

หากคุณกำลังปรับหน้าของคุณให้เหมาะสมกับ IE8 หรือใหม่กว่าคุณควรพิจารณาว่าคุณต้องการ jQuery หรือไม่ เบราว์เซอร์สมัยใหม่มีเนื้อหามากมายที่ jquery มีให้

หากคุณสนใจในการปฏิบัติงานคุณสามารถรับประโยชน์ด้านประสิทธิภาพที่เหลือเชื่อ(เร็วกว่า 2-10)โดยใช้จาวาสคริปต์ดั้งเดิม: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

ฉันเปลี่ยน div-tagcloud จากjqueryเป็นjavascript ดั้งเดิม (เข้ากันได้กับ IE8 +) ผลลัพธ์นั้นน่าประทับใจ เร็วขึ้น 4 เท่าด้วยค่าใช้จ่ายเพียงเล็กน้อย

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

You Might Not Need Jquery ให้ภาพรวมที่ดีจริงๆซึ่งวิธีดั้งเดิมนั้นมาแทนที่เบราว์เซอร์เวอร์ชันใด

http://youmightnotneedjquery.com/

ภาคผนวก: การเปรียบเทียบความเร็วเพิ่มเติมเกี่ยวกับวิธีการดั้งเดิมที่แข่งขันกับ jQuery

• Array: $ .inArray vs Array.indexOf: Jquery ช้าลง 24%

• DOM: $ .empty vs Node.innerHtml: Jquery 97% ช้าลง

• DOM: $ .on กับ Node.addEventListener: Jquery ช้าลง 90%

• DOM: $ .find vs Node.queryselectorall: Jquery ช้าลง 90%

• Array: $ .grep vs Array.filter: ช้ากว่าเดิม 70%

• DOM: $ .show / hide vs display none: Jquery 85% ช้าลง

• AJAX: $ .ajax เทียบกับ XMLHttpRequest: Jquery ช้าลง 89%

• ส่วนสูง: $ .outerHeight เทียบกับ offsetHeight: Jquery ช้ากว่า 87%

• Attr: $ .attr กับ setAttribute: Jquery ช้าลง 86%

เพื่อทำความเข้าใจว่าทำไม jQuery ถึงได้รับความนิยมดังนั้นสิ่งสำคัญคือการเข้าใจว่าเรามาจากไหน!

ประมาณทศวรรษที่แล้วเบราว์เซอร์ยอดนิยมคือ IE6, Netscape 8 และ Firefox 1.5 ย้อนกลับไปในสมัยนั้นมีวิธีข้ามเบราว์เซอร์เล็กน้อยในการเลือกองค์ประกอบจาก DOM นอกเหนือจากDocument.getElementById()นั้น

ดังนั้นเมื่อ jQuery เปิดตัวในปี 2549มันเป็นการปฏิวัติที่ค่อนข้างใหม่ ก่อนหน้านั้น jQuery ได้กำหนดมาตรฐานสำหรับวิธีการเลือก / เปลี่ยนองค์ประกอบ HTML และเรียกใช้เหตุการณ์ได้อย่างง่ายดายเนื่องจากความยืดหยุ่นและการสนับสนุนเบราว์เซอร์นั้นไม่เคยมีมาก่อน

ตอนนี้มากกว่าทศวรรษต่อมาฟีเจอร์มากมายที่ทำให้ jQuery ได้รับความนิยมได้กลายเป็นมาตรฐานของจาวาสคริปต์:

• แทนที่จะเป็น jQuery $()คุณสามารถใช้งานได้แล้วDocument.querySelectorAll()
• แทนที่จะเป็น jQuery $el.on()คุณสามารถใช้งานได้แล้วEventTarget.addEventListener()
• แทนที่จะเป็น jQuery $el.toggleClass()คุณสามารถใช้งานได้แล้วElement.classList.toggle()
• ...

โดยทั่วไปจะไม่สามารถใช้งานได้ในปี 2005 ความจริงที่ว่าทุกวันนี้พวกเขาเห็นได้ชัดว่าเป็นคำถามว่าทำไมเราจึงควรใช้ jQuery และแน่นอนว่าผู้คนเริ่มสงสัยมากขึ้นว่าเราควรใช้ jQueryหรือเปล่า

ดังนั้นถ้าคุณคิดว่าคุณเข้าใจ JavaScript ดีพอที่จะทำโดยไม่มี jQuery โปรดทำ! อย่ารู้สึกถูกบังคับให้ใช้ jQuery เพียงเพราะมีคนอื่นมากมายที่ทำเช่นนั้น

นั่นเป็นเพราะ jQuery querySelectorAllสามารถทำได้มากกว่า

ก่อนอื่น jQuery (และ Sizzle โดยเฉพาะ) ทำงานกับเบราว์เซอร์รุ่นเก่าเช่น IE7-8 ที่ไม่รองรับ CSS2.1-3 selector

ยิ่งไปกว่านั้น Sizzle (ซึ่งเป็นเอ็นจิ้นตัวเลือกที่อยู่เบื้องหลัง jQuery) มอบเครื่องมือตัวเลือกขั้นสูงมากมายให้คุณเช่น:selectedpseudo-class :not()ตัวเลือกขั้นสูงซินแทกซ์ที่ซับซ้อนยิ่งขึ้น$("> .children")เป็นต้น

และมันไม่ข้ามเบราว์เซอร์ไม่มีที่ติให้ทุกสิ่งที่ jQuery สามารถนำเสนอ (ปลั๊กอินและ API)

ใช่ถ้าคุณคิดว่าคุณสามารถพึ่งพาคลาสที่เรียบง่ายและตัวเลือกรหัส jQuery นั้นมากเกินไปสำหรับคุณและคุณจะจ่ายเงินที่เกินจริง แต่ถ้าคุณทำไม่ได้และต้องการใช้ประโยชน์จากความดีทั้งหมดของ jQuery ให้ใช้มัน

เอ็นจิ้นตัวเลือก Sizzle ของ jQuery สามารถใช้ได้querySelectorAllถ้ามี นอกจากนี้ยังช่วยลดความไม่สอดคล้องระหว่างเบราว์เซอร์เพื่อให้ได้ผลลัพธ์ที่สม่ำเสมอ หากคุณไม่ต้องการใช้ jQuery ทั้งหมดคุณสามารถใช้ Sizzle แยกกันได้ นี่คือล้อพื้นฐานที่น่ารัก

ต่อไปนี้คือการหยิบเชอร์รี่จากแหล่งที่แสดงประเภทของ jQuery (w / Sizzle) ที่คัดสรรมาให้คุณ:

โหมดซาฟารีนิสัยใจคอ:

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;
    }

หากยามที่ล้มเหลวที่จะใช้มันเป็นรุ่นของ Sizzle querySelectorAllที่ไม่ได้เพิ่มขึ้นด้วย นอกจากนี้ยังมีจุดจับเฉพาะสำหรับความไม่สอดคล้องใน IE, Opera และเบราว์เซอร์ 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 );
  }

oldSizzle(query, context, extra, seed)และถ้าทุกคนอื่นไม่ว่ามันจะกลับมาผลมาจากการ

ในแง่ของความสามารถในการบำรุงรักษาโค้ดมีหลายสาเหตุที่ต้องยึดติดกับไลบรารี่ที่ใช้กันอย่างแพร่หลาย

หนึ่งในคนหลักคือพวกเขามีเอกสารที่ดีและมีชุมชนเช่น ... พูดว่า ... stackexchange ซึ่งสามารถพบความช่วยเหลือในห้องสมุด ด้วยไลบรารีโค้ดที่กำหนดเองคุณจะมีซอร์สโค้ดและอาจเป็นเอกสารวิธีการยกเว้นกรณีที่ coder ใช้เวลาในการจัดทำเอกสารรหัสมากกว่าการเขียนซึ่งหาได้ยาก

การเขียนห้องสมุดของคุณเองอาจเหมาะสำหรับคุณแต่การฝึกงานที่โต๊ะถัดไปอาจทำให้คุณใช้เวลาในการเร่งความเร็วด้วย jQuery ได้ง่ายขึ้น

เรียกว่าผลกระทบเครือข่ายถ้าคุณต้องการ นี่ไม่ได้เป็นการบอกว่ารหัสจะดีกว่าใน jQuery ลักษณะที่กระชับของรหัสทำให้ง่ายต่อการเข้าใจโครงสร้างโดยรวมของโปรแกรมเมอร์ทุกระดับทักษะหากเพียงเพราะมีรหัสการทำงานที่มองเห็นได้มากกว่าในไฟล์ที่คุณกำลังดูอยู่ ในกรณีนี้โค้ด 5 บรรทัดดีกว่า 10

สรุปแล้วฉันเห็นประโยชน์หลักของ jQuery ว่าเป็นรหัสรัดกุมและแพร่หลาย

นี่คือการเปรียบเทียบหากฉันต้องการใช้คุณสมบัติเดียวกันเช่นซ่อนองค์ประกอบทั้งหมดของคลาส "my-class" นี่คือเหตุผลหนึ่งที่ใช้ 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';
}

ด้วย jQuery ที่ได้รับความนิยมอย่างมากพวกเขาควรทำ document.querySelector () ทำตัวเหมือน $ document.querySelector () จะเลือกเฉพาะองค์ประกอบแรกที่ตรงกันซึ่งจะทำให้มีประโยชน์เพียงครึ่งเดียว

ตามที่เว็บไซต์ทางการบอกว่า: "jQuery: The Less Less, Do More, JavaScript Library"

พยายามแปลรหัส jQuery ต่อไปนี้โดยไม่ต้องมีไลบรารีใด ๆ

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

ฉันคิดว่าคำตอบที่แท้จริงคือ jQuery ได้รับการพัฒนามานานก่อนที่จะquerySelector/querySelectorAllมีให้บริการในเบราว์เซอร์หลัก ๆ ทั้งหมด

รุ่นแรกของjQuery คือในปี 2006 ในความเป็นจริงแม้ jQuery ไม่ได้เป็นครั้งแรกที่นำมาใช้ตัวเลือก CSS

IE เป็นเบราว์เซอร์ที่ผ่านมาquerySelector/querySelectorAllในการดำเนินการ รุ่นที่ 8 ได้รับการปล่อยตัวในปี 2009

ดังนั้นตอนนี้ตัวเลือกองค์ประกอบ DOM ไม่ใช่จุดที่แข็งแกร่งที่สุดของ jQuery อีกต่อไป อย่างไรก็ตามยังมีสินค้าอีกมากมายเช่นทางลัดเพื่อเปลี่ยนเนื้อหา css และ html ขององค์ประกอบภาพเคลื่อนไหวการผูกกิจกรรมอาแจ็กซ์

คำถามเก่า แต่ครึ่งทศวรรษต่อมามันคุ้มค่าที่จะกลับมาอีก ที่นี่ฉันพูดถึงเรื่องตัวเลือกของ jQuery เท่านั้น

document.querySelector[All]ได้รับการสนับสนุนโดยเบราว์เซอร์ปัจจุบันทั้งหมดจนถึง IE8 ดังนั้นความเข้ากันได้จึงไม่เป็นปัญหาอีกต่อไป ฉันยังพบว่าไม่มีปัญหาเรื่องประสิทธิภาพในการพูด (ควรจะช้ากว่าdocument.getElementByIdแต่การทดสอบของฉันเองชี้ให้เห็นว่ามันเร็วกว่าเล็กน้อย)

ดังนั้นเมื่อมันมาถึงการจัดการองค์ประกอบโดยตรงมันเป็นที่ต้องการมากกว่า jQuery

ตัวอย่างเช่น:

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

เป็นอย่างมากมายดีกว่า:

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

เพื่อที่จะทำอะไรเลย jQuery จะต้องวิ่งผ่านโค้ดหนึ่งร้อยบรรทัด (ฉันเคยสืบค้นผ่านโค้ดเช่นด้านบนเพื่อดูว่า jQuery กำลังทำอะไรอยู่กับมัน) เห็นได้ชัดว่าเป็นการเสียเวลาของทุกคน

ค่าใช้จ่ายที่สำคัญอื่น ๆ ของ jQuery คือความจริงที่ว่ามันครอบคลุมทุกอย่างภายในวัตถุ jQuery ใหม่ ค่าใช้จ่ายนี้สิ้นเปลืองอย่างยิ่งหากคุณต้องการแกะวัตถุออกมาอีกครั้งหรือใช้วิธีการใดวิธีการหนึ่งในการจัดการกับคุณสมบัติที่มีอยู่ในองค์ประกอบดั้งเดิมแล้ว

อย่างไรก็ตาม jQuery มีข้อได้เปรียบอย่างไรในการจัดการกับคอลเลกชัน หากความต้องการคือการตั้งค่าคุณสมบัติของหลายองค์ประกอบ jQuery มีeachวิธีการในตัวซึ่งช่วยให้สิ่งนี้:

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

ในการทำเช่นนี้กับ Vanilla JavaScript จะต้องมีสิ่งนี้:

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

ซึ่งบางคนพบว่าน่ากลัว

ตัวเลือก jQuery นั้นแตกต่างกันเล็กน้อย แต่เบราว์เซอร์สมัยใหม่ (ยกเว้น IE8) จะไม่ได้รับประโยชน์มากนัก

ตามกฎแล้วฉันระมัดระวังไม่ให้ใช้ jQuery สำหรับโครงการใหม่ :

• jQuery เป็นห้องสมุดภายนอกที่เพิ่มค่าใช้จ่ายของโครงการและการพึ่งพาบุคคลที่สาม
• ฟังก์ชั่น jQuery มีราคาแพงมากการประมวลผลที่ชาญฉลาด
• jQuery กำหนดวิธีการซึ่งจำเป็นต้องเรียนรู้และอาจแข่งขันกับด้านอื่น ๆ ของรหัสของคุณ
• jQuery ช้าที่จะเปิดเผยคุณสมบัติใหม่ใน JavaScript

หากไม่มีสิ่งใดที่กล่าวมาข้างต้นทำสิ่งที่คุณต้องการ อย่างไรก็ตาม jQuery ไม่ได้มีความสำคัญต่อการพัฒนาข้ามแพลตฟอร์มเหมือนที่เคยเป็นมาเพราะ JavaScript และ CSS ที่ทันสมัยนั้นมีมากกว่าที่เคยเป็นมา

สิ่งนี้ไม่ได้กล่าวถึงคุณสมบัติอื่น ๆ ของ jQuery อย่างไรก็ตามฉันคิดว่าพวกเขาก็ต้องดูอย่างใกล้ชิด

$ ("# id") vs document.querySelectorAll ("# id")

ดีลคือฟังก์ชั่น $ () ที่สร้างอาร์เรย์ขึ้นมาแล้วแบ่งให้คุณ แต่ด้วย document.querySelectorAll () มันจะสร้างอาร์เรย์ขึ้นมาและคุณต้องแยกมันออก

เพียงความเห็นเกี่ยวกับเรื่องนี้เมื่อใช้ไลต์การออกแบบวัสดุตัวเลือก jquery จะไม่ส่งคืนคุณสมบัติสำหรับการออกแบบวัสดุด้วยเหตุผลบางประการ

สำหรับ:

<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>

งานนี้:

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

สิ่งนี้ไม่:

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