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

我大多是同时从事Web开发和javascript / nodejs / expressjs的初学者，而且我一直面临着困扰我几个月的某个问题，我找不到一个既不太复杂又不太混乱的解决方案;在视图中，我有3帧，在这3帧中，我需要列出一个对象数组，这三个对象的数据结构都相同，但是值不同，我需要根据它们的值突出显示某些对象使用html时，在我使用玉器时，重复相同的“ if ... else ... case ...”链三次，我尝试切换到handlebars / hogan.js并过滤添加在渲染之前针对每种情况使用特定的html结构，但是由于最终仍在应用程序前端的早期开发中，因此我最终创建了另一个烂摊子，在对视图的视觉效果进行快速更改时，这变得相当困难和混乱。使用小胡子（胡根）/把手/玉石完成任务的最简单方法/方法？

我在玉器上遭受过裁员的例子； （在原始代码中还有更多的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

最佳答案

像这样用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>

分部/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}

关于javascript - 避免模​​板代码冗余，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27019425/