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

[יוסף בן שמעון]

@צדיק-תמים חוששני שהפתרון הכי נקי הוא לעבוד עם המתודות של 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