PureJS SPA היא אפליקציית דף יחיד (Single Page Application) המיישמת ארכיטקטורת קומפוננטות מותאמת אישית ללא שימוש בספריות או מסגרות עבודה חיצוניות. הפרויקט מדגים כיצד ניתן לבנות אפליקציה מודרנית ודינמית תוך שימוש בטכנולוגיות ווב סטנדרטיות בלבד.
ניתן לראות את האפליקציה בפעולה כאן.
- ארכיטקטורת קומפוננטות: שימוש ב-Web Components ליצירת רכיבים מבודדים וניתנים לשימוש חוזר.
- ניתוב (Routing) מותאם אישית: מימוש פשוט אך יעיל של ניתוב בצד הלקוח מבוסס האש (#).
- טעינה דינמית: טעינת קומפוננטות ומודולים באופן דינמי לפי דרישה.
- עיצוב מבודד: שימוש ב-Shadow DOM להקפסולת סגנונות ומבנה של כל קומפוננטה.
- ניהול מצב מקומי: כל קומפוננטה מנהלת את המצב שלה באופן עצמאי.
- רספונסיביות: עיצוב מותאם למגוון מכשירים וגדלי מסך.
- HTML5
- CSS3
- JavaScript (ES6+)
- Web Components
- Custom Elements
- Shadow DOM
- ES Modules
/
├── index.html
├── src/
│ ├── components/
│ │ ├── nav.html
│ │ └── footer.html
│ ├── pages/
│ │ ├── main.html
│ │ ├── about.html
│ │ └── todo.html
│ └── scripts/
│ ├── core/
│ │ ├── componentFactory.js
│ │ └── router.js
│ └── main.js
└── README.md
- שכפל את הריפוזיטורי:
git clone https://github.com/MusiCode1/custom-elements-spa.git - עבור לתיקיית הפרויקט:
cd custom-elements-spa - פתח את
index.htmlבדפדפן או השתמש בשרת פיתוח מקומי.
- עיין בקוד של הקומפוננטות השונות ב-
src/componentsו-src/pagesלהבנת המבנה והלוגיקה. - הוסף קומפוננטות חדשות על ידי יצירת קבצי HTML חדשים ורישומם ב-
src/scripts/main.js. - שנה את הניתוב על ידי עדכון ה-
Routerב-src/scripts/main.js.
מוזמנים לתרום לפרויקט! אנא צרו issue או שלחו pull request עם הצעות לשיפורים או תיקוני באגים.
פרויקט זה מופץ תחת רישיון MIT. ראה את קובץ LICENSE לפרטים נוספים.
פותח על ידי MusiCode1 & Claude.AI. השראה ורעיונות מפרויקטים דומים ומהקהילה הרחבה של מפתחי הווב.