通过 Javascript 或 jQuery 区分 HTML答案

【问题标题】：Comparmentalize HTML via Javascript or jQuery通过 Javascript 或 jQuery 区分 HTML
【发布时间】：2012-12-06 07:22:08
【问题描述】：

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

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

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

【问题讨论】：

为什么要依赖客户端呢？如果您计划对每个元素进行 AJAX 调用，则加载每个页面的请求量会大大增加，并且对于互联网连接不良、移动设备或计算机速度慢的人来说，您的网站可能会加载缓慢。至少要确保您的网站正常降级。
是的，我想这是真的。与 AJAX 调用实际上并没有多大关系——内容总是相同的，并且不依赖于数据库。我只是想划分代码以使网站更容易扩展并且更改更加本地化（只需更改一页即可更改所有类型的导航）
现在实际上在这方面有一些来回，因为 ajax 和 JS 通常比以前快得多。我仍然倾向于减少请求负载，因为在移动设备中过多的来回仍然是残酷的，但简单的 ajax 请求将被缓存在浏览器中。
I don't really want to use PHP。为什么不？服务器端解决方案更加健壮，并且总是优于在客户端完成的相同功能，更不用说更可靠和健壮了。停止思考“我想要”，而更多地思考“什么是交付访问者想要的最佳方式”。在绝大多数情况下，这是一个快速、稳定的网站，可以提供有用的信息。

标签： javascript jquery html node.js

【解决方案1】：

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

Handlebars 模板可让您随心所欲地存储 HTML：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我认为你在谈论的是 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属性中文件路径的内容。

注意：在这个过程中会替换整个标签。

【讨论】：

请注意，如果您将此选项添加到您的$.ajax，则可以删除var inc = $(this)：context: $(this) 现在您只需执行this.replaceWith(data)

【解决方案4】：

这对于 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>

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

干杯

【讨论】：

-1 — 使用 jQuery 并不能让使用现有页面内容将现有页面内容替换为 document.write 变得更加明智。
@RobG 嗯？ Op 说，“要清楚，我想在 HTML 中调用一个函数（如 writeNav(); ），它为 p 拉取 HTML”。我的示例类似，调用 writeP('hello') 并“为导航拉取 HTML”。我从他的问题中推断，他也想把它写到文档中。