[Powered by Google Translate] [סמינר] [מסגרות JavaScript: מדוע וכיצד] [קווין שמידט] [אוניברסיטת הרווארד] [זה CS50.] [CS50.TV] 

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

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

בואו נתחיל ביישום שרשימת מטלות. נניח שאנו מקבלים HTML זה. אני הולך לעשות את זה קצת יותר קטן. כפי שאתה יכול לראות, יש לי כותרת קטנה שאומרת Todo וקופסה קטנה שבו אני יכול להזין תיאור של ToDo ולאחר מכן על כפתור פריט חדש, אז בואו ננסה להיכנס לרשימת משימות לביצוע חדש לרשימה זו. תן סמינר JavaScript מסגרות, ואני לרמה של פריט חדש. אני מקבל התראת JavaScript זה שאומר לי ליישם. אנחנו חייבים ליישם את זה. בואו לבדוק את הקוד לזה, גם את ה-HTML וה-JavaScript. הנה HTML שלנו. כפי שאתם יכולים לראות כאן, הנה כותרת טודוס הקטנה שלנו. זה היה דבר שמודגש בחלקו העליון, ולאחר מכן יש לנו עם תיבת הקלט מציין מיקום, ואז יש תכונה מסוימת שלהן זה שקורא addTodo בפונקציה זו. האם מישהו רוצה לנחש מה שהוא מסמל בלחיצה? [סטודנטים תגובה לא נשמעה] טובה, הלחיצה עליו כמו סוג של אירוע, כמו לחיצה על העכבר היא רק אירוע, ומה שאנחנו עושים הוא שאנחנו קושרים את האירוע של לחיצה על כפתור זה כדי להפעיל את הפונקציה הזאת. AddTodo הוא מטפל באירועים זה ללחיצה על כפתור זה. 

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

בואו לתת זה זריקה. בואו נגיד שהמשתמש מזין משהו בתיבה זו. אני רק הקלדתי משהו בפה, טקסט. כיצד אני יכול למיין את הגישה שטקסט באמצעות JavaScript? זכור כי JavaScript, אחת מתכונות היסוד שלה היא שהיא נותנת לנו זו גישה תוכניתית לDOM. זה מאפשר לנו לגשת לאלמנטים ומאפייניהם של HTML בפועל זה. הדרך בה אנו עושים את זה עם העצמות חשופות JavaScript הוא למעשה אנו יכולים להשתמש בפונקציה שנקראת ב-JavaScript getElementByID. אני רוצה לשמור את הטקסט שהקליד שם בכמה משתנים, אז אני הולך לומר משתנה חדש בשם new_todo, ואני הולך לקבל אותו האלמנט. זוהי פונקציה,. GetElementByID. ועכשיו אני מקבל את אלמנט לפי תעודת זהות, ולכן אני צריך את תעודת זהות של אותה תיבת טקסט, אז נתתי לו new_todo_description מזהה. ככה אני הולך לקבל את אלמנט. זה הטיעון שלי לתפקיד הזה, כדי לציין שכדי לקבל תעודת זהות. ואז זה אלמנט ב-HTML, ויש לה תכונות. ראית את אלה. הם תכונות. תכונה של אלמנט הטקסט שמאחסן את הקלט של המשתמש נקראת ערך. אני הצלתי את הערך של תיבת טקסט שעכשיו במשתנה הזה שנקרא new_todo. עכשיו יש לי גישה תוכניתית למשתנה זה, שהוא די מגניב כי עכשיו מה שאני יכול לעשות הוא שאני יכול להוסיף אותו לרשימת המטלות שלי. 

כפי שהיינו עושה את זה ב-JavaScript, ואל תדאג אם אתה לא מכיר את זה, אבל פשוט עובר את זה הוא todos.push כי זה שמו של מבנה נתונים הגלובלי שלי כאן למעלה, ואני הולך לדחוף new_todo. זה נהדר, כי עכשיו יש לי הוסיף אותו לJavaScript ייצוג של רשימת מטלות. אבל עכשיו איך אני מגיע בחזרה לHTML? אני חייב למצוא דרך כדי למיין של לדחוף אותו בחזרה. במילים אחרות, אני סוג של צריך לצייר את זה. מה שאנחנו הולכים לעשות הוא שאנחנו הולכים לצייר את רשימת מטלות. אני צריך לעדכן את ה-HTML אחר בדף זה, וכמו שאתה יכול לראות, אני כבר עזבתי את המכל הקטן הזה כאן, מחיצה זו של דפו הוא מזהה todos, ואני הולך לשים את רשימת מטלות שיש. ראשית אני הולך לנקות את זה, כי, למשל, היה רשימת מטלות ישנה שם. אני מקבל אלמנט שלפי תעודת זהות שוב, ואני ניגש לHTML הפנימי של רכיב זה, ואני הולך לנקות את זה. אם השארנו את הקוד הזה כמו שהוא, היינו רואה שום דבר ריק שם, ועכשיו אני רוצה להתחיל טיוח הרשימה החדשה שלי כדי לעשות. אני בעצם הולך לחסל את רשימת המטלות שלי. 

עכשיו בתוך ה-HTML הפנימי של שdiv todos הוא ברור לחלוטין, ועכשיו אני צריך להתחיל להוסיף הרשימה שלי. הדבר הראשון שאני רוצה להוסיף בחזרה הוא תג הרשימה לא מסודרת, אשר בעצם מציין כי מדובר בתחילתה של רשימה לא מסודרת. עכשיו לכל אלמנט במערך todos אני רוצה להדפיס אותו בתוך ה-HTML ש. אני רוצה להוסיף עליו לחלק התחתון של רשימה זו. בדיוק כמו ב-C, אני יכול להשתמש בלולאה, ואני מתכוון להתחיל בתחילת הרשימה שלי באלמנט 0, ואני הולך ללכת את כל הדרך לאורכה של הרשימה. אנחנו יכולים למעשה לקבל את אורכו של מערך ב-JavaScript שימוש במאפיין האורך. בעיקרון אני הולך לעשות משהו דומה מאוד בתוך כאן כדי להדפיס אותו האלמנט. אני שוב יכול לגשת div todos, הרכוש הפנימי של ה-HTML ש, ואני הולך להוסיף על פריט הרשימה החדש, וזה הולך להיות מוקף תג לי את זה, ואני הולך לשרשר עם המפעיל +, וזה אלמנט ה-i של מערך todos שלי, ולאחר מכן אני הולך לסגור תג זה. עכשיו לכל אלמנט אנחנו נוסיף ערך ברשימה חדש. ואז כל מה שאנחנו באמת צריכים לעשות הוא לסגור את התג הזה. אני רק צריך לסגור את זה לא מסודרים תג רשימה. 

האם אתה מקבל את תחושה של איך זה עובד? הפעולה זו פותחת את הרשימה כולה. זה מוסיף אלמנטים בודדים מרשימת todos לרשימה, ולאחר מכן שסוגר את הרשימה כולה, וזו פונקצית addTodo שלי. אני בעצם להתחיל על ידי מקבל משימות מתיבת הטקסט. אני מוסיף כי למערך todos, ואז אני מחדש לדקלם רשימת מטלות. עכשיו אני יכול להוסיף פריטים לרשימה שלי. זהו סוג של מרגש, כי רק כמה שורות של קוד אנחנו בעצם עשינו רשימת מטלות שבו אנו יכולים להוסיף פריטים. גדול. זה סוג של מבוא בסיסי ל- JavaScript. אל תדאגו יותר מדי על התחביר לעת עתה, אבל לחשוב על זה מבחינה מושגית. היו לנו קצת HTML. היו לנו תיבת טקסט בעמוד שמשתמשים בעיקרון מותר קלט פריט כדי לעשות להוסיף. ולאחר מכן השתמשנו בJavaScript כדי להביא ToDo שמתיבת הטקסט. אנחנו מאוחסנים שבתוך מערך JavaScript, שהוא בעצם כמו הייצוג תוכניתית שלנו שרשימת מטלות, ואז אנחנו הדפסנו. זה todos.js. 

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

בעיקרון לכל משימות שבמערך todos יש פריט במערך השלם שבעצם מצביע על אם כי הוא מלא או לא. אני כבר היה צריך לעשות את הקוד הזה לשינויים די מינימאליים, אז הנה פונקצית addTodo שלנו. שים לב שכאן אני דוחף אותו על המערך, ואז אני דוחף 0 עד שהמערך שלם, בעצם במקביל לדחיפה שToDo החדשה לומר אני מוסיף פריט זה, וזה בשילוב עם ערך זה, מה שאומר שזה לא שלם. ולאחר מכן אני לשרטט מחדש את רשימת המטלות. עכשיו, שים לב שהוספתי פונקצית drawTodoList זה. זה לוקח הרבה קוד שהיו לנו בעבר, בעצם מנקה את התיבה ולאחר מכן מושך חדש רשימת מטלות. אבל שם לב שהחלק פנימי של זה ללולאה שאנחנו עושים קצת יותר עכשיו. אנחנו בעצם בודקים אם הפריט מתאים למשימות ith כאן הושלם, ואנחנו מתנהגים באופן שונה ב2 נסיבות אלה. אם זה מלא, אנחנו מוסיפים תג דל הזה, שהוא בעצם הדרך בה אתה יכול לקבל שביתה דרך השפעה חוצה את רשימת מטלות אם זה מלא, ואם זה לא, אנחנו לא כולל אותו. ואז זה סוג של דואג לזה, 

וזו דרך אחת להשיג את זה. ואז שם לב כאשר המשתמש לוחץ על אחד מאלה שלנו לעבור את מצב השלמתו. כאשר המשתמש לוחץ, נצטרך להפוך בין אם היא הושלמה או לא, ואז לשרטט מחדש את זה. סוג זה של עבודות. יש לנו פונקציות אלה המבצעים את המשימות שלהם, וזה בסדר. האם יש משהו שאנחנו יכולים לעשות טובים יותר בעניין הזה, אם כי? שים לב שיש לנו 2 מערכים הגלובליים אלה. אם זה היה C, והיה לנו 2 מערכים שסוג של מיוצג נתונים שהיה סוג של הקשורים בדרך כלשהי מה היינו להשתמש ב-C לשלב 2 תחומים אלה למשהו שמתמצת את שני פיסות מידע? מישהו רוצה להציע הצעה? [סטודנטים תגובה לא נשמעה] 

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

שים לב איך אנחנו עושים todos [i]. מלא במקום לבדוק את המערך השלם בנפרד, ושים לב, כאשר אנחנו רוצים לקבל את המחרוזת למטלות שאנחנו מקבלים את הנכס כדי לעשות שמTodo, כך מסוג זה הגיוני כי לכל פריט המאפיינים פנימיים האלה על זה. יש לו רשימת משימות לביצוע, ויש לו בין אם זה מלא או לא. לא יותר מדי שינויים תפקודי יש, רק הוסיפו עוד קצת לקוד. זהו שיפור בכמה חזיתות, נכון? אני מתכוון, אנחנו בחשבון את העיצוב קצת. עכשיו יש לנו אובייקטים בעצם לתמצת נתונים אלה. האם יש משהו שאנחנו יכולים לעשות יותר מכאן במונחים של JavaScript? הודעה רוצה שהקוד הזה ממש כאן מקבל את ה-HTML הפנימי של div הוא ארוך, אני מניח, קצת. יש document.getElementById ("todos"). InnerHTML. דבר אחד שאנחנו יכולים לעשות כדי להפוך את הקוד הזה נראה קצת ידידותי יותר כל כך לא הייתי צריך לשמור את הגלילה ימינה ושמאלה, קדימה ואחורה, הוא הייתי יכול להשתמש בספרייה כמו jQuery. 

בואו לבדוק את הסמינר 2, וזה אותו הקוד, אבל עושה את זה עם jQuery. אתה לא יכול להיות מוכר מדי עם jQuery, אבל רק יודע שjQuery היא סוג של ספרייה לJavaScript זה עושה את זה יותר קל לעשות דברים כמו אלמנטים בודדים גישה של DOM. כאן במקום לומר document.getElementById ("todos"). InnerHTML אני יכול להשתמש בהרבה יותר נקי בדרך jQuery, וזה רק כדי להשתמש בבוררים. כפי שאתה יכול לראות, את הקוד הזה לא מקבל שואב קטן, דומה מאוד פונקציונלי, אבל זה הרעיון. ראינו כמה דברים עד כה, אז התחלנו עם יישום JavaScript פשוט גלם. אנחנו הוספנו תכונות חדשות, והראו כיצד אנו יכולים לשפר אותו עם בדיוק מה שיש לנו ב-JavaScript. 

האם מישהו רואה שום קשיים עם העיצוב הזה? כלומר, אני מניח, או לא בהכרח קשיים, אבל בואו נגיד אנחנו לא עושים פרויקט רשימת מטלות, ומחר החלטנו אנחנו רוצים להכין רשימת מכולת או פרויקט רשימת קניות. הרבה התכונות הללו הם דומים מאוד. הרבה הדברים שאנחנו רוצים לצאת מJavaScript נפוצים מאוד, וזה מדגיש את הצורך בסוג כלשהו של דרך מה שהופך את זה יותר קל לעשות. הייתי צריך לבנות את כל הגישה ה-HTML הזה, כל גישה DOM זה, כאילו אני הולך לייצג את רשימת המטלות עם המודל הזה. ושים לב אני אחראי כמפתח JavaScript לשמירה על ה-HTML וג'אווה סקריפט שיש לי בסינכרון. שום דבר לא נעשה באופן אוטומטי, כי ייצוג JavaScript או רשימת המטלות נדחפת החוצה ל-HTML. שום דבר לא נאכף, כי חוץ ממני. הייתי צריך לכתוב פונקצית תיקו רשימת מטלות. וזה לא יכול להיות, אני מתכוון, שזה סביר לעשות את זה, אבל זה עשוי להיות מייגע לפעמים. אם יש לך פרויקט גדול יותר, שיכול להיות קשה. 

מסגרות, אחת המטרות של מסגרות הוא לפשט את התהליך וסוג של גורם מחוץ אלה נפוצים, אני מניח שאתה אומר-דפוסי עיצוב יכולים שאנשים בדרך כלל יש איזשהו דרך לייצג נתונים, בין אם זה לרשימת חברים, בין אם זה מידע המפה או משהו או רשימת מטלות. יש אנשים שיש לי בדרך כלל דרך של ייצוג מידע, והם בדרך כלל צריכים לשמור על הסוג של מידע שמסונכרן בין מה שהמשתמש רואה בסוג כלשהו של נוף, מדבר במונחים של בקר כמו תצוגת המודל שראה בהרצאה, ולאחר מכן את המודל, אשר במקרה זה הוא מערך JavaScript זה. מסגרות נותנים לנו דרך לפתור את הבעיה הזאת. עכשיו בואו נסתכל על יישום זה רשימת המטלות במסגרת הנקראת angularjs. זהו זה. שים לב שזה מתאים בשקופית. אני לא צריך לגלול לימין ועל השמאל. זה כנראה לא סיבה מצוינת ממליצה להשתמש במסגרת, אבל צריך לשים לב אני תמיד גישה רכיבי HTML בודדים כאן? האם אי פעם נכנס לDOM? האם אתה רואה document.getElementById או משהו כזה? לא, זה נעלם. 

זוויתי עוזרת לנו לשמור על DOM ו-JavaScript שלנו הייצוג של משהו סוג של מסונכרן, כך שאם זה לא בקובץ JS, אם אין דרך של תוכניתי להגיע לכל תוכן HTML ש מJavaScript איך אנחנו שומרים על זה בסינכרון? אם זה לא בקובץ. JS, זה חייב להיות ב-HTML, נכון? זוהי הגרסה החדשה של קובץ HTML, ושימו לב שהוספנו הרבה לכאן. שים לב שיש תכונות חדשות אלה שאומרים ng קליק וng-חוזר. גישתו של זוויתי לפתרון בעיה זו של קשיים בעיצוב הוא בעצם להפוך את ה-HTML הרבה יותר חזקה. זוויתי היא דרך של ומאפשר לך להפוך את ה-HTML קצת יותר אקספרסיבי. לדוגמה, אני יכול לומר שאני הולך לקשור או להיקשר תיבת טקסט זה למשתנה בתוך קוד JavaScript זוויתי. ng-מודל זה עושה בדיוק את זה. זה בעצם אומר שחלק הפנימי של תיבת טקסט פריט, פשוט מקשר את זה עם new_todo_description משתנה בתוך קוד JavaScript. זה חזק מאוד, כי אני לא צריך באופן מפורש ללכת DOM כדי לקבל את המידע הזה. אני לא צריך לומר document.getElementById. אני לא צריך להשתמש בjQueries כמו הגישה DOM. אני יכול לקשר את זה עם משתנה, ולאחר מכן כאשר אני משנה שמשתנה בתוך JavaScript הוא נשמר בסנכרון עם ה-HTML, כך שמפשט את התהליך של צורך ללכת הלוך ושוב בין שתיים. האם זה הגיוני? 

ושים לב שאין שום קוד גישה ה-HTML. פשוט עשינו את ה-HTML יותר חזק, ועכשיו, לדוגמה, אנחנו יכולים לעשות דברים כאלה, כמו כשאתה לוחץ על זה, לקרוא לפונקציה זו במסגרת todos.js, ואנחנו יכולים לעשות את זה בעבר, אבל יש דברים אחרים, כמו ng-מודל זה, ושים לב ng-חזור על פעולה זו. מה אתה חושב שזה עושה? הנה הרשימה לא מסודרת שלנו מהעבר. יש לנו את תגי ul, אבל אני תמיד אני טיוח שהרשימה פנימי של קוד JavaScript? אני לא אי מתן שהרשימה באופן מפורש. איך זה עובד? ובכן, זוויתית הדרך משיגה זאת היא זה נקרא מהדר. בעיקרון זה אומר שאני רוצה להדפיס את ה-HTML זה לכל בתוך ToDo של מערך todos שלי. בתוך todos.jr יש מגוון todos ממש כאן, ואת זה יגיד לי ללכת זוויתית באמצעות מערך זה, ולכל אלמנט שאתה רואה אני רוצה להדפיס HTML זה. זהו סוג של מדהים, כי אני פשוט יכול לעשות את זה ללא צורך בכתיבה ללולאה, אשר לרשימת מטלות שהייתה רק 30 שורות של קוד לא יכול להיות הדבר מועיל ביותר, אבל אם יש לך פרויקט גדול, זה יכול להיות מאוד נוח. 

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

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

בואו נסתכל על קצת יותר מזה. הנה תצוגת עמוד השדרה. הדבר השני שאומרת הוא שעמוד שדרה הרבה דגמים שאתה חושב על או אפילו אוספים הולכים צריך לעבור דרך כלשהי להיות מוצגת. אנחנו צריכים להבהיר שרשימת מטלות, והאם זה לא יהיה נחמד אם תוכל לספק עבור כל דגם או לקשר עם כל דגם תצוגה זו המאפשר לנו אני מניח שאחבר את שניהם ביחד? בעוד שבעבר היינו צריכים להשתמש בלולאה שתרוץ דרך כל משימות ברשימה שלנו ולאחר מכן להדפיס את זה כאן אנחנו בעצם יכולים לחבר אותו עם המודל הזה. זוהי תצוגת מטלות. זה קשור למשימות שמצאנו קודם לכן. עכשיו כל משימותיו להצגה או renderable על ידי זה כדי לעשות את התצוגה. שים לב חלק מהשדות. מה אתה חושב tagname זה, tagname: Li? זכור מלפני כאשר רצינו להבהיר ToDo היינו צריכים לשייך todos במפורש עם תג לי את זה. עכשיו אנחנו אומרים שבי ToDo זה הולכת לחיות הולך להיות בתוך תג לי. ועכשיו אנחנו גם להתרועע עם todos אירועים שלנו. 

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

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

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

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

האם יש למישהו שאלות על מסגרות JavaScript? [שאלה בלתי נשמעת סטודנטים] אה, בטח, זה שאלה גדולה. השאלה הייתה איך אני כולל מסגרות? רוב מסגרות JavaScript הן בעצם רק קבצי js כי אתה יכול לכלול בחלק העליון של הקוד שלך. שים לב בחלק הראש של ה-HTML שלי יש לי את כל תגים הסקריפט אלה, ותג התסריט הסופי הוא הקוד שכתבנו. ולאחר מכן את 3 קודים הם רק המסגרת גם תגים הסקריפט. אני כולל אותם ממה שנקרא CDN, שמאפשר לי לקבל את זה ממישהו אחר בשלב זה אבל בכל מסגרת יש את זה, אתה יכול פחות או יותר למצוא את התוכן לספריית JavaScript מסוימת נגישה בחלק CDN או משהו כזה, ואז אתה יכול לכלול תגים הסקריפט אלה. האם זה הגיוני? מגניב. 

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