M

MLOG

العربية

أتقن أنماط تصميم جافاسكريبت من خلال دليلنا التنفيذي الكامل. تعلم الأنماط الإنشائية، والهيكلية، والسلوكية مع أمثلة برمجية عملية.

أنماط تصميم جافاسكريبت: دليل التنفيذ الشامل للمطورين المعاصرين

مقدمة: المخطط الأساسي لكود قوي

في عالم تطوير البرمجيات الديناميكي، كتابة كود يعمل ببساطة هي مجرد الخطوة الأولى. التحدي الحقيقي، وعلامة المطور المحترف، هو إنشاء كود قابل للتطوير، والصيانة، وسهل الفهم والتعاون عليه من قبل الآخرين. هنا يأتي دور أنماط التصميم. هي ليست خوارزميات أو مكتبات محددة، بل هي مخططات عالية المستوى ومستقلة عن اللغة لحل المشاكل المتكررة في بنية البرمجيات.

بالنسبة لمطوري جافاسكريبت، فهم وتطبيق أنماط التصميم أصبح أكثر أهمية من أي وقت مضى. مع تزايد تعقيد التطبيقات، من أطر عمل الواجهة الأمامية المعقدة إلى خدمات الواجهة الخلفية القوية على Node.js، أصبح وجود أساس معماري متين أمراً غير قابل للتفاوض. توفر أنماط التصميم هذا الأساس، مقدمة حلولاً مجربة تعزز الاقتران الفضفاض، وفصل الاهتمامات، وإعادة استخدام الكود.

سيرشدك هذا الدليل الشامل عبر الفئات الأساسية الثلاث لأنماط التصميم، مقدماً شروحات واضحة وأمثلة تنفيذ عملية وحديثة بلغة جافاسكريبت (ES6+). هدفنا هو تزويدك بالمعرفة لتحديد النمط المناسب لمشكلة معينة وكيفية تنفيذه بفعالية في مشاريعك.

الأركان الثلاثة لأنماط التصميم

عادةً ما يتم تصنيف أنماط التصميم إلى ثلاث مجموعات رئيسية، كل منها يعالج مجموعة متميزة من التحديات المعمارية:

لنتعمق في كل فئة مع أمثلة عملية.

الأنماط الإنشائية: إتقان عملية إنشاء الكائنات

توفر الأنماط الإنشائية آليات متنوعة لإنشاء الكائنات، مما يزيد من المرونة وإعادة استخدام الكود الحالي. فهي تساعد على فصل النظام عن كيفية إنشاء كائناته وتكوينها وتمثيلها.

نمط Singleton (النمط المفرد)

المفهوم: يضمن نمط Singleton أن يكون للفئة نسخة واحدة فقط ويوفر نقطة وصول عالمية واحدة إليها. أي محاولة لإنشاء نسخة جديدة ستُرجع النسخة الأصلية.

حالات الاستخدام الشائعة: هذا النمط مفيد لإدارة الموارد المشتركة أو الحالة. تشمل الأمثلة مجمع اتصال قاعدة بيانات واحد، أو مدير تكوين عالمي، أو خدمة تسجيل يجب توحيدها عبر التطبيق بأكمله.

التنفيذ في جافاسكريبت: تجعل جافاسكريبت الحديثة، خاصة مع فئات ES6، تنفيذ نمط Singleton أمراً بسيطاً. يمكننا استخدام خاصية ثابتة (static) على الفئة للاحتفاظ بالنسخة الوحيدة.

مثال: خدمة تسجيل Singleton

class Logger { constructor() { if (Logger.instance) { return Logger.instance; } this.logs = []; Logger.instance = this; } log(message) { const timestamp = new Date().toISOString(); this.logs.push({ message, timestamp }); console.log(`${timestamp} - ${message}`); } getLogCount() { return this.logs.length; } } // يتم استدعاء الكلمة المفتاحية 'new'، لكن منطق المُنشئ يضمن وجود نسخة واحدة فقط. const logger1 = new Logger(); const logger2 = new Logger(); console.log("هل المسجلات هي نفس النسخة؟", logger1 === logger2); // true logger1.log("الرسالة الأولى من المسجل 1."); logger2.log("الرسالة الثانية من المسجل 2."); console.log("إجمالي السجلات:", logger1.getLogCount()); // 2

الإيجابيات والسلبيات:

نمط Factory (نمط المصنع)

المفهوم: يوفر نمط المصنع واجهة لإنشاء الكائنات في فئة عليا، ولكنه يسمح للفئات الفرعية بتغيير نوع الكائنات التي سيتم إنشاؤها. يتعلق الأمر باستخدام دالة "مصنع" مخصصة أو فئة لإنشاء كائنات دون تحديد فئاتها الملموسة.

حالات الاستخدام الشائعة: عندما يكون لديك فئة لا يمكنها توقع نوع الكائنات التي تحتاج إلى إنشائها، أو عندما تريد تزويد مستخدمي مكتبتك بطريقة لإنشاء كائنات دون الحاجة إلى معرفة تفاصيل التنفيذ الداخلية. مثال شائع هو إنشاء أنواع مختلفة من المستخدمين (مسؤول، عضو، زائر) بناءً على معامل.

التنفيذ في جافاسكريبت:

مثال: مصنع المستخدمين (User Factory)

class RegularUser { constructor(name) { this.name = name; this.role = 'Regular'; } viewDashboard() { console.log(`${this.name} يعرض لوحة تحكم المستخدم.`); } } class AdminUser { constructor(name) { this.name = name; this.role = 'Admin'; } viewDashboard() { console.log(`${this.name} يعرض لوحة تحكم المسؤول مع صلاحيات كاملة.`); } } class UserFactory { static createUser(type, name) { switch (type.toLowerCase()) { case 'admin': return new AdminUser(name); case 'regular': return new RegularUser(name); default: throw new Error('تم تحديد نوع مستخدم غير صالح.'); } } } const admin = UserFactory.createUser('admin', 'أليس'); const regularUser = UserFactory.createUser('regular', 'بدر'); admin.viewDashboard(); // أليس تعرض لوحة تحكم المسؤول مع صلاحيات كاملة. regularUser.viewDashboard(); // بدر يعرض لوحة تحكم المستخدم. console.log(admin.role); // Admin console.log(regularUser.role); // Regular

الإيجابيات والسلبيات:

نمط Prototype (نمط النموذج الأولي)

المفهوم: يتعلق نمط النموذج الأولي بإنشاء كائنات جديدة عن طريق نسخ كائن موجود، يُعرف باسم "النموذج الأولي". بدلاً من بناء كائن من الصفر، تقوم بإنشاء نسخة من كائن مهيأ مسبقًا. هذا أساسي لكيفية عمل جافاسكريبت نفسها من خلال الوراثة القائمة على النموذج الأولي.

حالات الاستخدام الشائعة: يكون هذا النمط مفيدًا عندما تكون تكلفة إنشاء كائن أكثر تكلفة أو تعقيدًا من نسخ كائن موجود. يُستخدم أيضًا لإنشاء كائنات يتم تحديد نوعها في وقت التشغيل.

التنفيذ في جافاسكريبت: تتمتع جافاسكريبت بدعم مدمج لهذا النمط عبر `Object.create()`.

مثال: نموذج أولي لمركبة قابلة للاستنساخ

const vehiclePrototype = { init: function(model) { this.model = model; }, getModel: function() { return `طراز هذه المركبة هو ${this.model}`; } }; // إنشاء كائن سيارة جديد بناءً على النموذج الأولي للمركبة const car = Object.create(vehiclePrototype); car.init('Ford Mustang'); console.log(car.getModel()); // طراز هذه المركبة هو Ford Mustang // إنشاء كائن آخر، شاحنة const truck = Object.create(vehiclePrototype); truck.init('Tesla Cybertruck'); console.log(truck.getModel()); // طراز هذه المركبة هو Tesla Cybertruck

الإيجابيات والسلبيات:

الأنماط الهيكلية: تجميع الكود بذكاء

تتعلق الأنماط الهيكلية بكيفية دمج الكائنات والفئات لتشكيل هياكل أكبر وأكثر تعقيدًا. تركز على تبسيط الهيكل وتحديد العلاقات.

نمط Adapter (نمط المحول)

المفهوم: يعمل نمط المحول كجسر بين واجهتين غير متوافقتين. يتضمن فئة واحدة (المحول) تربط وظائف الواجهات المستقلة أو غير المتوافقة. فكر فيه كمحول طاقة يسمح لك بتوصيل جهازك بمأخذ كهربائي أجنبي.

حالات الاستخدام الشائعة: دمج مكتبة طرف ثالث جديدة مع تطبيق موجود يتوقع واجهة برمجة تطبيقات مختلفة، أو جعل الكود القديم يعمل مع نظام حديث دون إعادة كتابة الكود القديم.

التنفيذ في جافاسكريبت:

مثال: تكييف واجهة برمجة تطبيقات جديدة مع واجهة قديمة

// الواجهة القديمة الحالية التي يستخدمها تطبيقنا class OldCalculator { operation(term1, term2, operation) { switch (operation) { case 'add': return term1 + term2; case 'sub': return term1 - term2; default: return NaN; } } } // المكتبة الجديدة اللامعة بواجهة مختلفة class NewCalculator { add(term1, term2) { return term1 + term2; } subtract(term1, term2) { return term1 - term2; } } // فئة المحول class CalculatorAdapter { constructor() { this.calculator = new NewCalculator(); } operation(term1, term2, operation) { switch (operation) { case 'add': // تكييف الاستدعاء مع الواجهة الجديدة return this.calculator.add(term1, term2); case 'sub': return this.calculator.subtract(term1, term2); default: return NaN; } } } // يمكن لكود العميل الآن استخدام المحول كما لو كان الآلة الحاسبة القديمة const oldCalc = new OldCalculator(); console.log("نتيجة الآلة الحاسبة القديمة:", oldCalc.operation(10, 5, 'add')); // 15 const adaptedCalc = new CalculatorAdapter(); console.log("نتيجة الآلة الحاسبة المكيفة:", adaptedCalc.operation(10, 5, 'add')); // 15

الإيجابيات والسلبيات:

نمط Decorator (نمط المُزخرف)

المفهوم: يسمح لك نمط المُزخرف بإرفاق سلوكيات أو مسؤوليات جديدة بشكل ديناميكي إلى كائن دون تغيير كوده الأصلي. يتم تحقيق ذلك عن طريق تغليف الكائن الأصلي في كائن "مزخرف" خاص يحتوي على الوظائف الجديدة.

حالات الاستخدام الشائعة: إضافة ميزات إلى مكون واجهة مستخدم، أو زيادة كائن مستخدم بأذونات، أو إضافة سلوك تسجيل/تخزين مؤقت إلى خدمة. إنه بديل مرن للوراثة الفرعية (subclassing).

التنفيذ في جافاسكريبت: الدوال هي كائنات من الدرجة الأولى في جافاسكريبت، مما يجعل من السهل تنفيذ المزخرفات.

مثال: زخرفة طلب قهوة

// المكون الأساسي class SimpleCoffee { getCost() { return 10; } getDescription() { return 'قهوة بسيطة'; } } // المزخرف 1: الحليب function MilkDecorator(coffee) { const originalCost = coffee.getCost(); const originalDescription = coffee.getDescription(); coffee.getCost = function() { return originalCost + 2; }; coffee.getDescription = function() { return `${originalDescription}, مع الحليب`; }; return coffee; } // المزخرف 2: السكر function SugarDecorator(coffee) { const originalCost = coffee.getCost(); const originalDescription = coffee.getDescription(); coffee.getCost = function() { return originalCost + 1; }; coffee.getDescription = function() { return `${originalDescription}, مع السكر`; }; return coffee; } // لنقم بإنشاء وتزيين قهوة let myCoffee = new SimpleCoffee(); console.log(myCoffee.getCost(), myCoffee.getDescription()); // 10, قهوة بسيطة myCoffee = MilkDecorator(myCoffee); console.log(myCoffee.getCost(), myCoffee.getDescription()); // 12, قهوة بسيطة, مع الحليب myCoffee = SugarDecorator(myCoffee); console.log(myCoffee.getCost(), myCoffee.getDescription()); // 13, قهوة بسيطة, مع الحليب, مع السكر

الإيجابيات والسلبيات:

نمط Facade (نمط الواجهة)

المفهوم: يوفر نمط الواجهة واجهة مبسطة وعالية المستوى لنظام فرعي معقد من الفئات أو المكتبات أو واجهات برمجة التطبيقات. يخفي التعقيد الأساسي ويجعل النظام الفرعي أسهل في الاستخدام.

حالات الاستخدام الشائعة: إنشاء واجهة برمجة تطبيقات بسيطة لمجموعة معقدة من الإجراءات، مثل عملية الدفع في التجارة الإلكترونية التي تتضمن أنظمة فرعية للمخزون والدفع والشحن. مثال آخر هو دالة واحدة لبدء تطبيق ويب تقوم داخليًا بتكوين الخادم وقاعدة البيانات والبرامج الوسيطة.

التنفيذ في جافاسكريبت:

مثال: واجهة طلب رهن عقاري

// أنظمة فرعية معقدة class BankService { verify(name, amount) { console.log(`التحقق من وجود أموال كافية لـ ${name} بمبلغ ${amount}`); return amount < 100000; } } class CreditHistoryService { get(name) { console.log(`التحقق من السجل الائتماني لـ ${name}`); // محاكاة درجة ائتمان جيدة return true; } } class BackgroundCheckService { run(name) { console.log(`إجراء فحص الخلفية لـ ${name}`); return true; } } // الواجهة (Facade) class MortgageFacade { constructor() { this.bank = new BankService(); this.credit = new CreditHistoryService(); this.background = new BackgroundCheckService(); } applyFor(name, amount) { console.log(`--- تقديم طلب رهن عقاري لـ ${name} ---`); const isEligible = this.bank.verify(name, amount) && this.credit.get(name) && this.background.run(name); const result = isEligible ? 'موافق عليه' : 'مرفوض'; console.log(`--- نتيجة الطلب لـ ${name}: ${result} ---\n`); return result; } } // يتفاعل كود العميل مع الواجهة البسيطة const mortgage = new MortgageFacade(); mortgage.applyFor('جون سميث', 75000); // موافق عليه mortgage.applyFor('جين دو', 150000); // مرفوض

الإيجابيات والسلبيات:

الأنماط السلوكية: تنسيق تواصل الكائنات

تتعلق الأنماط السلوكية بكيفية تواصل الكائنات مع بعضها البعض، مع التركيز على تحديد المسؤوليات وإدارة التفاعلات بفعالية.

نمط Observer (نمط المراقب)

المفهوم: يحدد نمط المراقب تبعية واحد-إلى-متعدد بين الكائنات. عندما يغير كائن واحد ("الموضوع" أو "القابل للمراقبة") حالته، يتم إعلام جميع الكائنات التابعة له ("المراقبون") وتحديثها تلقائيًا.

حالات الاستخدام الشائعة: هذا النمط هو أساس البرمجة القائمة على الأحداث. يُستخدم بكثافة في تطوير واجهات المستخدم (مستمعو أحداث DOM)، ومكتبات إدارة الحالة (مثل Redux أو Vuex)، وأنظمة المراسلة.

التنفيذ في جافاسكريبت:

مثال: وكالة أنباء ومشتركون

// الموضوع (القابل للمراقبة) class NewsAgency { constructor() { this.subscribers = []; } subscribe(subscriber) { this.subscribers.push(subscriber); console.log(`${subscriber.name} قام بالاشتراك.`); } unsubscribe(subscriber) { this.subscribers = this.subscribers.filter(sub => sub !== subscriber); console.log(`${subscriber.name} قام بإلغاء الاشتراك.`); } notify(news) { console.log(`--- وكالة الأنباء: بث الأخبار: \"${news}\" ---`); this.subscribers.forEach(subscriber => subscriber.update(news)); } } // المراقب class Subscriber { constructor(name) { this.name = name; } update(news) { console.log(`${this.name} استلم آخر الأخبار: \"${news}\"`); } } const agency = new NewsAgency(); const sub1 = new Subscriber('القارئ أ'); const sub2 = new Subscriber('القارئ ب'); const sub3 = new Subscriber('القارئ ج'); agency.subscribe(sub1); agency.subscribe(sub2); agency.notify('الأسواق العالمية في ارتفاع!'); agency.subscribe(sub3); agency.unsubscribe(sub2); agency.notify('الإعلان عن اختراق تقني جديد!');

الإيجابيات والسلبيات:

نمط Strategy (نمط الاستراتيجية)

المفهوم: يحدد نمط الاستراتيجية عائلة من الخوارزميات القابلة للتبديل ويغلف كل واحدة في فئتها الخاصة. هذا يسمح باختيار الخوارزمية وتبديلها في وقت التشغيل، بشكل مستقل عن العميل الذي يستخدمها.

حالات الاستخدام الشائعة: تنفيذ خوارزميات فرز مختلفة، أو قواعد تحقق، أو طرق حساب تكلفة الشحن لموقع تجارة إلكترونية (مثل سعر ثابت، حسب الوزن، حسب الوجهة).

التنفيذ في جافاسكريبت:

مثال: استراتيجية حساب تكلفة الشحن

// السياق (Context) class Shipping { constructor() { this.company = null; } setStrategy(company) { this.company = company; console.log(`تم تعيين استراتيجية الشحن إلى: ${company.constructor.name}`); } calculate(pkg) { if (!this.company) { throw new Error('لم يتم تعيين استراتيجية الشحن.'); } return this.company.calculate(pkg); } } // الاستراتيجيات class FedExStrategy { calculate(pkg) { // حساب معقد بناءً على الوزن، إلخ. const cost = pkg.weight * 2.5 + 5; console.log(`تكلفة FedEx للطرد بوزن ${pkg.weight} كجم هي ${cost}$`); return cost; } } class UPSStrategy { calculate(pkg) { const cost = pkg.weight * 2.1 + 4; console.log(`تكلفة UPS للطرد بوزن ${pkg.weight} كجم هي ${cost}$`); return cost; } } class PostalServiceStrategy { calculate(pkg) { const cost = pkg.weight * 1.8; console.log(`تكلفة الخدمة البريدية للطرد بوزن ${pkg.weight} كجم هي ${cost}$`); return cost; } } const shipping = new Shipping(); const packageA = { from: 'New York', to: 'London', weight: 5 }; shipping.setStrategy(new FedExStrategy()); shipping.calculate(packageA); shipping.setStrategy(new UPSStrategy()); shipping.calculate(packageA); shipping.setStrategy(new PostalServiceStrategy()); shipping.calculate(packageA);

الإيجابيات والسلبيات:

الأنماط الحديثة والاعتبارات المعمارية

بينما تعتبر أنماط التصميم الكلاسيكية خالدة، تطور نظام جافاسكريبت البيئي، مما أدى إلى ظهور تفسيرات حديثة وأنماط معمارية واسعة النطاق تعتبر حاسمة لمطوري اليوم.

نمط الوحدة (Module Pattern)

كان نمط الوحدة أحد أكثر الأنماط انتشارًا في جافاسكريبت قبل ES6 لإنشاء نطاقات خاصة وعامة. يستخدم الإغلاقات (closures) لتغليف الحالة والسلوك. اليوم، تم استبدال هذا النمط إلى حد كبير بـ وحدات ES6 الأصلية (`import`/`export`)، والتي توفر نظام وحدات معياري قائم على الملفات. يعد فهم وحدات ES6 أمرًا أساسيًا لأي مطور جافاسكريبت حديث، حيث أنها المعيار لتنظيم الكود في كل من تطبيقات الواجهة الأمامية والخلفية.

الأنماط المعمارية (MVC, MVVM)

من المهم التمييز بين أنماط التصميم والأنماط المعمارية. بينما تحل أنماط التصميم مشاكل محددة وموضعية، توفر الأنماط المعمارية بنية عالية المستوى لتطبيق بأكمله.

عند العمل مع أطر عمل مثل React أو Vue أو Angular، فأنت تستخدم بطبيعتها هذه الأنماط المعمارية، وغالبًا ما تكون مدمجة مع أنماط تصميم أصغر (مثل نمط المراقب لإدارة الحالة) لبناء تطبيقات قوية.

الخاتمة: استخدام الأنماط بحكمة

أنماط تصميم جافاسكريبت ليست قواعد صارمة ولكنها أدوات قوية في ترسانة المطور. إنها تمثل الحكمة الجماعية لمجتمع هندسة البرمجيات، وتقدم حلولاً أنيقة للمشاكل الشائعة.

مفتاح إتقانها ليس حفظ كل نمط ولكن فهم المشكلة التي يحلها كل منها. عندما تواجه تحديًا في الكود الخاص بك - سواء كان اقترانًا محكمًا، أو إنشاء كائنات معقدًا، أو خوارزميات غير مرنة - يمكنك حينئذٍ اللجوء إلى النمط المناسب كحل محدد جيدًا.

نصيحتنا الأخيرة هي: ابدأ بكتابة أبسط كود يعمل. مع تطور تطبيقك، قم بإعادة هيكلة الكود الخاص بك نحو هذه الأنماط حيثما تتناسب بشكل طبيعي. لا تفرض نمطًا حيث لا تكون هناك حاجة إليه. بتطبيقها بحكمة، ستكتب كودًا ليس وظيفيًا فحسب، بل أيضًا نظيفًا وقابلًا للتطوير وممتعًا للصيانة لسنوات قادمة.