มีอะไรใหม่ใน jQuery 3 - 10 คุณสมบัติเจ๋งที่สุด

jQuery 3.0 ซึ่งเป็น jQuery รุ่นใหม่ที่ได้รับการปล่อยตัวออกมาในที่สุด ชุมชนนักพัฒนาเว็บรอขั้นตอนที่สำคัญนี้ตั้งแต่เดือนตุลาคม 2014 เมื่อทีม jQuery เริ่มทำงานกับเวอร์ชันหลักใหม่จนถึงตอนนี้มิถุนายน 2559 เมื่อ รุ่นสุดท้าย ออก.

บันทึกประจำรุ่นสัญญา slimmer และเร็วขึ้น jQuery ด้วย เข้ากันได้ย้อนหลัง ในใจ. ในโพสต์นี้เราได้ดูคุณสมบัติใหม่บางอย่างของ jQuery 3.0 เพื่อให้ภาพรวมเกี่ยวกับการเปลี่ยนแนวนอนของ JavaScript.

จะเริ่มที่ไหนดี

หากคุณต้องการดาวน์โหลด jQuery 3.0 เพื่อทดลองด้วยตัวเองให้ไปที่หน้าดาวน์โหลด นอกจากนี้ยังควรดูคู่มือการอัปเกรดหรือซอร์สโค้ดด้วย.

หากคุณต้องการทดสอบการทำงานของโครงการที่มีอยู่กับ jQuery 3.0 คุณสามารถลองปลั๊กอิน jQuery Migrate ที่ระบุปัญหาความเข้ากันได้ในโค้ดของคุณ นอกจากนี้คุณยังสามารถมองเข้าไปในเหตุการณ์สำคัญในอนาคต.

บทความนี้ไม่ครอบคลุม ทั้งหมด คุณสมบัติใหม่ของ jQuery 3.0 เฉพาะคุณสมบัติที่น่าสนใจยิ่งขึ้นเท่านั้น: คุณภาพของรหัสที่ดีขึ้นการรวมคุณสมบัติ ECMAScript 6 ใหม่, API ใหม่สำหรับภาพเคลื่อนไหว, วิธีการใหม่สำหรับการหลบเลี่ยงสตริง, เพิ่มการรองรับ SVG เพิ่มขึ้น และเพิ่มความปลอดภัย.

1. การแก้ปัญหา IE แบบเก่าถูกลบแล้ว

หนึ่งในเป้าหมายหลักของการเปิดตัวครั้งใหญ่ครั้งใหม่คือการสร้างมันขึ้นมา เร็วขึ้นและเงาขึ้น, ดังนั้นแฮ็กเก่าและวิธีแก้ปัญหาที่เกี่ยวข้องกับ IE9- ถูกลบแล้ว. หมายความว่าหากคุณต้องการหรือต้องการรองรับ IE6-8 คุณจะต้องใช้เวอร์ชันล่าสุดต่อไป 1.12 ปล่อยเป็นแม้กระทั่ง 2.x ซีรีส์ไม่ได้รับการสนับสนุนอย่างเต็มที่สำหรับ Internet Explorer รุ่นเก่า (IE9-) ตรวจสอบหมายเหตุเกี่ยวกับการสนับสนุนเบราว์เซอร์ในเอกสาร.

โปรดทราบว่ายังมี คุณสมบัติที่เลิกใช้จำนวนมาก ใน jQuery 3. ข้อบกพร่องที่สำคัญของคู่มือการอัปเกรดคือคุณสมบัติที่เลิกใช้แล้ว - ณ เดือนมิถุนายน 2559 - ไม่ได้จัดกลุ่มดังนั้นหากคุณสนใจพวกเขาคุณจะต้องค้นหาด้วยเครื่องมือค้นหาเบราว์เซอร์ของคุณ ( Ctrl + F).

2. jQuery 3.0 ทำงานในโหมดเข้มงวด

เนื่องจากเบราว์เซอร์ส่วนใหญ่สนับสนุนโดย jQuery 3 รองรับโหมดเข้มงวดจึงมีการสร้างรีลีสหลักใหม่ด้วยคำสั่งนี้.

แม้ว่า jQuery 3 จะถูกเขียนในโหมดเข้มงวด แต่สิ่งสำคัญคือต้องรู้ รหัสของคุณไม่จำเป็นต้องเรียกใช้ในโหมดเข้มงวด, แล้วคุณละ ไม่จำเป็นต้องเขียนซ้ำ รหัส jQuery ที่มีอยู่ของคุณหากคุณต้องการย้ายไปยัง jQuery 3. JavaScript โหมดเข้มงวดและไม่เข้มงวด JavaScript สามารถอยู่ร่วมกันอย่างมีความสุข.

มีข้อยกเว้นหนึ่งข้อ: ASP.NET บางรุ่น นั่น - เนื่องจากโหมดเข้มงวด - เป็น เข้ากันไม่ได้กับ jQuery 3. หากคุณเกี่ยวข้องกับ ASP.NET คุณสามารถดูรายละเอียดได้ที่นี่ในเอกสาร.

3. สำหรับ ... จากลูปถูกแนะนำ

jQuery 3 รองรับคำสั่ง for … of ซึ่งเป็นรูปแบบใหม่ สำหรับ วนนำมาใช้ใน ECMAScript 6 มันให้วิธีที่ตรงไปตรงมามากขึ้น วนลูปมากกว่าวัตถุ iterable, เช่นอาร์เรย์แผนที่และชุด.

ใน jQuery สำหรับ ... จาก วงสามารถแทนที่อดีต $ .each (…) ไวยากรณ์และสามารถทำให้ง่ายขึ้นในการวนลูปผ่านองค์ประกอบของคอลเลกชัน jQuery.

สังเกตว่า สำหรับ ... จาก ห่วงจะ ทำงานเท่านั้น ทั้งในสภาพแวดล้อมที่ รองรับ ECMAScript 6, หรือถ้าคุณ ใช้คอมไพเลอร์ JavaScript เช่นบาเบล.

4. ภาพเคลื่อนไหวมี API ใหม่

jQuery 3 ใช้ requestAnimationFrame () API สำหรับการแสดงภาพเคลื่อนไหว ทำงานได้ราบรื่นขึ้นและเร็วขึ้น. API ใหม่จะใช้ในเบราว์เซอร์ที่รองรับเท่านั้น สำหรับเบราว์เซอร์รุ่นเก่า (เช่น IE9) jQuery ใช้ API ก่อนหน้านี้เป็นวิธีสำรองเพื่อแสดงภาพเคลื่อนไหว.

RequestAnimationFrame ได้รับการออกในขณะที่ถ้าคุณมีความสนใจในสิ่งที่รู้หรือทำไมคุณควรใช้ CSS Tricks มีโพสต์ที่ดีเกี่ยวกับมัน.

5. วิธีการใหม่สำหรับการหลบหนีสตริงที่มีความหมายพิเศษ

ใหม่ jQuery.escapeSelector () วิธีการช่วยให้คุณสามารถหลบหนีสตริงหรือตัวละครที่ หมายถึงอย่างอื่นใน CSS เพื่อที่จะสามารถ ใช้ใน jQuery-selector; ล่าม JavaScript ไม่สามารถเข้าใจได้.

เอกสารช่วยให้เราเข้าใจวิธีการนี้ดีขึ้นด้วยตัวอย่างต่อไปนี้:

“ตัวอย่างเช่นหากองค์ประกอบบนหน้ามีรหัส “abc.def” ไม่สามารถเลือกได้ $ ("# abc.def") เนื่องจากตัวเลือกถูกแยกวิเคราะห์เป็น “องค์ประกอบที่มี ID 'abc' ที่ยังมีชั้นเรียน 'def'. อย่างไรก็ตามมันสามารถเลือกได้ด้วย $ ("#" + $ .escapeSelector ("abc.def")).”

ฉันไม่แน่ใจว่าเกิดกรณีนี้บ่อยเพียงใด แต่ถ้าคุณเจอปัญหาเช่นนี้ตอนนี้คุณมีวิธีง่ายๆในการแก้ไขอย่างรวดเร็ว.

6. วิธีการจัดการชั้นเรียนสนับสนุน SVG

น่าเสียดายที่ jQuery 3 ยังคงอยู่ ไม่รองรับ SVG อย่างสมบูรณ์, แต่เมธอด jQuery ที่จัดการชื่อคลาส CSS เช่น .addClass () และ .hasClass (), ตอนนี้สามารถใช้เพื่อ เอกสาร SVG เป้าหมาย เช่นกัน ซึ่งหมายความว่าคุณสามารถแก้ไข (เพิ่มลบสลับ) หรือค้นหาคลาสด้วย jQuery ในกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้, จากนั้นจัดรูปแบบคลาสด้วย CSS.

7. ออบเจกต์ที่ถูกเลื่อนจะสามารถทำงานร่วมกับสัญญาของ JS ได้

สัญญาจาวาสคริปต์ - วัตถุที่ใช้ สำหรับการคำนวณแบบอะซิงโครนัส - ได้รับการมาตรฐานใน ECMAScript 6; พฤติกรรมและคุณสมบัติของพวกเขาระบุไว้ในมาตรฐานสัญญา / A +.

ใน jQuery 3, วัตถุรอการตัดบัญชี ได้รับการทำให้เข้ากันได้กับสัญญาใหม่ / A + มาตรฐาน รอการตัดบัญชีคือ วัตถุที่เชื่อมโยงได้ ที่ทำให้มันเป็นไปได้ สร้างคิวการติดต่อกลับ.

การเปลี่ยนแปลงคุณสมบัติใหม่ วิธีเรียกใช้ฟังก์ชันการเรียกกลับแบบอะซิงโครนัส; สัญญา อนุญาตให้นักพัฒนาเขียนโค้ดแบบอะซิงโครนัสที่ใกล้เคียงกับตรรกะไปยังโค้ดซิงโครนัส.

ดูตัวอย่างโค้ดจากคำแนะนำในการอัพเกรดหรือดูบทแนะนำ Scotch.io ที่ยอดเยี่ยมเกี่ยวกับพื้นฐานของสัญญา JavaScript.

8. jQuery.when () ตีความหลายอาร์กิวเมนต์ที่แตกต่างกัน

$ .when () วิธีการให้วิธีการ ดำเนินการฟังก์ชั่นการโทรกลับ. มันเป็นส่วนหนึ่งของ jQuery ตั้งแต่รุ่น 1.5 มันเป็นวิธีที่ยืดหยุ่น มันยังใช้งานได้โดยไม่มีข้อโต้แย้งและสามารถยอมรับวัตถุหนึ่งตัวหรือมากกว่าเป็นอาร์กิวเมนต์ได้เช่นกัน.

jQuery 3 เปลี่ยนวิธีการโต้แย้งของ $ .when () ถูกตีความ เมื่อพวกเขามี จากนั้น $ () วิธี ซึ่งคุณสามารถส่งการเรียกกลับเพิ่มเติมเป็นอาร์กิวเมนต์ไปที่ $ .when () วิธี.

ใน jQuery 3 ถ้าคุณเพิ่มอาร์กิวเมนต์อินพุตด้วย แล้ว () วิธีการ $ .when (), อาร์กิวเมนต์จะเป็น ตีความว่าเป็นสัญญาที่เข้ากันได้ "แล้ว".

ซึ่งหมายความว่า $ .when วิธีการจะสามารถ ยอมรับช่วงอินพุตของนักเรียนประจำ, เช่น Promises ES6 ดั้งเดิมและสัญญา Bluebird ซึ่งทำให้สามารถเขียน callback แบบอะซิงโครนัสที่ซับซ้อนมากขึ้น.

9. ใหม่แสดง / ซ่อนลอจิก

เพื่อที่จะเพิ่ม เข้ากันได้กับการออกแบบที่ตอบสนอง, รหัสที่เกี่ยวข้องกับ การแสดงและการซ่อนองค์ประกอบ ได้รับการปรับปรุงใน jQuery 3.

จากนี้ไป .แสดง(), .ซ่อน (), และ .สลับ () วิธีการจะมุ่งเน้น รูปแบบอินไลน์, แทนที่จะเป็นรูปแบบที่คำนวณด้วยวิธีนี้พวกเขาจะ เคารพการเปลี่ยนแปลงสไตล์ชีท.

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

เอกสารยืนยันว่าผลลัพธ์ที่สำคัญที่สุดคือ:

"เป็นผลให้องค์ประกอบที่ไม่ได้เชื่อมต่อคือ ไม่ถือว่าถูกซ่อนอีกต่อไป นอกเสียจากว่าพวกเขามีอินไลน์ แสดง: ไม่มี;, และดังนั้นจึง .สลับ () จะ ไม่แยกแยะพวกเขาอีกต่อไป จากองค์ประกอบที่เชื่อมต่อตั้งแต่ jQuery 3.0 "

ถ้าคุณต้องการที่จะเข้าใจ ผลลัพธ์ของลอจิกแสดง / ซ่อนใหม่, นี่คือการอภิปราย Github ที่น่าสนใจเกี่ยวกับมัน.

นักพัฒนา jQuery ยังเผยแพร่ตาราง Google Docs เกี่ยวกับวิธีการทำงานใหม่ของมัน ในกรณีการใช้งานที่แตกต่างกัน.

10. การป้องกันพิเศษจากการโจมตีของ XSS

เพิ่ม jQuery 3 แล้ว เลเยอร์ความปลอดภัยเพิ่มเติม ต่อต้านการโจมตี Cross-Site Scripting (XSS) โดยกำหนดให้นักพัฒนาระบุ dataType: "script" ในตัวเลือกของ $ .ajax () และ $ รับการตอบสนอง () วิธีการ.

กล่าวอีกนัยหนึ่งถ้าคุณต้องการดำเนินการตามคำขอสคริปต์ข้ามโดเมนคุณ ต้องประกาศสิ่งนี้ ในการตั้งค่าวิธีการเหล่านี้.

ตามเอกสารความต้องการใหม่จะมีประโยชน์เมื่อ "ไซต์ระยะไกล ส่งเนื้อหาที่ไม่ใช่สคริปต์ แต่ต่อมาตัดสินใจที่จะ ให้บริการสคริปต์ที่มีเจตนาร้ายการเปลี่ยนแปลงจะไม่มีผลกับ $ .getScript () วิธีการตามที่มันตั้งค่า dataType: "script" ตัวเลือกอย่างชัดเจน.