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

جدول المحتويات

• السياق والمواصفات
• مقدمة
• الوصول التلقائي
• خلق الديكور
  • مصمم ديكور بسيط
  • التحقق مع مصممي الديكور
  • خيارات الديكور
• البيانات الوصفية

السياق والمواصفات

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

مقدمة

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

لا تحتاج إلى الانتباه إلى الكود المنقول على الجانب الأيمن من Babel REPL ، إلا إذا كنت تريد البحث في polyfill للديكور. الجانب الأيسر من Babel REPL هو المكان الذي يمكنك فيه تحرير التعليمات البرمجية وكتابتها لتجربتها بنفسك.

للتأكيد، يجب أن تعرض وحدة تحكم أدوات المطور سجلات وحدة التحكم. إذا لم يكن الأمر كذلك، فتأكد من تحديد التقييم في الجزء العلوي الأيسر.

الوصول التلقائي

من الميزات المهمة لمواصفات Decorators هي الملحقات التلقائية. سنبدأ بالتعرف على ماهيتها وكيف أن استخدام أداة الوصول التلقائي سيجعل كتابة الديكورات أسهل.

يوضح مقترح مصممي الديكور كيفية الوصول التلقائي هنا. لكنها في النهاية ميزة بسيطة؛ دعونا نلقي نظرة على مثال عملي أساسي: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

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

(لاحظ أنه يمكنك أيضًا استخدام البيانات الثابتة مع أدوات الوصول التلقائي، مثل أداة الوصول الثابتة myBoolean = false)

خلق الديكور

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

مصمم ديكور بسيط

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

إليك مصمم ديكور وظيفي يحتفظ بمتغير داخلي، ويسمح لك بالحصول على هذا المتغير وتعيينه من خلال الخاصية الموجودة في الفصل: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

يُرجع هذا الديكور كائنًا بطريقتين: get() و set(). هذه هي الطريقة التي يمكن بها لمصمم الديكور الخاص بالملحق التلقائي "تزيين" أو تغليف كل من أداة الضبط والمُحصل للخاصية في مكان واحد؛ ليس علينا إنشاء simpleGetterDecorator و simpleSetterDecorator. بدلاً من ذلك، قمنا بدمجها في تعريف واحد باستخدام أدوات الوصول التلقائي، وهو أمر أسهل.

في النهاية، تبدو هذه وظيفة عادية إلى حد ما حتى الآن - وهو أمر رائع بالنسبة للمقدمة!

التحقق من الصحة مع الديكور

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

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

لذلك نضيف منطقًا إلى طريقة set () والآن أي شخص يحاول تعيين خاصية myEvenNumber في فصلنا سوف يمر عبر منطق التحقق من الصحة. لطيف - جيد.

خيارات الديكور

الآن بعد أن أصبح لدينا ديكور لطيف للأرقام الزوجية فقط، فلنجعله يتعامل مع الأرقام الزوجية والفردية مع خيار تكوين نوع الرقم الذي نريده!

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

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

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

البيانات الوصفية

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

مواصلة التعلم

تابع إلى المنشور التالي في السلسلة لتتعلم كيفية إنشاء (أو تطبيق عدة) ديكورات على خاصية واحدة!