Question

我正在使用atomic design的原则为客户设计网站。我正在创造一种可能含有不同分子的生物。我的问题是，这种有机体能否以分子混合物为参数？像这样的东西，例如：

分子1

mixin molecule-1(args)
  .someDiv(class= args.class)
    p= args.text

Molecule2

mixin molecule-2(args)
  .someOtherDiv(class= args.class)
    p= args.text
    a(href='#')= args.linkText

生物

mixin organism(slides)

  include path/to/molecule-1.jade
  include path/to/molecule-2.jade

  .container
    each slide in slides
      slide

网页

include path/to/organism.jade
include path/to/molecule-1.jade
include path/to/organism.jade

+organism({slides:[+molecule-1({class: 'someclass', text: 'sometext'}), 
                   +molecule-2({class: 'someotherclass', text: 'sometext',
                                linkText: 'someLink'})]})

会产生

<div class='container'>
    <div class='someDiv someclass'>
        <p>sometext</p>
    </div>
    <div class='someOtherDiv someotherclass'>
        <p>sometext</p>
        <a href='#'>someLink</a>
    </div>
</div>

或者我必须将每个单独的属性传递给有机体，如下所示：

生物

 mixin organism(slides)

  include path/to/molecule-1.jade
  include path/to/molecule-2.jade

  .container
    each slide in slides
      if slide.type === 'molecule1'
        +molecule-1({class: slide.class, text: slide.text})
      else if slide.type === 'molecule2'
        +molecule-2({class: slide.class, text: slide.text, linkText: slide.linkText})

换句话说，问题是否比后一种做事更优雅？

Answer 1

这就是我的工作。我认为你需要在if中使用organism语句来确定要渲染的分子，以及每个对象中的type属性，但是你可以直接将对象传递给相应的分子混合。

您还可以使用rest arguments syntax（...幻灯片）传递未指定数量的参数。

include path/to/molecule-1.jade
include path/to/molecule-2.jade

mixin organism(...slides)
    .container
        each slide in slides
            if slide.type == "m1"
                +molecule-1(slide)
            else if slide.type == "m2"
                +molecule-2(slide)

+organism({type:"m1", class:"class1", text:"some text"}, {type:"m2", class:"class2", text:"some more text", linkText:"Link"})

如果需要，可以通过将分子对象拆分为变量来使organism调用更具可读性。

- var moleculeObj1 = {type:"m1", class:"class1", text:"some text"};
- var moleculeObj2 = {type:"m2", class:"class2", text:"some more text", linkText:"Link"};

+organism(moleculeObj1, moleculeObj2)

将Jade Mixins作为参数传递给其他Jade Mixins

1 个答案: