وأوضح State في JavaScript من خلال طهي وجبة بسيطة

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

عندما تبدأ في كتابة برامج JavaScript بسيطة ، لا داعي للقلق بشأن عدد المتغيرات التي تستخدمها ، أو كيف تعمل الوظائف والكائنات المختلفة معًا.

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

على سبيل المثال ، هذا متغير عام يسمى الحالة :

let state = "global";

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

هنا يأتي دور مفهوم الدولة. تصف الحالة حالة البرنامج بأكمله أو كائن فردي. يمكن أن يكون نصًا أو رقمًا أو منطقيًا أو نوع بيانات آخر.

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

تصف هذه المقالة الحالة في سياق React ، وهي مكتبة JavaScript شائعة.

لكن خمن ماذا؟ حتى الدولة يمكن أن تصيبك بالصداع بمجرد أن تصبح التعليمات البرمجية معقدة! يمكن أن يؤدي تغيير الحالة إلى عواقب غير مقصودة.

دعنا نتوقف هنا. State هي أداة شائعة في البرمجة الشيئية ، أو OOP. لكن العديد من المبرمجين يفضلون البرمجة الوظيفية ، والتي لا تشجع على تغيير الحالة. يدعم JavaScript كلا النموذجين.

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

سيوضح هذا البرنامج التعليمي كيف يمكنك طهي وجبة من السباغيتي والصلصة من منظور OOP ومن منظور وظيفي.

فيما يلي معاينة سريعة للطريقتين المختلفتين:

دعنا نقفز إليه. لفهم هذا البرنامج التعليمي ، تحتاج فقط إلى فهم الوظائف والكائنات في JavaScript.

الطريقة الشيئية (باستخدام الحالة)

في الرسم أعلاه ، أظهرنا طريقتين مختلفتين لصنع عشاء المعكرونة هذا:

  1. طريقة تركز على حالة الأدوات المختلفة ، مثل الموقد والقدر والمعكرونة.
  2. طريقة تركز على تطور الطعام نفسه ، دون ذكر حالة الأدوات الفردية (الأواني والمواقد وما إلى ذلك)

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

  1. العالمية ، أو حالة هذه الوجبة بأكملها.
  2. محلي لكل كائن.

سنستخدم بناء جملة ES6 في هذا البرنامج التعليمي لإنشاء كائنات. هذا مثال على الحالة العالمية ونموذج "وعاء".

let stoveTemp = 500;
function Pot(){ this.boilStatus = ''; this.startBoiling = function(){ if( stoveTemp > 400) this.boilStatus = "boiling"; }}
let pastaPot = new Pot();pastaPot.startBoiling();
console.log(pastaPot);// Pot { boilStatus = 'boiling'; }

ملاحظة: لقد قمت بتبسيط console.logالعبارة للتركيز على تحديث الحالة.

إليك تمثيل مرئي لهذا المنطق:

قبل

بعد

هناك حالتان ، وعندما pastaPotيتم إنشاؤه عبر Potالنموذج الأولي ، يكون فارغًا في البداية boilStatus. لكن بعد ذلك ، هناك تغيير في الدولة.

نجري pastaPot.startBoiling()، والآن boilStatus(الولاية المحلية) "تغلي" ، لأن الحالة العالمية stoveTempلأكثر من 400.

الآن دعنا نذهب خطوة أخرى إلى الأمام. سوف نسمح للمعكرونة بأن تصبح مسلوقة بسبب حالة pastaPot.

إليك الكود الذي سنضيفه إلى المقتطف أعلاه:

function Pasta (){ this.cookedStatus = false; this.addToPot = function (boilStatus){ if(boilStatus == "boiling") this.cookedStatus = true; }}
let myMeal = new Pasta();myMeal.addToPot(pastaPot.boilStatus);
console.log(myMeal.cookedStatus);// true

واو! هذا كثير في وقت واحد. إليكم ما حدث.

  1. لقد أنشأنا نموذجًا أوليًا جديدًا لـ "Pasta" ، حيث سيكون لكل كائن حالة محلية تسمى cookedStatus
  2. أنشأنا مثيلًا جديدًا من المعكرونة يسمى myMeal
  3. استخدمنا الدولة من pastaPotالكائن الذي خلقنا في المقتطف الماضي لتحديد ما إذا كان علينا أن تحديث الدولة ودعا cookedStatusفي myMealلطهيها.
  4. نظرًا لأن حالة boilStatusin pastaPotكانت "تغلي" ، فقد تم طهي المعكرونة لدينا الآن!

إليك هذه العملية بصريًا:

قبل

بعد

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

الطريقة الوظيفية (بدون حالة)

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

البرمجة الوظيفية لها قيمتان أساسيتان تفصلانها عن OOP: الثبات والوظائف النقية.

لن أتعمق كثيرًا في هذه الموضوعات ، ولكن إذا كنت تريد معرفة المزيد ، فأنا أشجعك على مراجعة هذا الدليل للبرمجة الوظيفية في JavaScript.

Both of these principles discourage the use of state modification in your code. That means that we can’t use local or global state.

Functional programming instead encourages us to pass in parameters to individual functions. We can use outside variables, but we can’t use them as state.

Here’s an example of a function that will boil the pasta:

const stoveTemp = 500;
const cookPasta = (temp) => { if(temp > 400) return 'cooked';}
console.log(cookPasta(stoveTemp));// 'cooked'

This code will successfully return a string of ‘cooked’. But notice — there is no object that we are updating. The function simply returns the value that will be used in the next step.

Instead, we are focused on the inputs and outputs of one function: cookPasta.

This perspective looks at the transformation of the food itself, rather than the tools that are used to cook it. It’s a little harder to visualize, but we don’t need to have the function depend on external state.

Here’s what it looks like:

فكر في الأمر على أنه "عرض زمني" لتقدم الوجبة - هذه الوظيفة الخاصة تغطي فقط الجزء الأول ، الانتقال من المعكرونة الجافة إلى المعكرونة المطبوخة.

الآن دعونا نغطي الجزء الثاني حيث يتم تقديم الطعام. هذا هو الرمز الذي سيخدم الوجبة. سيأتي بعد كتلة الكود أعلاه:

const serveMeal = (pasta) => { if (pasta == 'cooked') return 'Dinner is ready.'}
console.log( serveMeal(cookPasta(stoveTemp)) );// 'Dinner is ready.'

الآن ، نقدم نتائج cookPastaالدالة مباشرة إلى serveMealالدالة. مرة أخرى ، نحن قادرون على القيام بذلك دون تغيير الحالة ، أو تغيير هياكل البيانات.

فيما يلي رسم تخطيطي يستخدم "عرض المخطط الزمني" لإظهار كيفية عمل هاتين الوظيفتين معًا:

هل أنت مهتم بمزيد من البرامج التعليمية المرئية؟

إذا استمتعت بهذا الدليل ، فامنحه "تصفيق"!

وإذا كنت ترغب في قراءة المزيد من البرامج التعليمية المرئية حول HTML و CSS و JavaScript ، فراجع موقع CodeAnalogies الرئيسي للحصول على أكثر من 50 برنامجًا تعليميًا.