इस लेख में, हम टेलविंड सीएसएस स्रोत कोड में डिफॉल्टमैप क्लास का विश्लेषण करते हैं। यह एक ऐसा मानचित्र है जो उन कुंजियों के लिए डिफ़ॉल्ट मान उत्पन्न कर सकता है जो मौजूद नहीं हैं। पुन:गणना से बचने के लिए उत्पन्न डिफ़ॉल्ट मानों को मानचित्र में जोड़ा जाता है।

/**
 * 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
  }
}

जावास्क्रिप्ट में, हमारे पास एक मैप एपीआई है लेकिन कोई डिफॉल्टमैप नहीं है। यह डिफॉल्टमैप एक कस्टम क्लास है जो टेलविंड सीएसएस सोर्स कोड में मैप का विस्तार करता है।

आइए इस कोड को समझें।

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

DefaultMap एक क्लास है जिसमें एक कंस्ट्रक्टर होता है जो फ़ैक्टरी फ़ंक्शन की अपेक्षा करता है। सुपर() पैरेंट क्लास के कंस्ट्रक्टर को कॉल करता है, इस मामले में, यह मैप एपीआई है और फ़ैक्टरी फ़ंक्शन का दूसरा पैरामीटर स्वयं है: DefaultMap जिसका अर्थ है कि इसकी मैप इंस्टेंस तक पहुंच है।

डिफ़ॉल्टमैप कैसे प्रारंभ किया जाता है?

आइए एक उदाहरण ढूंढें जहां यह डिफॉल्टमैप प्रारंभ किया गया है। design-system.ts DefaultMap के उपयोग को प्रदर्शित करता है।

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

यहाँ (वेरिएंट) => parseVariant(variant, designSystem) हमारी फ़ैक्टरी विधि बन जाती है जो कुंजी मौजूद नहीं होने पर एक डिफ़ॉल्ट जोड़ती है।

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

यह पार्सवेरिएंट फ़ंक्शन द्वारा लौटाया गया मान है।

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं में उपयोग की जाने वाली उन्नत कोडबेस वास्तुशिल्प अवधारणाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - 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