مُزخرفات جافاسكريبت: إطلاق العنان لقوة البرمجة الوصفية

توفر مُزخرفات جافاسكريبت، التي قُدمت كميزة قياسية في ES2022، طريقة قوية وأنيقة لإضافة البيانات الوصفية وتعديل سلوك الأصناف (classes)، والدوال (methods)، والخصائص (properties)، والمعلمات (parameters). إنها تقدم صيغة تعريفية (declarative syntax) لتطبيق الاهتمامات الشاملة (cross-cutting concerns)، مما يؤدي إلى كود أكثر قابلية للصيانة، وإعادة الاستخدام، وتعبيرية. سيتعمق هذا المقال في عالم مُزخرفات جافاسكريبت، مستكشفًا مفاهيمها الأساسية، وتطبيقاتها العملية، والآليات الأساسية التي تجعلها تعمل.

ما هي مُزخرفات جافاسكريبت؟

في جوهرها، المُزخرفات هي دوال تقوم بتعديل أو تحسين العنصر المُزخرف. تستخدم الرمز @ متبوعًا باسم دالة المُزخرف. فكر فيها كتعليقات توضيحية (annotations) أو مُعدِّلات (modifiers) تضيف بيانات وصفية أو تغير السلوك الأساسي دون تغيير المنطق الجوهري للكيان المُزخرف مباشرة. إنها تغلف العنصر المُزخرف بفعالية، وتحقن وظائف مخصصة.

على سبيل المثال، يمكن لمُزخرف أن يسجل استدعاءات الدوال تلقائيًا، أو يتحقق من صحة معلمات الإدخال، أو يدير التحكم في الوصول. تعزز المُزخرفات فصل الاهتمامات (separation of concerns)، مما يحافظ على منطق العمل الأساسي نظيفًا ومركزًا مع السماح لك بإضافة سلوكيات إضافية بطريقة نمطية.

صيغة المُزخرفات

يتم تطبيق المُزخرفات باستخدام الرمز @ قبل العنصر الذي تزخرفه. هناك أنواع مختلفة من المُزخرفات، كل منها يستهدف عنصرًا معينًا:

• مُزخرفات الأصناف (Class Decorators): تُطبق على الأصناف.
• مُزخرفات الدوال (Method Decorators): تُطبق على الدوال.
• مُزخرفات الخصائص (Property Decorators): تُطبق على الخصائص.
• مُزخرفات الوصول (Accessor Decorators): تُطبق على دوال getter و setter.
• مُزخرفات المعلمات (Parameter Decorators): تُطبق على معلمات الدوال.

إليك مثال أساسي لمُزخرف صنف:

            @logClass
class MyClass {
  constructor() {
    // ...
  }
}

function logClass(target) {
  console.log(`Class ${target.name} has been created.`);
}

            

              
                Copy
              
            
          

في هذا المثال، logClass هي دالة مُزخرف تأخذ مُنشئ الصنف (target) كوسيط. ثم تقوم بتسجيل رسالة في الكونسول كلما تم إنشاء نسخة من MyClass.

فهم البرمجة الوصفية

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

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

على سبيل المثال، يمكنك استخدام Reflect Metadata لتخزين معلومات حول نوع بيانات خاصية ما، أو قواعد التحقق من الصحة، أو متطلبات التفويض. يمكن بعد ذلك استخدام هذه البيانات الوصفية بواسطة المُزخرفات لتنفيذ إجراءات مثل التحقق من صحة الإدخال، أو تحويل البيانات (serializing)، أو فرض سياسات الأمان.

أنواع المُزخرفات مع أمثلة

1. مُزخرفات الأصناف

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

مثال: تطبيق نمط Singleton

يضمن نمط Singleton إنشاء نسخة واحدة فقط من الصنف على الإطلاق. إليك كيفية تطبيقه باستخدام مُزخرف صنف:

            function Singleton(target) {
  let instance = null;

  return function (...args) {
    if (!instance) {
      instance = new target(...args);
    }
    return instance;
  };
}

@Singleton
class DatabaseConnection {
  constructor(connectionString) {
    this.connectionString = connectionString;
    console.log(`Connecting to ${connectionString}`);
  }

  query(sql) {
    console.log(`Executing query: ${sql}`);
  }
}

const db1 = new DatabaseConnection('mongodb://localhost:27017');
const db2 = new DatabaseConnection('mongodb://localhost:27017');

console.log(db1 === db2); // Output: true

            

              
                Copy
              
            
          

في هذا المثال، يغلف المُزخرف Singleton الصنف DatabaseConnection. يضمن أنه يتم إنشاء نسخة واحدة فقط من الصنف، بغض النظر عن عدد مرات استدعاء المُنشئ.

2. مُزخرفات الدوال

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

مثال: تسجيل استدعاءات الدواليقوم هذا المُزخرف بتسجيل اسم الدالة ووسائطها في كل مرة يتم فيها استدعاء الدالة.

            function logMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args) {
    console.log(`Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(x, y) {
    return x + y;
  }

  @logMethod
  subtract(x, y) {
    return x - y;
  }
}

const calc = new Calculator();
calc.add(5, 3); // Logs: Calling method: add with arguments: [5,3]
                //       Method add returned: 8
calc.subtract(10, 4); // Logs: Calling method: subtract with arguments: [10,4]
                  //       Method subtract returned: 6

            

              
                Copy
              
            
          

هنا، يغلف المُزخرف logMethod الدالة الأصلية. قبل تنفيذ الدالة الأصلية، يسجل اسم الدالة ووسائطها. بعد التنفيذ، يسجل القيمة المُرجعة.

3. مُزخرفات الخصائص

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

مثال: التحقق من صحة قيم الخصائص

            function validate(target, propertyKey) {
  let value;

  const getter = function () {
    return value;
  };

  const setter = function (newValue) {
    if (typeof newValue !== 'string' || newValue.length < 3) {
      throw new Error(`Property ${propertyKey} must be a string with at least 3 characters.`);
    }
    value = newValue;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class User {
  @validate
  name;
}

const user = new User();

try {
  user.name = 'Jo'; // Throws an error
} catch (error) {
  console.error(error.message);
}

user.name = 'John Doe'; // Works fine
console.log(user.name);

            

              
                Copy
              
            
          

في هذا المثال، يعترض المُزخرف validate الوصول إلى الخاصية name. عندما يتم تعيين قيمة جديدة، فإنه يتحقق مما إذا كانت القيمة سلسلة نصية وطولها لا يقل عن 3 أحرف. إذا لم يكن كذلك، فإنه يلقي خطأ.

4. مُزخرفات الوصول

تُطبق مُزخرفات الوصول على دوال getter و setter. إنها تشبه مُزخرفات الدوال، لكنها تستهدف دوال الوصول (getters and setters) على وجه التحديد.

مثال: التخزين المؤقت لنتائج الـ Getter

            function cached(target, propertyKey, descriptor) {
  const originalGetter = descriptor.get;
  let cacheValue;
  let cacheSet = false;

  descriptor.get = function () {
    if (cacheSet) {
      console.log(`Returning cached value for ${propertyKey}`);
      return cacheValue;
    } else {
      console.log(`Calculating and caching value for ${propertyKey}`);
      cacheValue = originalGetter.call(this);
      cacheSet = true;
      return cacheValue;
    }
  };
  return descriptor;
}

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  @cached
  get area() {
    console.log('Calculating area...');
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle(5);
console.log(circle.area); // Calculates and caches the area
console.log(circle.area); // Returns the cached area

            

              
                Copy
              
            
          

يغلف المُزخرف cached دالة getter للخاصية area. في المرة الأولى التي يتم فيها الوصول إلى area، يتم تنفيذ دالة getter، ويتم تخزين النتيجة مؤقتًا. عمليات الوصول اللاحقة تُرجع القيمة المخزنة مؤقتًا دون إعادة حسابها.

5. مُزخرفات المعلمات

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

مثال: التحقق من صحة معلمة البريد الإلكتروني

            const requiredMetadataKey = Symbol("required");

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

function validateEmail(email: string) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function () {
    let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
          if(arguments.length <= parameterIndex){
             throw new Error("Missing required argument.");
          }

          const email = arguments[parameterIndex];
          if (!validateEmail(email)) {
              throw new Error(`Invalid email format for argument #${parameterIndex + 1}.`);
          }
      }
    }

    return method.apply(this, arguments);
  }
}

class EmailService {
  @validate
  sendEmail(@required to: string, subject: string, body: string) {
    console.log(`Sending email to ${to} with subject: ${subject}`);
  }
}

const emailService = new EmailService();

try {
  emailService.sendEmail('invalid-email', 'Hello', 'This is a test email.'); // Throws an error
} catch (error) {
  console.error(error.message);
}

emailService.sendEmail('valid@email.com', 'Hello', 'This is a test email.'); // Works fine

            

              
                Copy
              
            
          

في هذا المثال، يحدد المُزخرف @required المعلمة to على أنها مطلوبة ويشير إلى أنها يجب أن تكون بتنسيق بريد إلكتروني صالح. ثم يستخدم المُزخرف validate واجهة Reflect Metadata لاسترداد هذه المعلومات والتحقق من صحة المعلمة في وقت التشغيل.

فوائد استخدام المُزخرفات

• تحسين قابلية قراءة الكود وصيانته: توفر المُزخرفات صيغة تعريفية تجعل الكود أسهل في الفهم والصيانة.
• تعزيز إعادة استخدام الكود: يمكن إعادة استخدام المُزخرفات عبر العديد من الأصناف والدوال، مما يقلل من تكرار الكود.
• فصل الاهتمامات: تعزز المُزخرفات فصل الاهتمامات من خلال السماح لك بإضافة سلوكيات إضافية دون تعديل المنطق الأساسي.
• زيادة المرونة: توفر المُزخرفات طريقة مرنة لتعديل سلوك عناصر الكود في وقت التشغيل.
• البرمجة كائنية التوجه (AOP): تمكّن المُزخرفات مبادئ AOP، مما يسمح لك بتنظيم الاهتمامات الشاملة.

حالات استخدام المُزخرفات

يمكن استخدام المُزخرفات في مجموعة واسعة من السيناريوهات، بما في ذلك:

• التسجيل (Logging): تسجيل استدعاءات الدوال، أو مقاييس الأداء، أو رسائل الخطأ.
• التحقق من الصحة (Validation): التحقق من صحة معلمات الإدخال أو قيم الخصائص.
• التخزين المؤقت (Caching): تخزين نتائج الدوال مؤقتًا لتحسين الأداء.
• التفويض (Authorization): فرض سياسات التحكم في الوصول.
• حقن التبعية (Dependency Injection): إدارة التبعيات بين الكائنات.
• التحويل (Serialization/Deserialization): تحويل الكائنات من وإلى تنسيقات مختلفة.
• ربط البيانات (Data Binding): تحديث عناصر واجهة المستخدم تلقائيًا عند تغيير البيانات.
• إدارة الحالة (State Management): تنفيذ أنماط إدارة الحالة في تطبيقات مثل React أو Angular.
• إصدارات واجهة برمجة التطبيقات (API Versioning): تمييز الدوال أو الأصناف على أنها تنتمي إلى إصدار معين من واجهة برمجة التطبيقات.
• أعلام الميزات (Feature Flags): تمكين أو تعطيل الميزات بناءً على إعدادات التكوين.

مصانع المُزخرفات

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

مثال: مُسجِّل (logger) بمعلمات

            function logMethodWithPrefix(prefix: string) {
  return function (target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
      console.log(`${prefix}: Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
      const result = originalMethod.apply(this, args);
      console.log(`${prefix}: Method ${propertyKey} returned: ${result}`);
      return result;
    };
    return descriptor;
  };
}

class Calculator {
  @logMethodWithPrefix('[CALCULATION]')
  add(x, y) {
    return x + y;
  }

  @logMethodWithPrefix('[CALCULATION]')
  subtract(x, y) {
    return x - y;
  }
}

const calc = new Calculator();
calc.add(5, 3); // Logs: [CALCULATION]: Calling method: add with arguments: [5,3]
                //       [CALCULATION]: Method add returned: 8
calc.subtract(10, 4); // Logs: [CALCULATION]: Calling method: subtract with arguments: [10,4]
                  //       [CALCULATION]: Method subtract returned: 6

            

              
                Copy
              
            
          

الدالة logMethodWithPrefix هي مصنع مُزخرفات. تأخذ وسيط prefix وتُرجع دالة مُزخرف. تقوم دالة المُزخرف بعد ذلك بتسجيل استدعاءات الدوال مع البادئة المحددة.

أمثلة واقعية ودراسات حالة

لنتأمل منصة تجارة إلكترونية عالمية. قد تستخدم المُزخرفات من أجل:

• التدويل (i18n): يمكن للمُزخرفات ترجمة النصوص تلقائيًا بناءً على لغة المستخدم. يمكن لمُزخرف @translate تمييز الخصائص أو الدوال التي تحتاج إلى ترجمة. سيقوم المُزخرف بعد ذلك بجلب الترجمة المناسبة من حزمة موارد بناءً على اللغة المحددة للمستخدم.
• تحويل العملات: عند عرض الأسعار، يمكن لمُزخرف @currency تحويل السعر تلقائيًا إلى عملة المستخدم المحلية. سيحتاج هذا المُزخرف إلى الوصول إلى واجهة برمجة تطبيقات خارجية لتحويل العملات وتخزين أسعار الصرف.
• حساب الضرائب: تختلف قواعد الضرائب بشكل كبير بين البلدان والمناطق. يمكن استخدام المُزخرفات لتطبيق معدل الضريبة الصحيح بناءً على موقع المستخدم والمنتج الذي يتم شراؤه. يمكن لمُزخرف @tax استخدام معلومات تحديد الموقع الجغرافي لتحديد معدل الضريبة المناسب.
• كشف الاحتيال: يمكن لمُزخرف @fraudCheck على العمليات الحساسة (مثل الدفع) تشغيل خوارزميات كشف الاحتيال.

مثال آخر هو شركة لوجستية عالمية:

• تتبع الموقع الجغرافي: يمكن للمُزخرفات تحسين الدوال التي تتعامل مع بيانات الموقع، وتسجيل دقة قراءات GPS أو التحقق من صحة تنسيقات الموقع (خطوط الطول/العرض) لمناطق مختلفة. يمكن لمُزخرف @validateLocation ضمان التزام الإحداثيات بمعيار معين (مثل ISO 6709) قبل المعالجة.
• التعامل مع المناطق الزمنية: عند جدولة عمليات التسليم، يمكن للمُزخرفات تحويل الأوقات تلقائيًا إلى المنطقة الزمنية المحلية للمستخدم. سيستخدم مُزخرف @timeZone قاعدة بيانات للمناطق الزمنية لإجراء التحويل، مما يضمن دقة جداول التسليم بغض النظر عن موقع المستخدم.
• تحسين المسار: يمكن استخدام المُزخرفات لتحليل عناوين المنشأ والوجهة لطلبات التسليم. يمكن لمُزخرف @routeOptimize استدعاء واجهة برمجة تطبيقات خارجية لتحسين المسار للعثور على المسار الأكثر كفاءة، مع مراعاة عوامل مثل ظروف حركة المرور وإغلاق الطرق في بلدان مختلفة.

المُزخرفات وتايب سكريبت

لدى تايب سكريبت دعم ممتاز للمُزخرفات. لاستخدام المُزخرفات في تايب سكريبت، تحتاج إلى تمكين خيار المترجم experimentalDecorators في ملف tsconfig.json الخاص بك:

            {
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    // ... other options
  }
}

            

              
                Copy
              
            
          

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

مستقبل المُزخرفات

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

التحديات والاعتبارات

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

أفضل الممارسات لاستخدام المُزخرفات

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

الخاتمة

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