Jade/Pug中更清晰的mixin

Question

我正在尋找方法來顯式地在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 }) 

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見工作的例子。