避免模板代码冗余

Avoiding template code redundancy

本文关键字：代码 冗余      更新时间：2023-09-26

我主要是Web开发和javascript/nodejs/expressjs的初学者，我一直面临着困扰我几个月的某个问题，我找不到既不太复杂也不太混乱的解决方案;在视图中，我有3个帧，在这三帧中，我需要列出一个对象数组，该数组对所有三个具有相同的数据结构，但具有不同的值和在我使用 Jade 的时候，我需要根据 HTML 的值突出显示某些对象，重复相同的链"如果......还。。。案..."三次，我尝试切换到车把/霍根.js并在渲染之前为每个案例添加特定的 HTML 结构过滤数据，但我最终造成了另一个混乱，使得在快速更改视图的视觉效果时变得相当困难和混乱，因为我仍处于应用程序前端的早期开发阶段， 使用胡须（霍根）/车把/玉来完成任务的最简单方法/方法是什么？

我在玉石中遭受的冗余的例子;（如果还有更多...还。。。在原始代码和更大的 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

用灰尘制成.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>

部分/对象中的逻辑;

{@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}

Jade 支持视图部件，请考虑将常用标记拉入其中的一个或多个。

相关文章：