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

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

מבוא לדפוסי עיצוב JavaScript

המושגים הכלולים בדפוסי עיצוב של JavaScript משמשים להנחות אותך כיצד לנצח בעיות נפוצות שתתמודד עמן כמפתח JavaScript.

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

תבנית המודול

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

זה קצת כמו איך אתה יכול השתמש במתקני גישה במחלקה בשפה כמו Java או C++.

ב-JavaScript, אתה יכול ליישם את תבנית המודול באמצעות סגירות.

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

instagram viewer

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

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

הנה דוגמא:

const ShoppingCartModule = (פוּנקצִיָה () {
// נתונים פרטיים
לתת cartItems = [];
// שיטה פרטית
פוּנקצִיָהcalculateTotalItems() {
לַחֲזוֹר cartItems.reduce((סה"כ, פריט) => סך + item.quantity, 0);
 }


// API ציבורי
לַחֲזוֹר {
 addItem (פריט) {
 cartItems.push (פריט);
 },


 getTotalItems() {
לַחֲזוֹר calculateTotalItems();
 },


 עגלה נקייה() {
 cartItems = [];
 }
 };
})();


// דוגמה לשימוש
ShoppingCartModule.addItem({ שֵׁם: 'מוצר 1', כַּמוּת: 2 });
ShoppingCartModule.addItem({ שֵׁם: 'מוצר 2', כַּמוּת: 1 });


לְנַחֵם.log (ShoppingCartModule.getTotalItems()); // פלט: 3
ShoppingCartModule.clearCart();
לְנַחֵם.log (ShoppingCartModule.getTotalItems()); // פלט: 0

בדוגמה זו, ה ShoppingCartModule מייצג מודול שנוצר באמצעות תבנית המודול. ביצוע הקוד הולך כך:

  1. ה IIFE עוטף את כל גוש הקוד, יוצר פונקציה שמתבצעת מיד עם ההכרזה. זה קובע טווח פרטי לחברי המודול.
  2. cartItems הוא מערך פרטי. זה לא נגיש ישירות מחוץ למודול.
  3. calculateTotalItems() היא שיטה פרטית המחשבת את מספר הפריטים הכולל בעגלה. הוא משתמש ב- לְהַפחִית() שיטה לחזור על cartItems מערך וסכם את הכמויות של כל הפריטים.
  4. המודול מחזיר את ה-API הציבורי שלו כאובייקט מילולי, וחושף שלוש שיטות ציבוריות: הוסף פריט(), getTotalItems(), ו עגלה נקייה().
  5. מחוץ למודול, אתה יכול לגשת לשיטות הציבוריות של המודול כדי ליצור אינטראקציה עם הפונקציונליות של עגלת הקניות.

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

תבנית הצופה

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

ב-JavaScript, אתה יכול ליישם את דפוס Observer באמצעות addEventListener המובנה, dispatchEvent שיטות, או כלשהם מנגנוני טיפול באירועים. על ידי הרשמה לצופים לאירועים או לנושאים, אתה יכול להודיע ​​ולעדכן אותם כאשר מתרחשים אירועים ספציפיים.

לדוגמה, אתה יכול להשתמש בדפוס Observer כדי ליישם מערכת הודעות פשוטה:

// יישום דפוס Observer
פוּנקצִיָהמערכת התראות() {
// רשימת מנויים
זֶה.subscribers = [];
// שיטה להירשם להתראות
זֶה.subscribe = פוּנקצִיָה (מָנוּי) {
זֶה.subscribers.push (מנוי);
 };


// שיטה לביטול הרשמה להודעות
זֶה.unsubscribe = פוּנקצִיָה (מָנוּי) {
const אינדקס = זֶה.subscribers.indexOf (מנוי);


אם (אינדקס !== -1) {
זֶה.subscribers.splice (אינדקס, 1);
 }
 };


// שיטה להודיע ​​למנויים
זֶה.notify = פוּנקצִיָה (הוֹדָעָה) {
זֶה.subscribers.forEach(פוּנקצִיָה (מָנוּי) {
 subscriber.receiveNotification (הודעה);
 });
 };
}


// אובייקט מנוי
פוּנקצִיָהמָנוּי(שֵׁם) {
// שיטה לקבלת הודעות ולטפל בהן
זֶה.receiveNotification = פוּנקצִיָה (הוֹדָעָה) {
לְנַחֵם.log (שם + ' קיבל הודעה: ' + הודעה);
 };
}


// דוגמה לשימוש
const notificationSystem = חָדָשׁ NotificationSystem();


// צור מנויים
const מנוי1 = חָדָשׁ מָנוּי('מנוי 1');
const מנוי2 = חָדָשׁ מָנוּי('מנוי 2');


// הירשמו למנויים למערכת ההתראות
notificationSystem.subscribe (מנוי1);
notificationSystem.subscribe (מנוי2);
// הודע למנויים
notificationSystem.notify('הודעה חדשה!');

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

ה מערכת התראות הפונקציה מייצגת את המערכת ששולחת הודעות, ואת מָנוּי הפונקציה מייצגת את נמעני ההתראות.

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

ה לְהוֹדִיעַ השיטה ב-NotificationSystem חוזרת דרך מערך המנויים וקוראת ל- לקבל הודעה שיטה על כל מנוי, המאפשרת להם לטפל בהודעות.

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

כדי להשתמש בדפוס הצופה, צור מופע של NotificationSystem. לאחר מכן תוכל ליצור מופעים של מנוי ולהוסיף אותם למערכת ההתראות באמצעות שיטת המנוי.

שליחת הודעה תפעיל את שיטת receiveNotification עבור כל מנוי, ותירשם את ההודעה עבור כל מנוי.

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

שימוש בדפוסי JavaScript מתקדמים

להלן כמה טיפים כלליים לשימוש יעיל בתבניות JavaScript מתקדמות:

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

היזהר בעת יישום דפוסים אלה

דפוס המודול מאפשר עטיפה ומקדם פרטיות נתונים, ארגון קוד ויצירת מודולים עצמאיים.

מצד שני, דפוס ה-Observer מקל על תקשורת בין רכיבים על ידי יצירת קשר בין נושא למנוי.

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