”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > TailwindCSS 源代码中的 DefaultMap 类。

TailwindCSS 源代码中的 DefaultMap 类。

发布于2024-11-08
浏览:655

本文我们分析Tailwind CSS源代码中的DefaultMap类。这是一个可以为不存在的键生成默认值的映射。生成的默认值被添加到映射中以避免重新计算。

/**
 * 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 源代码中的 Map。

让我们来理解这段代码。

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

DefaultMap 是一个具有需要工厂函数的构造函数的类。 super() 调用父类的构造函数,在本例中,这是 Map API,工厂函数的第二个参数是 self: DefaultMap 这意味着它可以访问 Map 实例。

DefaultMap是如何初始化的?

让我们找一个初始化 DefaultMap 的例子。 design-system.ts 演示了 DefaultMap 的用法。

DefaultMap class in TailwindCSS source code.

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



版本声明 本文转载于:https://dev.to/thinkthroo/defaultmap-class-in-tailwindcss-source-code-2ohl?1如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3