[英]Clearer mixins in Jade/Pug
我正在寻找在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')
这样mixin暴露了“API”。 这使得复制/可管理/可修改的代码适用于不了解代码的每个内部机制的人。
(我发现这实际上是在哈巴狗的故事中实现的,pug的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 })
您可以使用options对象来模拟命名参数。 您还可以使用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' })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.