Jade/Pug中更清晰的mixin

我正在寻找方法来显式地在Jade/Pug中显示mixin的参数。Jade/Pug中更清晰的mixin

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

// 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')

这样，混入暴露了“API”。这使得对不了解代码的每个内部机制的人来说，可以复制/修改/修改代码。

（我发现这是哈巴狗，一个PHP实现哈巴狗的故事其实implementd - >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 })

来源

2017-05-26 Wolfr

您可以使用一个选项对象来模拟命名参数。您还可以使用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见工作的例子。

来源

2017-05-26 09:22:21 thomastuts

Jade/Pug中更清晰的mixin

回答

相关问题