מה חדש ב jQuery 3 - 10 תכונות Coolest

jQuery 3.0, שחרורו העיקרי החדש של jQuery סוף סוף יש לשחרר. קהילת מפתחי האינטרנט חיכתה לצעד חשוב זה מאז אוקטובר 2014, כאשר צוות jQuery החל לעבוד על הגרסה החדשה החדשה עד כה, ביוני 2016, כאשר שחרור אחרון זה בחוץ.

שטר השחרור מבטיח רזה יותר ויותר jQuery, עם תאימות לאחור בראש. במאמר זה, יש לנו להסתכל על כמה תכונות חדשות של jQuery 3.0 לתת לך סקירה כללית על איך זה משנה את הנוף JavaScript.

איפה להתחיל

אם אתה רוצה להוריד jQuery 3.0 להתנסות בעצמך, עבור ישר אל דף ההורדה. כדאי גם לראות את המדריך לשדרוג, או את קוד המקור.

אם ברצונך לבדוק כיצד הפרוייקט הקיים שלך עובד עם jQuery 3.0, באפשרותך לנסות את הפלאגין jQuery Migrate המזהה בעיות תאימות בקוד שלך. אתה יכול גם להציץ לתוך אבני דרך עתידיות.

מאמר זה אינו מכסה את כל את התכונות החדשות של jQuery 3.0, רק את אלה מעניינים יותר: איכות קוד טובה יותר, שילוב של תכונות חדשות של ECMAScript 6, API חדש עבור אנימציות, שיטה חדשה עבור בריחה מחרוזות, תמיכה מוגברת SVG, שיפור התקשרות async, תאימות טובה יותר עם אתרים תגובה , והגברת האבטחה.

1. IE הישן דרכים לעקיפת הבעיה הוסר

אחת המטרות העיקריות של המהדורה המרכזית החדשה היתה לעשות זאת מהר יותר, ולכן פריצות הישן ואת הדרכים לעקיפת הבעיה הקשורים IE9- הוסרו. כלומר, אם אתה רוצה או צריך לתמוך IE6-8, תצטרך להמשיך להשתמש האחרונה 1.12 לשחרר, כמו גם 2.x בסדרה אין תמיכה מלאה עבור מגלי אינטרנט ישנים יותר (IE9-). בדוק את ההערות על תמיכה בדפדפן במסמכים.

שים לב שיש גם תכונות רבות שהוצאו משימוש in jQuery 3. חסרון גדול במדריך השדרוג הוא שהתכונות שהוצאו משימוש - החל מחודש יוני 2016 - אינן מקובצות, לכן אם אתה מעוניין בהן, יהיה עליך לחפש אותן באמצעות כלי החיפוש של הדפדפן שלך ( Ctrl + F).

2. jQuery 3.0 פועל במצב קפדני

כמו רוב הדפדפנים הנתמכים על ידי jQuery 3 תמיכה במצב קפדני, את המהדורה החדשה החדשה נבנו עם הנחיה זו בראש.

למרות jQuery 3 נכתב במצב קפדני, חשוב לדעת את זה הקוד שלך אינו נדרש לפעול במצב קפדני, אז אתה לא צריך לשכתב קוד jQuery הקיים שלך אם אתה רוצה להעביר את jQuery 3. קפדנית & לא קפדנית מצב JavaScript יכול להתקיים בשמחה.

יש חריג אחד: כמה גירסאות של ASP.NET כי - בגלל המצב הקפדני - הם לא תואם jQuery 3. אם אתה מעורב עם ASP.NET, אתה יכול לראות את הפרטים כאן מסמכים.

3. עבור ... של לולאות הוא הציג

jQuery 3 תומך עבור ... של משפט, סוג חדש של ל לולאה, הציג ב- ECMAScript 6. זה נותן דרך פשוטה יותר לולאה מעל אובייקטים, כגון מערכים, מפות וערכות.

ב- jQuery, בשביל לולאה יכול להחליף את לשעבר $ .כל (...) תחביר, והוא יכול להקל על לולאה דרך האלמנטים של אוסף jQuery.

שים לב כי בשביל לולאה יהיה רק עבודה בין אם בסביבה תומך ב- ECMAScript 6, או אם אתה להשתמש במהדר JavaScript כגון בבל.

4. אנימציות יש API חדש

jQuery 3 משתמש בממשק API RequestAnimationFrame () עבור ביצוע הנפשות, ביצוע הנפשות לרוץ חלקה יותר מהר. ממשק API החדש משמש רק בדפדפנים התומכים בו; עבור דפדפנים ישנים יותר (כלומר IE9) jQuery משתמשת בממשק ה- API הקודם שלה כשיטת החזרה להצגת הנפשות.

RequestAnimationFrame כבר מחוץ לזמן, אם אתה מעוניין במה שהוא יודע או למה אתה צריך להשתמש בו, CSS טריקים יש הודעה טובה על זה.

5. שיטה חדשה עבור בריחה מחרוזות עם משמעות מיוחדת

החדש jQuery.escapeSelector () השיטה מאפשרת לך לברוח מחרוזות או תווים מתכוון למשהו אחר ב- CSS כדי להיות מסוגל להשתמש בו ב- selecter jQuery; מבלי להימלט מתורגמן JavaScript לא יכול להבין את זה כראוי.

המסמכים עוזרים לנו להבין את השיטה בצורה טובה יותר בדוגמה הבאה:

“לדוגמה, אם אלמנט בדף מכיל מזהה “א ב ג ד ה ו” לא ניתן לבחור בה $ ("# abc.def") כי הבורר הוא מנותח כמו “אלמנט עם מזהה 'א ב ג' כי יש גם בכיתה 'def'. עם זאת, ניתן לבחור עם $ ("#" + $ .escapeSelector ("abc.def")).”

אני לא בטוח כמה פעמים מקרה כזה קורה, אבל אם אתה נתקל בבעיה כזאת, עכשיו יש לך דרך קלה לתקן את זה במהירות.

6. שיטות מניפולציה בכיתה תמיכה SVG

למרבה הצער, jQuery 3 עדיין אינו תומך באופן מלא ב- SVG, אבל שיטות jQuery כי לתפעל שמות בכיתה CSS, כגון .AddClass () ו .hasClass (), עכשיו ניתן להשתמש בו היעד מסמכים SVG גם כן. זה אומר שאתה יכול לשנות (להוסיף, להסיר, להחליף) או למצוא שיעורים עם jQuery ב גרפיקה וקטורית להרחבה, ואז לסגנון את הכיתות עם CSS.

7. אובייקטים נדחים כעת תואם עם הבטחות JS

הבטחות עבור חישובים אסינכרוני - תוקנו ב- ECMAScript 6; התנהגותם ותכונותיהם מפורטים בתקני הבטחות / A +.

ב- jQuery 3, חפצים נדחים נעשו תואמים את ההבטחות החדש / מבטיח +. נדחים הם אובייקטים שרשרת המאפשרים את זה ליצור תורי התקשרות.

התכונה החדשה משתנה כיצד מתבצעים פונקציות התקשרות אסינכרוני; הבטחות לאפשר למפתחים לכתוב קוד אסינכרוני כי הוא קרוב יותר ההיגיון קוד סינכרוני.

ראה דוגמאות קוד מתוך המדריך לשדרוג או, יש להסתכל על זה נהדר Scotch.io הדרכה על יסודות ההבטחות של JavaScript.

8. jQuery.when () מפרש Multi-Arguments אחרת

ה $ .when () השיטה מספקת דרך לבצע פונקציות התקשרות. זה חלק jQuery מאז גירסה 1.5. זוהי שיטה גמישה; זה גם עובד עם אפס ארגומנטים, והוא יכול לקבל אובייקט אחד או יותר כמו גם טיעונים.

משנה את האופן שבו הארגומנטים של $ .when () מתפרשים כאשר הם מכילים את $ .then () שיטה שבו אתה יכול להעביר שיחות נוספות כמו ארגומנטים ל $ .when () שיטה.

ב- jQuery 3, אם תוסיף ארגומנט קלט עם לאחר מכן() השיטה post $ .when (), הטענה תהיה לפרש כמו "מבטיח" תואם ".

משמעות הדבר היא כי $ .when השיטה תהיה מסוגלת לקבל טווח דייר של תשומות, כגון הבטחות ES6 הילידים והבטחות Bluebird, המאפשרת לכתוב התקשרויות מתוחכמות יותר מתוחכמות.

9. חדש הצג / הסתר היגיון

על מנת להגביר תאימות עם עיצוב תגובה, הקוד קשור מראה והסתרת אלמנטים עודכן ב- jQuery 3.

מעתה ואילך .הצג (), .להתחבא(), ו .toggle () שיטות יתמקדו סגנונות מוטבעים, במקום סגנונות מחושבים, כך הם טוב יותר.

הקוד החדש מכבד את להציג ערכים של גליונות סגנונות בכל פעם שזה אפשרי, כלומר, הכללים CSS יכול שינוי דינמי על אירועים כגון שינוי כיוון המכשיר וגודל החלון.

המסמכים קובעים כי התוצאה החשובה ביותר תהיה:

"כתוצאה מכך, אלמנטים מנותקים הם לא נחשב עוד מוסתר אלא אם כן יש להם inline אל תציג דבר;, ולכן .toggle () רצון לא עוד להבדיל ביניהם מ אלמנטים מחוברים כמו של jQuery 3.0. "

אם אתה רוצה להבין טוב יותר את תוצאות של הצג חדש / להסתיר ההיגיון, הנה דיון מעניין על זה Github על זה.

מפתחי jQuery פרסמו גם טבלה של Google Docs על האופן שבו ההתנהגות החדשה תפעל במקרים שונים.

10. הגנה נוספת מפני התקפות XSS

jQuery 3 נוסף שכבת אבטחה נוספת נגד התקפות Scripting בין אתרים (XSS) על ידי דרישה למפתחים לציין dataType: "script" באופציות של $ .ajax () וה $ .get () שיטות.

במילים אחרות, אם ברצונך לבצע בקשות סקריפט בין תחומים, אתה חייב להכריז על כך בהגדרות של שיטות אלה.

על פי המסמכים, הדרישה החדשה שימושית כאשר "אתר מרוחק" מספק תוכן שאינו סקריפט אבל מאוחר יותר מחליט לשרת סקריפט בעל כוונות זדוניות"השינוי אינו משפיע על $ .getScript () שיטה, כפי שהוא קובע את dataType: "script" אופציה מפורשת.