פרסומת
jQuery הוא ללא ספק מיומנות חיונית עבור המודרני מפתח אינטרנט איזו שפת תכנות ללמוד - תכנות אינטרנטהיום אנו נבחן את שפות תכנות האינטרנט השונות המפעילות את האינטרנט. זהו החלק הרביעי בסדרת תכנות למתחילים. בחלק 1 למדנו את הבסיס של ... קרא עוד , ובמיני-סדרה קצרה זו אני מקווה להעניק לך את הידע להתחיל להשתמש בה בפרויקטים ברשת משלך. בתוך ה החלק הראשון במדריך ה- jQuery שלנו מדריך jQuery - תחילת העבודה: יסודות ובוחריםבשבוע שעבר דיברתי על כמה חשוב jQuery לכל מפתח אינטרנט מודרני ומדוע זה מדהים. השבוע אני חושב שהגיע הזמן שנלכלך את היד עם קצת קוד ונלמד איך ... קרא עוד , בדקנו כמה יסודות שפה, וכיצד להשתמש בבוררים; בחלק 2 עברנו ל שיטות לתמרון ה- DOM מבוא ל- jQuery (חלק ב '): שיטות ופונקציותזה חלק ממבוא מתמשך למתחילים לסדרת תכנות האינטרנט jQuery. חלק 1 כיסה את היסודות של jQuery כיצד לכלול אותו בפרויקט שלך ובוחרים. בחלק 2 נמשיך עם ... קרא עוד .
בחלק 3 נתמודד עם הבעיה כיצד לעכב את jQuery עד שהדף נטען, אז אנסה להסביר מהן פונקציות אנונימיות ומדוע אתה צריך לדעת עליהן.
טעינה מושהית: כיצד ומדוע?
אם ניסית חלק מהקוד מחלק 1 ו -2, יתכן שנתקלת בשגיאות, התנהגות מוזרה או שדברים פשוט לא עובדים. השגיאה הנפוצה ביותר שחוויתי בעת לימוד jQuery הייתה זו של אלמנטים של DOM שלא נמצאו - אפילו למרות שברור שאפשר לראות אותם במקור הדף, jQuery המשיך ואמר לי שזה פשוט לא יכול היה למצוא אותם! למה?
ובכן, הכל קשור לסדר בו הדברים נטענים על ידי הדפדפן. זה הפשוט ביותר, אם יש לך סקריפט jQuery שרץ בדפדפן לפני נוצר למעשה אלמנט ה- DOM אותו הוא מחפש, הסקריפט יטען תחילה, אך לא יעשה דבר מכיוון שהוא לא יכול למצוא את האלמנט, ואז אלמנט ה- DOM יטען מאוחר יותר. זה פחות בעיה אם אתה ממקם את כל התסריטים שלך ליד הכותרת התחתונה, אך זה עדיין יכול לקרות.
הפיתרון הוא לעטוף את הסקריפטים שלך במה שמכונה א אירוע מוכן לתיעוד. זה גורם לקוד המצורף להמתין עד שה- DOM נטען במלואו (עד שהוא) מוכן). השימוש בו פשוט:
$ (מסמך) .ready (פונקציה () { // הקוד שלך לעיכוב נכנס לכאן. });יש דרך קצרה עוד יותר לעשות זאת המתואר בסעיף תיעוד jQuery, אבל אני ממליץ לך בחום להשתמש בדרך זו לקריאת קוד.
אירוע מוכן למסמך זה הוא דוגמא טובה נוספת לאירוע פונקציה אנונימיתאז בואו ננסה להבין מה המשמעות של זה.
פונקציות אנונימיות
אם כמוני יש לך חווית תכנות ברמה מתחילה מתחת לחגורה שלך, הרעיון של פונקציות אנונימיות - שזה הליבה ל- jQuery ו- Javascript - עשוי להיות מעט מרתיע. ראשית, זה עושה שגיאות בגלל סוגרים לא תואמים נפוצים למדי, וזו הסיבה שאני הולך להסביר את זה עכשיו. אם תרצה הסבר יסודי מדוע פונקציות אנונימיות עדיפות על שם רגיל מתפקד ברמה הטכנית יותר, הייתי מציע לקרוא את הפוסט הבלוגי המורכב הזה [לא ארוך יותר זמין].
עד עכשיו בטח נתקלת רק פונקציות בשם. אלה פונקציות שהוכרזו עם שם ולכן ניתן לקרוא להן בכל מקום אחר, כמה פעמים שתרצו. קחו למשל את הדוגמא הטריוויאלית הזו, שתירשם הודעה למסוף כאשר העמוד נטען.
פונקציה doStuffOnPageLoad () { console.log ("עושה דברים!"); } $ (מסמך) .ready (doStuffOnPageLoad);זה שימושי אם הפונקציה שלך מתוכננת לשימוש חוזר, אבל במקרה זה היא סוג של מפותל מכיוון שאנחנו רק רוצים שהיא תיפעל פעם אחת כאשר העמוד נטען. במקום זאת, אנו לא טורחים להגדיר פונקציה נפרדת, ופשוט מכריזים שהיא מקוונת כפרמטר לפי הצורך. על כן הדוגמה הקודמת תיכתב מחדש טוב יותר כך:
$ (מסמך) .ready (פונקציה () { console.log ("עושה דברים"); });יתכן שלא תראה יתרונות רבים בכך כרגע - זה פחות קוד באופן שולי פחות במקרה הזה - אבל כמו התסריטים שלך מתקדמים במורכבות שתעריך שלא תצטרך לקפוץ סביב מנסה למצוא פונקציה הגדרות. למרבה הצער, זה אכן מקשה על דברים מעט יותר למתחילים - פשוט תסתכל על כל הפלטות הללו - אז הקפד לבדוק את הנקודות הבאות אם אתה טועה בשגיאות:
- המספר הנכון של הפלטה המתאימה - הזנת הקוד שלך עוזרת.
- סד מתולתל לעומת עגול.
- הצהרת סגירה עם פסיק - אך לא נחוצה לאחר סגר מתולתל שנסגר.
באמצעות עורך קוד כמו טקסט נשגב 2 נסה טקסט 2 נשגב לצורכי עריכת קוד חוצה פלטפורמות שלךSublime Text 2 הוא עורך קוד חוצה פלטפורמות ששמעתי עליו רק לאחרונה, ואני חייב לומר שאני ממש מתרשם למרות תווית הבטא. אתה יכול להוריד את האפליקציה המלאה בלי לשלם אגורה ... קרא עוד באמת יכול לעזור שכן הוא מדגיש את הסד המתאים ומקודד אוטומטית קוד עבורך. עורך קוד ייעודי הוא חיוני, באמת.
זהו זה בשיעור הזה, אך עליכם להיכנס להרגל לכלול כמה מניפולציות בסיסיות של ה- DOM באירוע מוכן למסמך לפני שתעבור הלאה, והתחל לערוך קבצים בעורך קוד אם אתה לא כבר. בפעם הבאה נבדוק אירועים וכיצד הם משמשים להוסיף אינטראקטיביות לדף - כמו לגרום ל- jQuery לעשות משהו כאשר לוחצים על כפתור. שאלות או הערות מוזמנים תמיד להלן.
ג'יימס הוא בעל תואר ראשון בבינה מלאכותית, והוא מוסמך CompTIA A + ו- Network +. הוא המפתח הראשי של MakeUseOf, ומבלה את זמנו הפנוי במשחקי פיינטבול VR ומשחקי לוח. הוא בנה מחשבים אישיים מאז שהיה ילד.
