פרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות

צדיק תמים

בזמן האחרון עבדתי על סקריפט צד לקוח (דרך קונסול או Tampermonkey) ארוך, שעובד על הHTML של הדף - מנקה אותו ומזריק לו HTML חדש, ואז מכניס תוכן לאלמנטים השונים לפי הצורך עם innerHTML וכדו'.
בתחילה הHTML היה קטן ולא היה כל כך ניכר הבעיה, אלא שבמשך הזמן והתפתחות הקוד הוא גדל... וכן התוכן שמוזרק כל פעם גדל ונעשה מורכב יותר, והשורה מתארכת ומתארכת...
פתרון חלקי הוא ירידת שורה מידי פעם, במקרה שמשתמשים בתו ` לעטיפת המחרוזת.
השאלה אם אין איזו דרך יותר אלגנטית שאני לא מכיר?...
כמו כן, איך מתמודדים עם מחרוזת טקסט ארוכה, שגם משתנה בחלקה - כלומר לדוגמה אני רוצה שבאם ארגומנט X שמועבר לפונקציה שמשנה את האלמנט הוא Z, יוזרק תוכן Y, ובאם הארגומנט הוא U, יוזרק Y - אבל ללא חלק מסוים שבסוף המחרוזת.
איך אני עושה את זה בלי לכתוב פעמיים את כל השורה, פעם אחת עם המחרוזת והתוספת שבסוף, ופעם בלי...?

yossiz

@צדיק-תמים אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

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

למה רק חלקי?

אני רוצה שבאם ארגומנט X שמועבר לפונקציה שמשנה את האלמנט הוא Z, יוזרק תוכן Y, ובאם הארגומנט הוא U, יוזרק Y - אבל ללא חלק מסוים שבסוף המחרוזת.

הכי פשוט להשתמש עם `` כך:

`content1${X === Z ? ' content2' : ''}`

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

yossiz

דרך אחר לג'נרט HTML בצורה דינאמית: https://github.com/caolan/pithy
מן הסתם יש עוד כאלה. זה מה שמצאתי בינתיים.

dovid

@צדיק-תמים התו ` הוא הדרך לזה.
הוא "חדש" יחסית, לא נדבר על מה שהיה לפני כן...
בשביל להשתיל פרמטרים בתוך טקסט ארוך, יש את הדרך החדשה שהיא Expression interpolation, שאתה משתיל בתוך בטקסט ביטויי JS ע"י סוגריים מסולסלות שיש לפניהם סימן דולר.
למשל אתה יכול לכתוב פונקציה שתכיל את כל התבנית שלך:

function GetPersonTemplate(name, age, title){
    return `
<li class="s-sidebarwidget--item d-flex px16">
    <div class="flex--item1 fl-shrink0">
        <div class="favicon favicon-stackexchangemeta" title="${'item-' + age}">
            ${age}
        </div>
    </div>
    <div class="flex--item wmn0 ow-break-word">
        <a href="/now-everywhere-el?cb=1" class="js-gps-track" title="New post summary">
            ${name}
        </a>
    </div>
</li>
`;
}

ואח"כ לקרוא לה וככה להוסיף לפי העניין HTML נוסף וכדומה.

צדיק תמים

@yossiz אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

למה רק חלקי?

כי לפעמים הצורך בירידת שורה מגיע בשלב שזה מבלבל, כמו למשל באמצע תגית HTML...
לגבי mustache - לא הבנתי איך משתמשים בזה... וה-pithy לא הצלחתי למצוא CDN שלו בגוגל כדי לטעון אותו.
המשפט תנאי שהבאת באמת נראה פתרון טוב להרבה מקרים, השאלה מה אם אני רוצה להדפיס בהתאם לערך של המשתנה, ולא משפט תנאי פשוט? מה בעצם המקבילה של switch case?
@dovid אתה מתכוון בעצם שהפונקציה שמדפיסה רק תדפיס, ואת הטקסט שהיא תדפיס או לא - יהיה צריך לבחור בעת הקריאה אליה? אגב מעניין אותי לדעת מה באמת הגישה לגבי פיצול פונקציות והקטנתן, האם כל המרבה הרי זה משובח או שיש מקרים/רמה שזה לא מומלץ? אולי אפתח על זה נושא נפרד בהמשך...

yossiz

@צדיק-תמים אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

כי לפעמים הצורך בירידת שורה מגיע בשלב שזה מבלבל, כמו למשל באמצע תגית HTML...

תעשה ירידת שורה הרבה לפני שה"צורך מגיע". תפרמט את ה-HTML בצורה יפה. (כמו בדוגמה של @dovid)

לגבי mustache - לא הבנתי איך משתמשים בזה...

אולי זה באמת כדאי רק למקרים יותר מסובכים. זו עוד ספרייה ועוד שפה (לא כבדה ולא קשה, אבל בכל זאת עוד ספרייה ועוד שפה).

השאלה מה אם אני רוצה להדפיס בהתאם לערך של המשתנה, ולא משפט תנאי פשוט? מה בעצם המקבילה של switch case

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

לדוג':

`content1 ${getOutputForX(X)}`

יוסף בן שמעון

@צדיק-תמים חוששני שהפתרון הכי נקי הוא לעבוד עם המתודות של JS שמשנות את הHTML, (createElement וחברותיה).
ואפשר גם להעזר ב jQuery שמקצר את התהליכים.
אבל בשום אופן לא לשרשר מחרוזת ארוכה של HTML

צדיק תמים

@יוסף-בן-שמעון אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

וששני שהפתרון הכי נקי הוא לעבוד עם המתודות של JS שמשנות את הHTML, (createElement וחברותיה).

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

יוסף בן שמעון

@צדיק-תמים תביא דוגמא קונקרטית שנוכל לדון עליה (יש לי דיב עם תוכן X אני רוצה למלאות אותו בY לפי תנאי Z)

dovid

@יוסף-בן-שמעון אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

@צדיק-תמים חוששני שהפתרון הכי נקי הוא לעבוד עם המתודות של JS שמשנות את הHTML, (createElement וחברותיה).

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

יוסף בן שמעון

@dovid אני חושב שתחזוקה של כזה דבר זה מאד קשה, עדיף לעשות את זה עם קצת יותר שורות ולהקל על התחזוקה
תשווה לקוד שלך את זה למשל

function GetPersonTemplate(name, age, title){

    const li = $('<li></li>')
    li.addClass('s-sidebarwidget--item d-flex px16')
    const ageDiv = $('<div></div>')
    ageDiv.attr('title', title)
    ageDiv.text(age)

    li.append(ageDiv)
    retuen li
}

צדיק תמים

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

יוסף בן שמעון

@צדיק-תמים

דוגמא
https://jsfiddle.net/y87p6L1a/

dovid

@יוסף-בן-שמעון תכנותית הקוד שלך מצויין. אבל כשמגיעים לתבניות אנחנו מאוד רחוקים מהמושג תכנות, מי שכותב/כתב את הHTML לא רצה שיוסיפו קלאס פלוני ואטריביוט אלמוני, הוא רצה את הHTML המלא.. תבנית של HTML יכולה להתחיל כמה שורות ויכולה בהמשך להיות תשובת אינטרנט גדולה. זה בסוף טקסט הצהרתי קריא לבני אנוש, ולא פונקציה פרוצדוראלית.
כתבנית הקוד שלך הוא מבחינתי נורא... זה גם אם אני חושב שתמיד הוא יישאר במספר השורות אותו עשית (הוא לא מחזיר מה שכתבתי, צריך הרבה יותר קוד בשביל זה, במיוחד אם רוצים שזה יהיה קוד נקי).
זה קוד שמצריך קריאה של קוד ("שניה, מה בסוף יוצא פה") לפני כל שינוי, ועוד משתמש בjQuery.
תוכל לומר מה ההבדל בין מסמך HTML מלא לבין פונקציה שמחזירה פיסה קטנה?

יוסף בן שמעון

@dovid צודק, אני חוזר בי

צדיק תמים

@יוסף-בן-שמעון לפחות ככה זכיתי בדרך אגב להכיר את התגית
<progress>...
קודם חשבתי לתומי שמוכרחים בשביל כזה דבר להשתמש בספריות דוגמת זו...

יוסף בן שמעון

@צדיק-תמים אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

קודם חשבתי לתומי שמוכרחים בשביל כזה דבר להשתמש בספריות דוגמת זו...

כמובן שיש יתרון עיצובי לספריות האלו, התג פרוגרס מאד בנאלי

צדיק תמים

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

5566brs

@צדיק-תמים אמר בפרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות:

ה-pithy לא הצלחתי למצוא CDN שלו בגוגל כדי לטעון אותו.

https://cdn.jsdelivr.net/gh/caolan/pithy@latest/lib/pithy.min.js

תחומים - פורום חרדי מקצועי

פרקטיקת התמודדות מוצלחת עם מחרוזות טקסט ארוכות