ما هو الديكور؟ دعونا نتحدث عن كيفية استخدام أدوات تزيين الطريقة في Angular؟

لا تعد أدوات تزيين الطريقة ميزة حصرية لـ Angular، فهذه الميزة متاحة أيضًا في es6. [توصية برنامج تعليمي ذي صلة: "برنامج تعليمي زاوي"]

ما هو الديكور؟

في es6، الديكور (Decorator) هو بناء جملة مرتبط بفئة (فئة)، يستخدم للتعليق على الفئات وأساليبها أو تعديلها؛ أثناء الترجمة، عادةً ما يتم وضع بناء الجملة "@اسم الوظيفة" قبل تعريف الفئات وأساليبها. هناك نوعان من الديكورات: مصممو الصنف ومصممو أسلوب الصنف.

في Angular، المُزخرف الأكثر شيوعًا هو مُزخرف فئة @Component، ويمكننا أيضًا إضافة مُزخرفات إلى الأساليب:

يمكن استخدام

مزخرف الطريقة لمراقبة أو تعديل أو استبدال تعريف

الطريقة

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

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

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

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

استخدام مصمم الطريقة

يحتوي الديكور بشكل أساسي على ثلاثة معلمات إدخال

• هدف: الكائن - كائن
• مفتاح الفئة المزخرف: سلسلة - واصف اسم الطريقة
• : TypePropertyDescript - واصف الخاصية

import { Component, OnInit } from '@angular/core';

سجل الوظيفة (الهدف: أي، المفتاح: سلسلة، الواصف: أي) {
  console.log(target);
  console.log(key);
  console.log(descriptionor);
}
@عنصر({
  المحدد: "اختبار التطبيق fn"،
  templateUrl: './fn-test.component.html'،
  styleUrls: ['./fn-test.component.scss']
})
فئة التصدير FnTestComponent تنفذ OnInit {

  منشئ () { }

  ngOnInit (): باطل {
    هذا.الدفع(2,3)
  }
  
  @سجل
  الدفع(السعر: الرقم، العدد:الرقم): الرقم {
      سعر الإرجاع*العدد
  }
}

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

دون تمرير المعلمات

، وهي الطريقة المزخرفة، ومن خلال هذه الطريقة يمكننا الحصول على المعلمات التي تم تمريرها ونتيجة تنفيذ الدالة:

function log(target: Any, key: السلسلة، الواصف: أي) {
  دع الطريقة = descriptor.value؛
  descriptor.value = function (...args: Any[]) {
      نتيجة فار: Any =method.apply(this, args);
      console.log(`method:${key}, args:${JSON.stringify(args)}, return：${result}`);
      نتيجة الإرجاع؛
  }
}

المعلمات الواردة

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

function log(nowTime: Date) {
  console.log(nowTime);
  وظيفة الإرجاع (الهدف: أي، المفتاح: سلسلة، الواصف: أي) {
    دع الطريقة = descriptor.value؛
    descriptor.value = function (...args: Any[]) {
        نتيجة فار: Any =method.apply(this, args);
        console.log(`method:${key}, args:${JSON.stringify(args)}, return：${result}`);
        نتيجة الإرجاع؛
    }
  }
}

فئة التصدير FnTestComponent تنفذ OnInit {

  ...    
  @سجل(تاريخ جديد())
  الدفع (السعر: الرقم، العدد: العدد): الرقم {سعر الإرجاع*العدد
  }
}

// الثلاثاء 07 يونيو 2022 الساعة 18:48:22 بتوقيت جرينتش +0800 (التوقيت الرسمي الصيني)
// fn-test.component.ts:9 الطريقة: pay، args: [2،3]، return: 6

ملخص

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