Question

我有几个html组件，我用一些javascript定制。例如，我有一个列表，其中包含一个按钮，用于添加和删除列表中的项目。我希望能够重用这些组件，但我不确定最好的方法（这个特定的项目是Spring MVC）。

我考虑过的选项是可以包含在其他页面或自定义标签中的jsp片段。是否存在不需要使用服务器的替代方案（例如标签处理）。如果我只是将一些html / javascript片段一起使用，似乎应该有一种简单的方法来使它们模块化。

Answer 1

大多数JS UI框架通过在JS中完全创建它们来提供UI组件。这可能是你最好的选择，因为它独立于你的服务器端frameowork（你可以使用它与ruby，php，.net），它可以保持你的HTML清洁。

对于列表w /按钮示例，您将从标准HTML对象上调用的JS函数中呈现列表和按钮。在您的情况下，如果您使用MVC框架将数据写入列表，您可以选择继续这样做并编写JS创建逻辑以接受列表作为输入，然后呈现您的高级样式和UI（如按钮））周围。这使您仍然可以正常接受来自服务器端的数据，并为您的HTML代码提供与最终产品类似的外观（它只是缺少添加/删除按钮），但允许您重复使用HTML / JS逻辑尽可能。

如果您当前的代码如下所示：

<div class="addremovelist">
    <select>
        <option>blah</option>
        <option>blah</option>
        <option>blah</option>
    </select>
    <div class="addremovebuttons">
        <input type="button" value="Add" />
        <input type="button" value="Add All" />
        <input type="button" value="Remove" />
        <input type="button" value="Remove All" />
    </div>
<div>

你现在可以这样写：

<select id="myselect">
    <option>blah</option>
    <option>blah</option>
    <option>blah</option>
</select>

在窗口加载事件中使用以下javascript：

$('#myselect').addRemoveList({myoptions: 'ifnecessary'});

或类似的东西

可重复使用的html代码块

1 个答案: