javascript - 避免模​​板代码冗余

Question

我主要是网络开发和 javascript/nodejs/expressjs 的初学者，我一直面临着一个困扰我几个月的问题，我找不到一个不太复杂的解决方案或太杂乱；在 View 中，我有 3 个框架，在这三个框架中，我需要列出一个对象数组，所有三个框架具有相同的数据结构，但具有不同的值，并且我需要根据其值突出显示某些对象使用html，当时我使用jade，重复“if ... else ... case ...”的相同链三次，我尝试切换到handlebars/hogan.js并过滤数据添加在渲染之前每种情况都有特定的 html 结构，但我最终创建了另一个困惑，使得在快速更改 View 的视觉效果时变得相当困难和困惑，因为我仍处于应用程序前端的早期开发阶段，这会是什么使用 Mustache(hogan)/handlebars/jade 完成任务的最简单方法/方法？

我在 Jade 方面遇到的冗余的例子； (原始代码中有更多的 if...else... 以及更大的 html 结构)

div(class='frame red'
    for object in array
        if object.annex
            case object.annex.type
                when 1
                    i object.annex.text
                when 2
                    b object.annex.text
                when 3
                    span(class='normal') object.annex.text
        else
            case object.type
                when 1
                    i object.text
                when 2
                    b object.text
                when 3
                    span(class='normal') object.text

div(class='frame blue')
    for object in array
        if object.annex
            case object.annex.type
                when 1
                    i object.annex.text
                when 2
                    b object.annex.text
                when 3
                    span(class='normal') object.annex.text
        else
            case object.type
                when 1
                    i object.text
                when 2
                    b object.text
                when 3
                    span(class='normal') object.text

Answer 1

用dust.js做的，这样调用它；

<div class='frame red'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

<div class='frame blue'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

partials/object.dust 中的逻辑；

{@select key=type}

  {@eq value=1}
    <i>{text}</i>
  [/eq}

  {@eq value=2}
    <b>{text}</b>
  {/eq}

  {@default} // when type is null
    <span>{text}{?isAnnex}, annex.{/isAnnex}</span>
  {/default}

{/select}