javascript - 可重用的 html 代码块

Question

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

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

Answer 1

大多数 JS UI 框架通过完全在 JS 中创建它们来提供它们的 UI 组件。这可能是您最好的选择，因为它独立于您的服务器端框架（您可以将它与 ruby​​、php、.net 一起使用）并且它可以保持您的 HTML 干净。

对于您的带有按钮的列表示例，您将从在标准 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'});

或类似的东西