3

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

我的页面具有使用 HTML、JS、jQuery 代码实现的帐户搜索功能。我的页面由不同地方的帐户搜索组成。（功能同样强大）。每次我们使用它时，只有 div 的 ID 会发生变化。

那么我们可以在 HTML 中想出一种组件吗？

同样，将代码编写在单独的文件中并包含在不同的位置将不会起作用，因为每个区域的 ID 都会发生变化。当我们调用服务器、获取数据和更新字段等时，ID 很重要。

4

7 回答 7

6

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

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

于 2013-05-01T22:50:14.140 回答
3

HTML 是一种标记语言，而不是一种编程语言。您很可能正在寻找像haml这样的模板引擎

于 2013-05-01T22:41:50.813 回答
2

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

胡子

车把

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

于 2013-11-21T06:41:38.197 回答
1

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

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

然后在每个要使用此组件的 html 页面中，您只需执行以下操作：

<element-name></element-name>
于 2014-09-19T15:04:27.720 回答
1

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

于 2014-09-19T15:11:34.523 回答
0

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

bootstrap 使用类来做到这一点，并且数据属性也可以用于更精确的控制。

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

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

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

一旦你能做到这一点，你所需要的只是一种定义它们的简单方法。让我们以“widget-search”类为例。将类添加到包中需要搜索功能的任何 html 元素。

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

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

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

如果您不在 body 标记的底部注入，您需要将最后一位放在 ready() 或 onload() 事件中。

这就是您只需向 HTML 添加一个类即可启用任何输入以具有演示“搜索”功能所需要做的一切，而不是添加每行所需的 CSS 或 JS。它使您可以从一个位置修补或升级站点上的每一个，它减少了通过网络传输的自定义代码的数量，使页面加载速度比手工装订甚至模板化更快。

于 2013-05-01T23:57:15.447 回答
0

请参阅此博客文章。它使用 Handlebar.js 详细阐述了“如何创建可重用的组件”。绝对值得一读。

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

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

jsFiddle为此

于 2013-09-21T05:50:13.797 回答