自定义或可重用的HTML组件

Question

我们可以用HTML创建自定义或可重用的组件吗？

我的页面具有帐户搜索功能,使用HTML,JS,jQuery代码实现.我的页面包括不同地方的帐户搜索.(功能同样艰难).每次使用时,只有div的ID会发生变化.

那么我们可以在HTML中提出一些组件吗？

同样,在单独的文件中编写代码并包括在不同的位置不会在每个区域更改ID.我们调用服务器,获取数据和更新字段等ID很重要.

Answer 1

查看javascript模板.有关一个示例,请参阅mustache.js.

例如

<script type="text/template" id="template">
   {{#elements}}
      <div id="{{id}}">
         {{content}}
      </div>
   {{/elements}}
</script>

你的JavaScript:

var view = {
   "elements": 
    [
       {
          id: "one",
          content: "Lorem ipsum dolor"
       },
       {
          id: "two",
          content: "Sit amet consectetur"
       }
    ]
}

var template = document.getElementById("template").innerHTML;
var output = Mustache.render(template, view);
console.log(output);

日志:

<div id="one">
   Lorem ipsum dolor
</div>
<div id="two">
   Sit amet consectetur
</div>

您可以遍历对象,评估函数并将其作为文本插入.