ZK 教學 - 常見錯誤用法 03 - 過度使用複雜元件

每個 ZK 元件都會在瀏覽器產生對應的 HTML element ，有些很複雜、有些較簡單，當然越複雜的 HTML 對瀏覽器記憶體、效能的負擔就越大。所以沒有必要時，不要選擇成本較高的元件。

例如只是要把某一群元件包在一個區域，也許要插入新元件或是整群處理時，可以用 <div> 就好，而不要用 <window> 。

如果只是要將多個元件水平排列，而並不需要控制其對齊位置的時候，則應該使用 <hlayout>即可，而不需要用 <hbox>。同樣的道理，簡單的垂直排列需求可以用 <vlayout> 完成而不需用 <vbox>。

以一個內含兩個元件的 <hbox> 為例：

    <hbox>
        <div>hbox</div>
        <div>hbox</div>
    </hbox>

其所產生的 HTML 如下：

<table id="zFLQ5" class="z-hbox" cellpadding="0" cellspacing="0"
    border="0">
    <tbody>
        <tr valign="top">
            <td id="zFLQ5-frame" style="width:100%;height:100%"
                align="left">
                <table id="zFLQ5-real" height="100%" cellpadding="0"
                    cellspacing="0" border="0" style="text-align:left">
                    <tbody>
                        <tr valign="top">
                            <td id="zFLQ6-chdex" style="height:100%">
                                <div id="zFLQ6" class="z-div">
                                    <span id="zFLQ7" class="z-label">
                                        hbox
                                    </span>
                                </div>
                            </td>
                            <td id="zFLQ6-chdex2"
                                class="z-hbox-separator">
                                <img style="height:0;width:0"></td>
                            <td id="zFLQ8-chdex" style="height:100%">
                                <div id="zFLQ8" class="z-div">
                                    <span id="zFLQ9" class="z-label">
                                        hbox
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

若是以一個同樣內含兩個元件的 <hlayout> 來比較如：

    <hlayout>
        <div>hlayout</div>
        <div>hlayout</div>
    </hlayout>

其所產生的 HTML 就小很多：

<div id="zFLQ0" class="z-hlayout">
    <div id="zFLQ1-chdex" class="z-hlayout-inner"
        style="padding-right:5px">
        <div id="zFLQ1" class="z-div">
            <span id="zFLQ2" class="z-label">hlayout</span>
        </div>
    </div>
    <div id="zFLQ3-chdex" class="z-hlayout-inner" style="">
        <div id="zFLQ3" class="z-div">
            <span id="zFLQ4" class="z-label">hlayout</span>
        </div>
    </div>
</div>