2017-05-26 26 views
3

Ich suche nach Möglichkeiten, die Argumente eines Mixins explizit in Jade/Pug anzuzeigen.Klarere Mixins in Jade/Pug

Hier einige Pseudo-Code zu veranschaulichen, was ich meine:

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

diese Weise wird die mixin die "API" aussetzt. Dies macht kopierten/versetzbaren/modifizierbaren Code für Leute, die nicht jeden inneren Mechanismus des Codes verstehen.

(fand ich heraus, die eigentlich in Geschichten von Mops, eine PHP-Implementierung von Mops implementd ist ->https://sandbox.pug.talesoft.codes/?example=named-mixin-parameters)

Was ich bin nach lesbar Mixins ist. Es ist mir egal, wie es implementiert wird, solange das Endergebnis einfach zu verwenden ist.

Eine andere Idee besteht darin, ein einzelnes Optionsobjekt zu einem Mixin hinzuzufügen.

Jetzt funktioniert dieser Code, den ich erfunden habe, überhaupt nicht. Suchen Sie nach einem Javascript-Experten, um etwas Licht hier zu werfen :)

Antwort

3

Sie können ein Optionen-Objekt verwenden, um benannte Argumente zu simulieren. Sie können auch Object.assign() verwenden, um die Optionen zu fusionieren mit einer vordefinierten Optionen Option Standardwerte zu simulieren Objekt:

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

ein funktionierendes Beispiel bei https://codepen.io/thomastuts/pen/JNVWYX See.