שאלה למומחים בשפת Javascript

[jellymean]

שאלה למומחים בשפת Javascript

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

אני צריך להעביר פרמטר לדף שיקבע איזה פונקציה תרוץ כמו בשורה לדוגמה:

page1.html?run=function1

אופציה ראשונה עם window

var f = window[run];
f();

אופציה שניה עם מערך של פונקציות

function f1() {...}
function f2() {...}

arr=[];
arr.push(f1);
arr.push(f2);
...

page1?run=1

func = arr[run];
func(); // call the function

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

 

[selalerer]

מבחינת אבטחה כנראה שהאופציה השניה קצת טובה יותר.

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

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

 

[jellymean]

אתה צודק וגם תודה על התשובה...

השימוש ב-window בלי אימות (ואז עדיף מערך פונקציו) עלול לאפשר להריץ פונקציה אחרת מזו שהתכוונו.

מה שאני מנסה לעשות, זאת גירסה של Single Page Application. אני מנסה לאפשר להריץ מספר דפים (קבצים). המשתמש רואה תפריט דומה לתמונה המצורפת. לחיצה (קליק) על פריט פותחת דף ובהתאם לפריט תרוץ פונקציה אחרת. להמחשה אם לחצת על "סרטים" והגעת לקובץ A.html תראה "סרטים" כי תרוץ פונקציה movies. אם לחצת על "ספרים" וגם הגעת לקובץ A.html, תראה המלצות על ספרים כי תרוץ פונקציה אחרת.

 

[יבגניי34]

קשה להבין את ההגיון במימוש שלך. אתה עובד עם איזה פריימוורק?

 

[jellymean]

לא

אני כותב קוד JS בטעם וניל (vanilla js) ומשתמש בקבצים שטוחים (flat files)
למרות שאני לא מאמין שכדור הארץ שטוח...

 

[jellymean]

הסבר לגבי המימוש

יבגני, הקובץ יקבל פרמטר שלפיו ידע איזו פונקציה להפעיל.

A.html ? run = f1

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

 

[user32]

אין סיבה לעבוד ככה

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

אם אתה רוצה כמה דפים שידברו ביניהם, הדרך הנכונה תהיה להעביר פרמטר בעל משמעות כלשהו (ולא שם של פונקציה) ובקוד JS לקרוא את הפרמטר ולהריץ את הקטע קוד הרצוי.

למשל:

page1.html?menuItem=a
page1.html?menuItem=b


if (menuItem === 'a'){
   doMyActionA();
}

if (menuItem === 'b'){
   doMyActionB();
}

 

[jellymean]

בסה"כ הצגתי קונספט לא ברמה של פירוט

אבל תודה על המשוב...

הקוד בפועל ישתמש במערך אסוציאטיבי....

run = [];
run['code'] = f1;
....

A1.html ? p = cc

...

let code = url.query.p // pseudo code

if (code in run)
{
f = run[code];
f();
}

 

[selalerer]

CSS Tabs לא מספיק חזק?

https://www.w3schools.com/w3css/w3css_tabulators.asp
&nbsp
&nbsp

 

[jellymean]

לינק מעניין, תודה

זה תלוי במה שנדרש מהפרוייקט. בדוגמה שהבאת מ-W3Schools התוכן נמצא בפורמט של DIV סטטיים. יש פרוייקטים שבהם פונים לשרת כדי להביא את התכנים.

ברמת העקרון הדוגמה שהבאת היא בסדר (לדעתי... אחרים....).

 

[jellymean]

אולי אני אזרוק פה עוד "פצצה" ומקסימום יסקלו אותי באבנים

עד לאחרונה, השתמשתי בשפת Javascript בפונקציות ובמשתנים גלובליים.
לאחרונה למדתי להשתמש ב-Promise ובעוד כמה תופינין של CSS.
גם ב-JS נוספו פונקציות ויכולות. עם הגידול בהיקף הקוד ובמורכבות, מגיע השלב שיהיה יותר נוח להתנהל עם אובייקטים של JS....

 

[rj111]

לא תמיד טוב להשתמש בפיצ'רים חדשים

אם אתה חייב תאימות לכמה שיותר משתמשים, שימוש בפרומיס/קלאס יגביל את קהל היעד.

 

[doutsh]

נראה לי שזה בדיוק הזמן להתחיל לעבוד עם פריימוורק

כמו אנגולר או ריאקט.
ייעודם הוא בדיוק בניית SPA בצורה נוחה.