ستجد الكثير من التطبيقات لهذين النموذجين ، لذا تأكد من أن لديك فهمًا قويًا لكيفية عملهما ومتى تستخدمهما.
توفر أنماط تصميم JavaScript حلولًا مثبتة للمشاكل الشائعة في تطوير البرامج. سيسمح لك فهم هذه الأنماط وتطبيقها بكتابة كود JavaScript أفضل وأكثر كفاءة.
مقدمة لأنماط تصميم JavaScript
تعمل المفاهيم الواردة في أنماط تصميم JavaScript على إرشادك حول كيفية التغلب على المشكلات الشائعة التي ستواجهها كمطور JavaScript.
يجب أن تفهم التجريدات الكامنة وراء الأنماط ، حتى تتمكن من تطبيقها على مشكلتك الخاصة. يجب أيضًا أن تكون قادرًا على تحديد متى يمكن أن يكون أي من الأنماط المذكورة مفيدًا لشفرتك.
نمط الوحدة
يعد نمط الوحدة ، الذي يوفر التغليف ، جزءًا من نظام وحدة جافا سكريبت. يوفر طريقة لتأمين البيانات الخاصة والسلوك داخل وحدة أثناء الكشف عن واجهة برمجة تطبيقات عامة. يسمح لك بإنشاء كائنات وحدة قائمة بذاتها بمستويات وصول خاصة وعامة.
هذا يشبه إلى حد ما كيف يمكنك استخدام معدِّلات الوصول في فصل دراسي بلغة مثل Java أو C ++.
في JavaScript ، يمكنك تنفيذ نمط الوحدة النمطية باستخدام الإغلاق.
باستخدام الإغلاق لتضمين الأعضاء الخاصين (الوظائف ، المتغيرات ، البيانات) ، يمكنك إنشاء نطاق حيث يمكن الوصول إلى هؤلاء الأعضاء ولكن لا يتم عرضهم بشكل مباشر على العالم الخارجي. يساعد هذا في تحقيق التغليف ، وإبقاء التفاصيل الداخلية مخفية عن الكود الخارجي.
بالإضافة إلى ذلك ، فإن إعادة واجهة برمجة تطبيقات عامة من الإغلاق يسمح بالوصول الخاص إلى وظائف أو خصائص معينة تريد عرضها كجزء من واجهة الوحدة النمطية.
سيعطيك هذا التحكم في أجزاء الوحدة التي يمكن الوصول إليها من قبل أجزاء أخرى من قاعدة التعليمات البرمجية. هذا يحافظ على حدود واضحة بين الوظائف العامة والخاصة.
هنا مثال:
مقدار ثابت ShoppingCartModule = (وظيفة () {
// بيانات خاصة
يترك cartItems = [] ؛// الطريقة الخاصة
وظيفةحساب إجمالي العناصر() {
يعود cartItems.reduce ((إجمالي العنصر) => إجمالي + كمية العنصر ، 0);
}// واجهة برمجة التطبيقات العامة
يعود {
addItem (عنصر) {
cartItems.push (عنصر) ؛
},getTotalItems () {
يعود calculateTotalItems () ،
},clearCart () {
cartItems = [] ؛
}
};
})();// مثال الاستخدام
ShoppingCartModule.addItem ({ اسم: "المنتج 1", كمية: 2 });
ShoppingCartModule.addItem ({ اسم: "المنتج 2", كمية: 1 });وحدة التحكم.log (ShoppingCartModule.getTotalItems ()) ، // الإخراج: 3
ShoppingCartModule.clearCart () ،
وحدة التحكم.log (ShoppingCartModule.getTotalItems ()) ، // الإخراج: 0
في هذا المثال ، فإن ملف ShoppingCartModule يمثل وحدة تم إنشاؤها باستخدام نمط الوحدة النمطية. يتم تنفيذ الكود على النحو التالي:
- ال IIFE يلف كتلة التعليمات البرمجية بأكملها ، مما يؤدي إلى إنشاء وظيفة يتم تنفيذها فور الإعلان عنها. هذا ينشئ نطاقًا خاصًا لأعضاء الوحدة.
- عربة التسوق هي مجموعة خاصة. لا يمكن الوصول إليها مباشرة من خارج الوحدة.
- calculateTotalItems () هي طريقة خاصة تحسب العدد الإجمالي للعناصر في سلة التسوق. يستخدم يقلل() طريقة للتكرار على مدى عربة التسوق صفيف ولخص كميات جميع العناصر.
- تُعيد الوحدة واجهة برمجة التطبيقات العامة الخاصة بها ككائن حرفي ، وتكشف عن ثلاث طرق عامة: اضافة عنصر(), getTotalItems ()، و clearCart ().
- خارج الوحدة ، يمكنك الوصول إلى الأساليب العامة للوحدة للتفاعل مع وظيفة عربة التسوق.
يوضح هذا المثال كيف يسمح لك نمط الوحدة بتغليف البيانات الخاصة (عربة التسوق) والسلوك (حساب إجمالي العناصر) داخل الوحدة مع توفير واجهة عامة (اضافة عنصر, getTotalItems، و clearCart) للتفاعل مع الوحدة.
نمط المراقب
يُنشئ نمط المراقب تبعية رأس بأطراف بين الكائنات. عندما تتغير حالة كائن واحد ، فإنها تُعلم جميع التابعين لها ، ويتم تحديثهم تلقائيًا. هذا النمط مفيد بشكل خاص لإدارة التفاعلات التي تحركها الأحداث أو فصل المكونات في النظام.
في JavaScript ، يمكنك تنفيذ نمط Observer باستخدام addEventListener المدمج, إيفينت طرق أو أي آليات معالجة الحدث. من خلال اشتراك المراقبين في الأحداث أو الموضوعات ، يمكنك إخطارهم وتحديثهم عند وقوع أحداث معينة.
على سبيل المثال ، يمكنك استخدام نمط Observer لتنفيذ نظام إعلام بسيط:
// تنفيذ نمط المراقب
وظيفةنظام الإخطار() {
// قائمة المشتركين
هذا.subscribers = [] ؛// طريقة الاشتراك في الإخطارات
هذا.subscribe = وظيفة (مشترك) {
هذا.subscribers.push (مشترك) ؛
};// طريقة إلغاء الاشتراك من الإخطارات
هذا.unsubscribe = وظيفة (مشترك) {
مقدار ثابت الفهرس = هذا.subscribers.indexOf (المشترك) ؛لو (الفهرس! == -1) {
هذا.subscribers.splice (الفهرس ، 1);
}
};// طريقة إخطار المشتركين
هذا.notify = وظيفة (رسالة) {
هذا.subscribers.forEach (وظيفة (مشترك) {
Subscriber.receiveNotification (رسالة) ؛
});
};
}// كائن المشترك
وظيفةمشترك(اسم) {
// طريقة تلقي الإخطارات والتعامل معها
هذا.receiveNotification = وظيفة (رسالة) {
وحدة التحكم.log (الاسم + "تلقي إشعار:" + رسالة) ؛
};
}// مثال الاستخدام
مقدار ثابت نظام الإخطار = جديد NotificationSystem () ،// إنشاء مشتركين
مقدار ثابت المشترك 1 = جديد مشترك ("المشترك 1");
مقدار ثابت المشترك 2 = جديد مشترك ("المشترك 2");// اشتراك المشتركين في نظام الاشعارات
الإخطار System.subscribe (Subscriber1) ؛
الإخطار System.subscribe (Subscriber2) ؛
// إعلام المشتركين
إعلام نظام."إشعار جديد!");
الهدف هنا هو السماح لعدة مشتركين بتلقي إشعارات عند وقوع حدث معين.
ال نظام الإخطار تمثل الوظيفة النظام الذي يرسل الإشعارات ، و مشترك تمثل الوظيفة مستلمي الإخطارات.
يحتوي نظام NotificationSystem على صفيف يسمى مشتركين لتخزين المشتركين الذين يرغبون في تلقي الإخطارات. ال يشترك تسمح الطريقة للمشتركين بالتسجيل عن طريق إضافة أنفسهم إلى مجموعة المشتركين. ال إلغاء الاشتراك طريقة إزالة المشتركين من المصفوفة.
ال يخطر تتكرر الطريقة في نظام NotificationSystem عبر مصفوفة المشتركين وتستدعي الامتداد استلام التبليغ طريقة على كل مشترك ، مما يسمح لهم بالتعامل مع الإخطارات.
تمثل مثيلات وظيفة المشترك المشتركين. كل مشترك لديه طريقة ReceiveNotification التي تحدد كيفية تعاملهم مع الإخطارات المستلمة. في هذا المثال ، تقوم الطريقة بتسجيل الرسالة المستلمة إلى وحدة التحكم.
لاستخدام نمط المراقب ، قم بإنشاء مثيل من NotificationSystem. يمكنك بعد ذلك إنشاء مثيلات المشترك وإضافتها إلى نظام الإشعارات باستخدام طريقة الاشتراك.
سيؤدي إرسال إشعار إلى تشغيل طريقة ReceiveNotification لكل مشترك ، وتسجيل الرسالة لكل مشترك.
يتيح نمط Observer اقترانًا سائبًا بين نظام الإخطار والمشتركين ، مما يسمح بالمرونة. يشجع النمط على فصل الاهتمامات مما يجعل الصيانة في الأنظمة التي تعتمد على الأحداث أسهل.
استخدام أنماط جافا سكريبت المتقدمة
فيما يلي بعض النصائح العامة للاستخدام الفعال لأنماط JavaScript المتقدمة:
- ضع في اعتبارك الآثار المترتبة على الأداء: قد تؤدي الأنماط المتقدمة إلى تعقيد إضافي ، مما قد يؤثر على الأداء. ضع في اعتبارك الآثار المترتبة على الأداء و التحسين عند الضرورة.
- تجنب الأنماط المضادة: افهم الأنماط جيدًا وتجنب الوقوع في الأنماط المضادة أو إساءة استخدامها. استخدم الأنماط حيث تكون منطقية وتتوافق مع متطلبات التطبيق الخاص بك.
- اتبع اصطلاحات الترميز: اتبع باستمرار اصطلاحات الترميز للحفاظ على سهولة القراءة والاتساق عبر قاعدة التعليمات البرمجية الخاصة بك. استخدم أسماء المتغيرات والوظائف ذات المعنى وقدم توثيقًا واضحًا لأنماطك.
كن حذرًا عند تطبيق هذه الأنماط
يسمح نمط الوحدة النمطية بالتغليف ويعزز خصوصية البيانات وتنظيم الكود وإنشاء وحدات قائمة بذاتها.
من ناحية أخرى ، يسهل نمط Observer الاتصال بين المكونات من خلال إنشاء علاقة الموضوع بالمشترك.
يجب أن تكون على دراية بالمخاطر المحتملة والأخطاء الشائعة عند تنفيذ أنماط JavaScript المتقدمة. تجنب الإفراط في استخدام الأنماط حيث توجد حلول أبسط أو إنشاء تعليمات برمجية معقدة للغاية. قم بمراجعة التعليمات البرمجية وإعادة تشكيلها بانتظام للتأكد من أنها تظل قابلة للصيانة.
