في هذه المقالة، نقوم بتحليل فئة DefaultMap في كود مصدر Tailwind CSS. هذه خريطة يمكنها إنشاء قيم افتراضية للمفاتيح غير الموجودة. تتم إضافة القيم الافتراضية التي تم إنشاؤها إلى الخريطة لتجنب إعادة الحساب.

/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap extends Map {
  constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}

في JavaScript، لدينا Map API ولكن لا يوجد DefaultMap. هذه DefaultMap عبارة عن فئة مخصصة تعمل على توسيع الخريطة في كود مصدر Tailwind CSS.

دعونا نفهم هذا الرمز.

constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
}

DefaultMap هي فئة تحتوي على مُنشئ يتوقع وظيفة المصنع. تستدعي super() مُنشئ الفئة الأصلية، في هذه الحالة، هذه هي Map API والمعلمة الثانية لوظيفة المصنع هي self: DefaultMap مما يعني أن لديها حق الوصول إلى مثيل Map.

كيف تتم تهيئة الخريطة الافتراضية؟

دعنا نجد مثالاً حيث تمت تهيئة DefaultMap. يوضح design-system.ts استخدام DefaultMap.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

هنا (variant) => parseVariant(variant, designSystem) تصبح طريقة المصنع التي تضيف مفتاحًا افتراضيًا في حالة عدم وجود مفتاح.

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }

هذه هي القيمة التي يتم إرجاعها بواسطة الدالة parseVariant.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم المفاهيم المعمارية لقاعدة التعليمات البرمجية المتقدمة المستخدمة في المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

كما نقدم خدمات تطوير الويب والكتابة الفنية. تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L40

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516