Có gì mới trong jQuery 3 - 10 Tính năng thú vị nhất
jQuery 3.0, bản phát hành chính mới của jQuery cuối cùng đã được phát hành. Cộng đồng nhà phát triển web đã chờ đợi bước quan trọng này kể từ tháng 10 năm 2014, khi nhóm jQuery bắt đầu làm việc trên phiên bản chính mới cho đến bây giờ, tháng 6 năm 2016, khi phát hành cuối cùng là ra.
Ghi chú phát hành hứa hẹn một mỏng hơn và nhanh hơn jQuery, với tương thích ngược trong tâm trí. Trong bài đăng này, chúng tôi đã xem xét một số tính năng mới của jQuery 3.0 để cung cấp cho bạn tổng quan về cách nó thay đổi cảnh quan JavaScript.
Bắt đầu từ đâu
Nếu bạn muốn tải xuống jQuery 3.0 để tự mình thử nghiệm, hãy truy cập ngay vào trang tải xuống. Cũng đáng để xem Hướng dẫn nâng cấp hoặc mã nguồn.
Nếu bạn muốn kiểm tra cách dự án hiện tại của bạn hoạt động với jQuery 3.0, bạn có thể dùng thử plugin jQuery Migrate xác định các vấn đề tương thích trong mã của bạn. Bạn cũng có thể xem qua các cột mốc trong tương lai.
Bài viết này không bao gồm tất cả các Các tính năng mới của jQuery 3.0, chỉ có những tính năng thú vị hơn: chất lượng mã tốt hơn, tích hợp các tính năng ECMAScript 6 mới, API mới cho hoạt hình, một phương pháp mới để thoát chuỗi, tăng hỗ trợ SVG, gọi lại async được cải thiện, tương thích tốt hơn với các trang web phản hồi tốt hơn và tăng cường bảo mật.
1. Cách giải quyết cũ của IE đã bị xóa
Một trong những mục tiêu chính của phiên bản chính mới là làm cho nó nhanh hơn và đẹp hơn, do đó, các bản hack và cách giải quyết cũ liên quan đến IE9- đã được gỡ bỏ. Điều này có nghĩa là nếu bạn muốn hoặc cần hỗ trợ IE6-8, bạn sẽ phải tiếp tục sử dụng bản mới nhất 1,12 phát hành, ngay cả 2.x loạt không có hỗ trợ đầy đủ cho Internet Explorers cũ (IE9-). Kiểm tra các ghi chú về hỗ trợ trình duyệt trong tài liệu.
Lưu ý rằng cũng có nhiều tính năng không dùng nữa trong jQuery 3. Một thiếu sót lớn của Hướng dẫn nâng cấp là các tính năng không dùng nữa - kể từ tháng 6 năm 2016 - không được nhóm lại, vì vậy nếu bạn quan tâm đến chúng, bạn sẽ cần tìm kiếm chúng bằng công cụ tìm kiếm của trình duyệt ( Ctrl + F).
2. jQuery 3.0 chạy ở chế độ nghiêm ngặt
Vì hầu hết các trình duyệt được hỗ trợ bởi jQuery 3 đều hỗ trợ chế độ nghiêm ngặt, bản phát hành chính mới đã được xây dựng theo hướng dẫn này.
Mặc dù jQuery 3 đã được viết ở chế độ nghiêm ngặt, nhưng điều quan trọng cần biết là mã của bạn không bắt buộc phải chạy trong chế độ nghiêm ngặt, vậy bạn không cần viết lại mã jQuery hiện tại của bạn nếu bạn muốn di chuyển sang jQuery 3. JavaScript chế độ nghiêm ngặt và không nghiêm ngặt hạnh phúc có thể cùng tồn tại.
Có một ngoại lệ: một số phiên bản của ASP.NET rằng - vì chế độ nghiêm ngặt - là không tương thích với jQuery 3. Nếu bạn tham gia với ASP.NET, bạn có thể xem chi tiết ở đây trong tài liệu.
3. Giới thiệu về Loops của Loops
jQuery 3 hỗ trợ cho bản kê khai, một loại mới cho vòng lặp, được giới thiệu trong ECMAScript 6. Nó cung cấp một cách đơn giản hơn để vòng lặp trên các đối tượng lặp, chẳng hạn như Mảng, Bản đồ và Bộ.
Trong jQuery, cho người của vòng lặp có thể thay thế trước đây $ .each (Hoài) cú pháp và có thể giúp dễ dàng lặp qua các phần tử của bộ sưu tập jQuery.
Lưu ý rằng cho người của vòng lặp sẽ chỉ làm việc hoặc trong một môi trường hỗ trợ ECMAScript 6, hoặc nếu bạn sử dụng trình biên dịch JavaScript chẳng hạn như Babel.
4. Ảnh động Có API mới
jQuery 3 sử dụng API requestAnimationFrame () để thực hiện hoạt ảnh, tạo hoạt hình chạy mượt hơn và nhanh hơn. API mới chỉ được sử dụng trong các trình duyệt hỗ trợ nó; đối với các trình duyệt cũ hơn (tức là IE9) jQuery sử dụng API trước đó của nó làm phương thức dự phòng để hiển thị hình động.
RequestAnimationFrame đã ra mắt được một thời gian, nếu bạn quan tâm đến những gì nó biết hoặc tại sao bạn nên sử dụng nó, CSS Tricks có một bài viết hay về nó.
5. Phương pháp mới để thoát chuỗi với ý nghĩa đặc biệt
Cái mới jQuery.escapeSelector () phương thức cho phép bạn thoát khỏi chuỗi hoặc ký tự có nghĩa là một cái gì đó khác trong CSS để có thể sử dụng nó trong bộ chọn jQuery; không thoát khỏi trình thông dịch JavaScript có thể hiểu đúng về nó.
Các tài liệu giúp chúng ta hiểu phương pháp này tốt hơn với ví dụ sau:
“Ví dụ: nếu một phần tử trên trang có id là “abc.def” nó không thể được chọn với $ ("# abc.def") bởi vì bộ chọn được phân tích cú pháp như “một yếu tố với id 'abc' cũng có một lớp 'def'. Tuy nhiên, nó có thể được chọn với $ ("#" + $ .escapeSelector ("abc.def")).”
Tôi không chắc mức độ thường xuyên xảy ra trường hợp như vậy, nhưng nếu bạn gặp phải một vấn đề như thế này, bây giờ bạn có một cách dễ dàng để nhanh chóng khắc phục nó.
6. Phương pháp thao tác lớp Hỗ trợ SVG
Thật không may, jQuery 3 vẫn không hỗ trợ đầy đủ SVG, nhưng các phương thức jQuery thao tác các tên lớp CSS, chẳng hạn như .addClass () và .hasClass (), bây giờ có thể được sử dụng để tài liệu SVG mục tiêu cũng. Điều này có nghĩa là bạn có thể sửa đổi (thêm, xóa, chuyển đổi) hoặc tìm các lớp với jQuery trong đồ họa vector có thể mở rộng, sau đó định kiểu các lớp bằng CSS.
7. Các đối tượng bị trì hoãn hiện tương thích với các lời hứa của JS
Lời hứa JavaScript - đối tượng được sử dụng cho các tính toán không đồng bộ - đã được chuẩn hóa trong ECMAScript 6; hành vi và tính năng của chúng được chỉ định trong các tiêu chuẩn Promise / A +.
Trong jQuery 3, Đối tượng trì hoãn đã được thực hiện tương thích với các tiêu chuẩn Promise / A + mới. Trì hoãn là đồ vật có dây điều đó làm cho nó có thể tạo hàng đợi gọi lại.
Tính năng mới thay đổi làm thế nào các hàm gọi lại không đồng bộ được thực thi; Hứa cho phép các nhà phát triển viết mã không đồng bộ gần logic hơn với mã đồng bộ.
Xem các ví dụ mã từ Hướng dẫn nâng cấp hoặc, hãy xem hướng dẫn tuyệt vời này của Scotch.io về những điều cơ bản của Lời hứa JavaScript.
8. jQuery.when () diễn giải nhiều đối số khác nhau
Các $ .when () phương pháp cung cấp một cách để thực hiện các chức năng gọi lại. Đây là một phần của jQuery kể từ phiên bản 1.5. Đó là một phương pháp linh hoạt; nó cũng hoạt động với các đối số bằng 0 và nó cũng có thể chấp nhận một hoặc nhiều đối tượng làm đối số.
jQuery 3 thay đổi cách đối số của $ .when () được giải thích khi chúng chứa $ .then () phương pháp với đó bạn có thể chuyển các cuộc gọi lại bổ sung làm đối số cho $ .when () phương pháp.
Trong jQuery 3, nếu bạn thêm một đối số đầu vào với sau đó() phương pháp để $ .when (), đối số sẽ là được hiểu là "có thể tương thích" với Promise.
Điều này có nghĩa là $. khi nào phương pháp sẽ có thể chấp nhận một phạm vi nội trú của đầu vào, chẳng hạn như Lời hứa ES6 bản địa và Lời hứa Bluebird, điều đó cho phép viết các cuộc gọi lại không đồng bộ phức tạp hơn.
9. Hiển thị mới / Ẩn logic
Để tăng tương thích với thiết kế đáp ứng, mã liên quan đến hiển thị và ẩn các yếu tố đã được cập nhật trong jQuery 3.
Từ bây giờ, .chỉ(), .ẩn giấu(), và .chuyển đổi () phương pháp sẽ tập trung vào phong cách nội tuyến, thay vì các kiểu tính toán, theo cách này họ sẽ tôn trọng thay đổi biểu định kiểu.
Mã mới tôn trọng trưng bày giá trị của biểu định kiểu bất cứ khi nào có thể, điều đó có nghĩa là các quy tắc CSS có thể thay đổi linh hoạt khi các sự kiện như định hướng lại thiết bị và thay đổi kích thước cửa sổ.
Các tài liệu khẳng định rằng kết quả quan trọng nhất sẽ là:
"Kết quả là, các yếu tố bị ngắt kết nối là không còn được coi là ẩn trừ khi họ có nội tuyến không trưng bày;, và do đó .chuyển đổi () sẽ không còn phân biệt chúng từ các phần tử được kết nối như của jQuery 3.0. "
Nếu bạn muốn hiểu rõ hơn về kết quả của chương trình mới / ẩn logic, đây là một cuộc thảo luận thú vị về Github về nó.
Các nhà phát triển jQuery cũng đã xuất bản bảng Google Docs về cách thức hoạt động mới trong các trường hợp sử dụng khác nhau.
10. Bảo vệ thêm chống lại các cuộc tấn công XSS
Đã thêm jQuery 3 một lớp bảo mật bổ sung chống lại các cuộc tấn công Cross-Site Scripting (XSS) bằng cách yêu cầu các nhà phát triển chỉ định dataType: "script" trong các tùy chọn của $ .ajax () và $ .get () phương pháp.
Nói cách khác, nếu bạn muốn thực hiện các yêu cầu tập lệnh tên miền chéo, bạn phải tuyên bố điều này trong cài đặt của các phương thức này.
Theo các tài liệu, yêu cầu mới hữu ích khi "trang web từ xa cung cấp nội dung phi kịch bản nhưng sau đó quyết định phục vụ một kịch bản có mục đích xấu". Thay đổi không ảnh hưởng đến $ .getScript () phương thức, vì nó thiết lập dataType: "script" tùy chọn rõ ràng.
