קורס Front-End Web Development שיעור תבנית ליישומי עמוד יחיד

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/spa
#2

היי ינון הרבה מאוד מהסיכומים והקוד אינם זמינים בדף של נושא זה :frowning:
בשני הטאבים וידאו וטקסט

#3

עודכן וכל הדוגמאות חזרו, תודה על תשומת הלב.

#4

שאלה כללית : בJS אין כמו בשפות אחרת “Select Case” - בורר מצבים כזה ? חייבים להשתמש ב- IF?

#5

בטח שיש - סתם לא יצא לי לדבר עליו בקורס הזה :slight_smile:

https://www.w3schools.com/js/js_switch.asp

לייק 1
#6

באיזה שיעור דיברת על Promise - לא זכור לי שהזכרת את זה בשיעורים קודמים - תוכל להרחיב על זה קצת או להפנות לשיעור שמדבר על זה

#7

https://www.tocode.co.il/bundles/html5-web-development/lessons/הבטחות-ב-javascript

#8

במחלקה ClickerPage בפונקציה enter - נראה לי שיש שם טעות - היה צריך להיות “_el” ולא el לבד ?

#9

זה לא משנה - זה שם של פרמטר לפונקציה, אפשר לבחור שם כל שם שרוצים (האוביקט עצמו ממילא עובר לפונקציה enter כשמפעילים אותה מהפונקציה replacePage)

#10

לא הבנתי אני לא מדבר על ה- el שבפרמטר אני מדבר על הקטע קוד בפונקציה enter של ClickerPage שבה אנחנו מכניסים ערך ל- this.el - ושם הגדרנו במשתנה בסיס של הPage _el?

#11

למה ב-ClickerPage לא הגדרת את הפונקציה Leave - שתמחק את האירועים שמאזינים לפקד ?

#12

על איזה שורה אתה מדבר? לא רואה את זה

#13

אין טעם למחוק האזנה לאירועים על אלמנט בדף - כי ממילא כשהאלמנט יצא מהדף כל ה Event Listeners שלו יימחקו. אתה מוחק האזנות רק עבור האזנה לאירועים גלובאליים (למשל האזנה לאירועים של window שדף מסוים הוסיף) כי אלה יישארו אחרי שהאלמנט הראשי של הדף יימחק

לייק 1
#14

מדבר על שורה 4

ClickerPage.prototype.enter = function(el) {
  Page.prototype.enter.call(this, el);

  this.el = {
    root: el,
    btn: el.querySelector('button')
  };

  this.el.btn.addEventListener('click', this.clicked.bind(this));
};
#15

לגביי הקוד הזה - לא כ"כ ברור לי משהו מאוד בסיסי ב- JS

if (hash === 'about') {
    this.showPage(AboutPage);
  } else if ( hash === 'clicker' ) {
    this.showPage(ClickerPage);
  } else {
    this.showPage(HomePage);
  }

מתי נעשה ה- NEW למחלקות של הדפים שאנחנו שולחים כפרמטר?
אם הייתי רוצה להפריד לפונקציה נפרדת שתחזיר לי את המחלקה המתאימה גם יכולתי לשלוח כך :HomePage return

#16

שורה 4 מגדירה משתנה חדש, כלומר אחריה יהיו לנו גם את _el מ Page וגם את el מ ClickerPage. בעולם מושלם המידע ש Page שמר היה מספיק לנו אבל בתוכנית הזאת (והרבה פעמים בחיים האמיתיים) ירושה זה מבנה בעייתי וצריך להוסיף במחלקה אחת מידע שאין באחרת

#18

בקוד הזה הפונקציה replacePage היא זאת שקוראת ל new:

Application.prototype.replacePage = function(Page) {
  var nextPage = new Page();
  var html = document.getElementById(nextPage.template).innerHTML;
  this.el.innerHTML = html;
  this.activePage = nextPage;

  this.activePage.enter(this.el);
}

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

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

לייק 1
#19

לא מצליח להבין למה אני צריך שני משתנים - הרי הם מייצגים את אותו אלמנט של העמוד שנטען בסופו של דבר ?

#21

אני לא חושב ש״צריך״ זו המילה הנכונה כאן - יותר נכון לחשוב על זה בתור ״נוח״. נוח לשמור את הכפתור במשתנה משלו וזה משהו שהמחלקה Page לא יכולה לעשות כי היא לא יודעת על הכפתור. רק ClickerPage יודעת שצריך להיות שם כפתור.

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

לפני ירושה כל הפונקציות שהשפיעו על אוביקט X היו הפונקציות שנשמרו על ה Prototype של פונקציית הבנאי שיצרה את X. לדוגמא נתבונן בקוד:

function Person() { }

Person.prototype.foo = function() { };
Person.prototype.bar = function() { };

p = new Person();
p.foo();
p.bar();

אם יצרת אוביקט דרך new Person אז הפונקציות ״של האוביקט״ היו רק הפונקציות מ Person.prototype.

עכשיו ירושה מוסיפה לתמונה עוד Prototype אבל אנחנו עדיין מדברים רק על אוביקט יחיד. לכן הקוד הבא מדפיס 5:

function Animal() {
  this.a = 2;
  this.b = 2;
}

Animal.prototype.calc = function() {
  return this.a + this.b;
};

function Person() {
  Animal.call(this);
  this.b = 3;
}

Person.prototype = Object.create(Animal.prototype);

p = new Person();
console.log(p.calc());

המחלקה Animal מגדירה שני משתנים a ו b, והמחלקה Person משנה את הערך של b. כשמסתכלים על אוביקט שנוצר מהפונקציה Person לאוביקט יהיו את שני המשתנים בגלל פונקציית הבנאי Animal והמשתנה b יכיל את הערך 3 בגלל פונקציית הבנאי Person.

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

לייק 1