3 أمثلة عملية لاستخدام التدمير في JavaScript

كتابة منظف الكود باستخدام أنماط التدمير

من المحتمل أن تكون معتادًا على إعادة الهيكلة في JavaScript. لقد جاء إلينا في عام 2015 في مواصفات ES6 ، ولكن إذا كنت بحاجة إلى تحديث معلوماتك ، فيمكنك على موقع Mozilla قراءة مقال تفصيلي كبير حول كيفية عمل كل شيء .

لكن معرفة كيفية عملها لا تختلف على الإطلاق عن معرفة كيفية استخدامها. فيما يلي ثلاثة أنماط لمساعدتك في جعل الشفرة أكثر نظافة وموثوقية وسهولة في القراءة!

1. الحجج الدالة المسماة

الوسيطات المسماة هي طريقة بديلة للتعامل مع معلمات الوظيفة للوسائط الموضعية. بدلاً من تحديد الوسائط في ترتيب محدد جيدًا ، ما عليك سوى تقديم اسمهم. في بيثون ، على سبيل المثال ، يبدو كالتالي:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

ترى؟ الترتيب غير مهم إذا قمت بتحديد اسم المعلمة بشكل صريح. المزايا على الحجج الموضعية هي:

1. يمكنك حذف معلمة واحدة أو أكثر عند استدعاء دالة
2. ترتيب تمرير الحجج الآن غير مهم
3. أصبح الرمز أكثر قابلية للقراءة

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

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

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

2. منظف استجابة خادم تحليل

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

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

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

تحديد القيم الافتراضية أثناء المهمة

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

قبل أن تأتي عملية التدمير ، يمكنك القيام بشيء كهذا:

 //      var nightMode = userSettings.nightMode || false 

ولكن هذا النهج سوف يتطلب سطر من التعليمات البرمجية لكل مهمة. تتيح لك عملية التدمير القيام بكل شيء في ضربة واحدة:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

يمكن استخدام هذا النمط لتعيين حالة مكونات React!

آمل أن تكون هذه الأنماط مفيدة! لقراءة المزيد حول التدمير ، اتبع الروابط أدناه (المعلومات باللغة الإنجليزية - الترجمة تقريبًا) :

ES6 في العمق: تدمير

تعلم أساسيات تدمير الدعائم في رد الفعل