Question

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

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

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

同样，将代码写入单独的文件并包含在不同的位置不会在每个区域更改ID。当我们调用服务器，获取数据和更新字段等时，ID很重要。

Answer 1

查看javascript模板。有关示例，请参阅mustache.js。

e.g。

<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>

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

Answer 2

HTML是一种标记语言，而不是编程语言。您很可能正在寻找像template engine

这样的haml

Answer 3

以下框架有助于解决问题：

Mustache

HandleBars

我更喜欢使用HandleBar（写在Mustache之上）。

Answer 4

如果您使用angularJS，您可以通过为您的组件创建一个单独的html文件然后将其作为元素调用到您的页面来创建可重用的html片段。

app.directive("elementName", function() {
  return {
    restrict: 'E',
    templateUrl: "/Path/To/Html.file"
  };
});

然后，在每个html页面中，您只想执行以下操作：

<element-name></element-name>

Answer 5

实际上也许你可以使用单独的js文件，实现只需要接收（可能在构造函数中，或者如果不是类，则查找特定的html标记）并在需要时使用所需的信息。

Answer 6

我喜欢一个好的模板引擎，但您可以使用简单的标记将您的逻辑与html控件分离。

bootstrap使用类来完成此操作，数据属性也可以用于更精确的控制。

你需要稍微清理你的代码;收集您需要的所有代码，并将所有refs分离到任何给定的id。通常，这并不困难，因为您只有一个或两个使用id的位置，使用变量执行其余操作。

将所有代码包装成一个函数，该函数为其唯一的参数提供元素;这是以前硬编码的id。将代码中使用的任何ID移动到类或更好的变量。更改css以反映窗口小部件类的这些类和/或后代（更快）。此时，您应该能够调用该函数并传递一个元素，并让它工作。我们称之为makeSearchFromElement（）。

function makeSearchFromElement(elm){
  elm.onchange=function(e){ alert("searching for " + elm.value); };
}

一旦你能做到这一点，你只需要一个简单的方法来定义它们。让我们使用一组＆＃34; widget-search＆＃34;举个例子。将类添加到任何需要包中搜索功能的html元素。

<input class='search widget-search validation' id=search123 type=search />

现在，您所要做的就是在HTML中找到所有已声明的小部件，并将它们发送到站点范围内JS文件中的小部件制造商：

[].slice
  .call(document.getElementsByClassName("widget-search"))
  .map(makeSearchFromElement);

如果你没有注入body标签的底部，你会想要将最后一位放在ready（）或onload（）事件中。

您只需启用任何输入即可进行演示＆＃34;搜索＆＃34;只需在HTML中添加一个类，而不是添加每个类所需的一行CSS或JS。它允许您从一个位置修补或升级站点上的每个站点，它减少了通过线路传输的自定义代码的数量，使得页面加载比手动绑定甚至模板化更快。

Answer 7

请参阅此blog post。它使用Handlebar.js详细说明了“如何创建可重用的组件”。绝对值得一读。

以下代码足以在您的应用中添加datetimepicker。

{{datetime "d1" "Start Date"}}

jsFiddle for this

自定义或可重用的HTML组件

7 个答案: