Question

我正在寻找一种更好的优化解决方案，在Polymer 2.0中有太多的问题。例如，我建立一个表对象，其中每个单元格可以是文本，按钮，链接，对象等。我希望用户能够输入2D数组并让Polymer 2.0对象能够选择要使用的标记。我当前的解决方案（下面）简单有几个if语句，但这意味着每个单元格如果要调用每个语句。有没有更好的方法来解决这个问题？

<template is="dom-if" if="[[matchCellType(cell, 'button')]]">
    <UI-Button id='[[cell.button.ID]]' class$='[[cell.button.class]]'>[[cell.button.text]]</UI-Button>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'object')]]">
    <span class="object-toggle"></span>[[cell.title]]
    <div class="properties">
        <template is="dom-repeat" items="[[getProps(cell)]]">
            <div class="properties_row"><div class="properties_cell"><b>[[item.title]]:</b></div><div style="display: table-cell">[[item.val]]</div></div>
        </template>
    </div>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'link')]]">
    <a target="_blank" href='[[cell.link.href]]'>[[cell.link.text]]</a>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'cell')]]">
    [[cell]]
</template>
<template is="dom-if" if="[[matchCellType(cell, 'textArea')]]">
    <ui-text-area rows="[[cell.textArea.rows]]" cols="[[cell.textArea.cols]]" id='[[cell.textArea.id]]' class$='[[cell.textArea.class]]' text=    [[cell.textArea.text]]></ui-text-area>
</template>

Answer 1

function placeMidPoint(Ax, Ay, Bx, By) { var e = 0; // some small number, if e==0 then you're stopping when A==B if( (Ax - Bx) < e && (Ay - By) < e ) return; var Cx = findMidpoint(Ax, Bx); var Cy = findMidpoint(Ay, By); setPoint(Cx, Cy); placeMidPoint(Ax, Ay, Cx, Cy); placeMidPoint(Cx, Cy, Bx, By); }的大量来电不会造成损失，如果不是昂贵的计算（如果是，你可以更新观察者的财产并测试财产）

将ifs系列分解成一个组件，这样你就不会弄乱你的桌子

作为使用dom-ifs的替代方法，从单元格计算属性或样式类，始终渲染所有元素，并使用CSS仅使匹配元素可见。这会产生更多的DOM元素，但可能仍然更高效，因为浏览器可以非常有效地处理matchCellType或hidden个元素

您可以强制创建和删除节点

，而不是使用多个dom-ifs进行标记

聚合物2.0太多ifs

1 个答案: