Jade/Pug 中的混入更清晰

Question

我正在寻找在 Jade/Pug 中显式显示混入参数的方法。

下面是一些伪代码来说明我的意思：

// Current situation
+c-button('Button label', 'overstated', 'large')

// Here we can see what the mixin expects
+c-button(btnLabel: 'Button label', btnType: 'overstated', btnSize: 'large')

通过这种方式，mixin 公开了 "API"。这使得 copy/pastable/modifiable 代码适合那些不理解代码的每个内部机制的人。

（我发现这实际上是在哈巴狗的故事中实现的，哈巴狗的 PHP 实现 --> https://sandbox.pug.talesoft.codes/?example=named-mixin-parameters）

我追求的是清晰易读的混入。只要最终结果易于使用，我不关心它是如何实现的。

另一个想法是将单个选项对象添加到 mixin。

现在，我编写的这段代码根本不起作用。正在寻找 Javascript 专家来阐明这里 :)

mixin c-button({options})
    - { 
         [
           option1: true
         ]
      }
    a.c-button(href="#") #{btnLabel}

// Code does not actually work because mixins can't take objects?
+c-button({ option1: false })

Answer 1

您可以使用选项对象来模拟命名参数。您还可以使用 Object.assign() 将选项与预定义选项对象合并以模拟选项默认值：

mixin button (options)
  - var DEFAULT_OPTIONS = { type: 'button', variant: 'default' };
  - options = Object.assign({}, DEFAULT_OPTIONS, options || {});
  button(class='btn--' + options.variant, type=options.type)= options.label

+button({ label: 'foo' })

在 https://codepen.io/thomastuts/pen/JNVWYX 查看工作示例。

Jade/Pug 中的混入更清晰

Clearer mixins in Jade/Pug

javascript

mixins

pug