1

我正在尝试为常见做法提出一个纯粹的前端解决方案。

过去，我将重复使用的网站元素（如<nav>、<header>、<footer>等）的 HTML 存储在一个functions.php文件中，并使用 php 函数在多个页面上调用这些内容。这当然可以更轻松地在整个站点范围内进行更改，让我的生活更轻松。

但是，我真的不想再使用 PHP（或过去的 ASP）来执行此操作了。有没有人知道在 Javascript、jQuery 甚至 Node 中执行此操作的干净方法？为了清楚起见，我想在 HTML 中调用一个函数（如writeNav();），该函数为导航拉取 HTML。如果可能的话，我宁愿不要<script>在任何地方都包含标签。

4

4 回答 4

3

“建立一个可以在其他地方重用的 HTML 块库”的一个非常常见的解决方案是“模板”。有许多模板库可供选择（Underscore 甚至有自己的小型模板功能），但我建议先查看 Handlebars.js，因为它非常健壮但也非常简单。

Handlebars 模板将允许您根据需要存储 HTML：

  • 在 .js 文件中的字符串中，
  • 在<script type='text/handlebars'>您的 html 页面上的标签中，或
  • 在被编译成单个 JS 文件的单独 html 文件中

它还允许您交换 HTML 的小片段，这样您就可以（例如）拥有一个可以全部使用的标题，但会替换标题，如下所示：

<h3>{{title}}</h3>

Handlebars 网站 ( http://handlebarsjs.com/ ) 运行良好；我强烈推荐它。

于 2012-12-05T22:37:22.680 回答
0

这对于 jQuery 来说是微不足道的，例如

function writeP(str){
    document.write($('<p />').text(str).get(0));
}

然后，您可以执行以下操作：

<div class="foo">
    <script type="text/javascript">writeP('hello');</script>
</div>

...这将导致：

<div class="foo">
    <p>hello</p>
</div>

这个例子很愚蠢，但我相信这个机制符合你想要完成的精神。

干杯

于 2012-12-05T22:27:02.887 回答
0

我认为你在谈论的是 html 包括。

这不是一个真正值得生产的解决方案，但让我完成了原型设计阶段。

使用 jQuery，将其包含在您的 $(document).ready() 回调中：

$(".include").each(function() {
    var inc = $(this);
    $.ajax({
        url : inc.attr("title"),
        dataType : 'html',
        success : function(data) {
        inc.replaceWith(data);
        console.log("adding " + inc.attr("title"));
    });

然后在要包含 html 文件的正文中，执行以下操作：

<div class="include" title="path/to/html/file.html"></div>

具有“include”属性的所有元素（div、spans 等）都将替换为 title 属性中文件路径的内容。

注意：在此过程中将替换整个标签。

于 2012-12-05T22:36:21.303 回答
0

如果只是为了组织你编写 HTML 的方式，还有像 BBEdit 这样的文本编辑器具有包含支持。

于 2012-12-05T22:36:47.190 回答