javascript - 通过 Javascript 或 jQuery 对 HTML 进行比较

Question

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

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

但是，我真的不想再使用 PHP(或过去的 ASP)来执行此操作。有谁知道在 Javascript、jQuery 甚至 Node 中执行此操作的干净方法吗？需要明确的是，我想在 HTML 中调用一个函数(如 writeNav(); )来为导航提取 HTML。我宁愿不包括 <script>如果可能的话，到处都是标签。

Answer 1

“构建可在别处重用的 HTML block 库”的一个非常常见的解决方案是“模板化”。有许多模板库可供选择(Underscore 甚至有自己的小型模板函数)，但我建议首先查看 Handlebars.js，因为它非常强大但也非常简单。

Handlebars 模板将允许您存储您想要的 HTML:

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

它还允许您交换小的 HTML 片段，这样您就可以(例如)拥有一个在所有地方都被使用但替换标题的 header ，如下所示:

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

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