ما هي أنماط التصميم البرمجي في جافا سكريبت

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



ما هو نمط التصميم البرمجي Design Pattern


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




الأنماط هي حلول مثبتة لمشاكل تطوير البرمجيات.


الأنماط قابلة للتطوير لأنها عادةً ما تكون منظمة ولها قواعد يجب عليك اتباعها.


الأنماط قابلة لإعادة الاستخدام لمشاكل مماثلة.


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





ما هي مزايا أنماط التصميم البرمجي


1. صيانة قاعدة البيانات البرمجية


تساعد الأنماط في تنفيذ (DRY (Do not Repeat Yourself))، وهو المفهوم الذي يساعد على منع قاعدة التعليمات البرمجية الخاصة بك من النمو بشكل كبير وغير عملي.





2. إعادة استخدامها بسهولة


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



3. التمكين من الاتصال الفعال


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



4. تحسين مهاراتك الشيئية object-oriented skills


الآن، حتى إذا لم تواجه أيًا من هذه المشكلات مطلقًا، يمكن أن تمنحك أنماط التعلم نظرة ثاقبة حول الأساليب المختلفة لحل المشكلات باستخدام المبادئ الموجهة للكائنات (object-oriented).



ما هي أنماط التصميم البرمجي لجافا سكريبت


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



1. نمط تصميم المنشىء constructor Design Pattern


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





// This creates a new empty Object

var newObject = {};

// This creates a new empty Object

var newObject = Object.create(Object.prototype);

var newObject = newObject();



للوصول إلى خصائص الوظيفة، يجب تهيئة الكائن كالتالي:



const object = new ConstructorObject();



2. نمط النموذج الأولي Prototype Pattern


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



var myCar= {

name:”Ford”,

brake:function(){

console.log(“Stop! I am applying brakes”);

}

Panic: function (){

console.log ( “wait. how do you stop this thing?”)

}

}

// use object create to instantiate a new car

var yourCar= object.create(myCar);

//You can now see that one is a prototype of the other

console.log (your car.name);]



3. نمط تصميم الوحدة Module Design Pattern


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



function AnimalContainter () {

const container = [];

function addAnimal (name) {

container.push(name);

}

function getAllAnimals() {

return container;

}

function removeAnimal(name) {

const index = container.indexOf(name);

if(index < 1) {

throw new Error(‘Animal not found in container’);

}

container.splice(index, 1)

}

return {

add: addAnimal,

get: getAllAnimals,

remove: removeAnimal

}

}

const container = AnimalContainter();

container.add(‘Hen’);

container.add(‘Goat’);

container.add(‘Sheep’);

console.log(container.get()) //Array(3) [“Hen”, “Goat”, “Sheep”]

container.remove(‘Sheep’)

console.log(container.get()); //Array(2) [“Hen”, “Goat”]

4. نمط أسلوب المصنع Factory Pattern


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



// Dealer A

DealerA = {};

DealerA.title = function title() {

return “Dealer A”;

};

DealerA.pay = function pay(amount) {

console.log(

`set up configuration using username: ${this.username} and password: ${

this.password

}`

);

return `Payment for service ${amount} is successful using ${this.title()}`;

};

//Dealer B

DealerB = {};

DealerB.title = function title() {

return “Dealer B”;

};

DealerB.pay = function pay(amount) {

console.log(

`set up configuration using username: ${this.username}

and password: ${this.password}`

);

return `Payment for service ${amount} is successful using ${this.title()}`;

};

//@param {*} DealerOption

//@param {*} config

function DealerFactory(DealerOption, config = {}) {

const dealer = Object.create(dealerOption);

Object.assign(dealer, config);

return dealer;

}

const dealerFactory = DealerFactory(DealerA, {

username: “user”,

password: “pass”

});

console.log(dealerFactory.title());

console.log(dealerFactory.pay(12));

const dealerFactory2 = DealerFactory(DealerB, {

username: “user2”,

password: “pass2”

});

console.log(dealerFactory2.title());

console.log(dealerFactory2.pay(50));



5. النمط المراقب Observer Pattern


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



function Observer() {

this.observerContainer = [];

}

Observer.prototype.subscribe = function (element) {

this.observerContainer.push(element);

}

// the following removes an element from the container

Observer.prototype.unsubscribe = function (element) {

const elementIndex = this.observerContainer.indexOf(element);

if (elementIndex &gt; -1) {

this.observerContainer.splice(elementIndex, 1);

}

}

/**

* we notify elements added to the container by calling

* each subscribed components added to our container

*/

Observer.prototype.notifyAll = function (element) {

this.observerContainer.forEach(function (observerElement) {

observerElement(element);

});

}

6. نمط الأمر Command Pattern


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



(function(){

var carManager = {

//information requested

requestInfo: function( model, id ){

return “The information for ” + model + ” with ID ” + id + ” is foo bar”;

},

// now purchase the car

buyVehicle: function( model, id ){

return “You have successfully purchased Item ” + id + “, a ” + model;

},

// now arrange a viewing

arrangeViewing: function( model, id ){

return “You have successfully booked a viewing of ” + model + ” ( ” + id + ” ) “;

}

};

})();

بارك الله فيك ع موضوعك القيم والمميز
وبانتظار جديدك القادم
ارق التحايا لك

سلمت كفوفك لطيب الجهد
وَ تمُيز العطاء
لاحرمنا الله روائِع مجهوداتك

يعطيك العافيه عالموضوع وتسلم يمينك
بانتظار جديدك

ودي ووردي

تسلم ايدك ع الطرح
يعتيك العافية

تسلم ايدك ع الطرح
يعتيك العافية