通过Javascript或jQuery对HTML进行比较

我试图想出一个纯粹的前端解决scheme，以通常的做法。

在过去，我已经将重用网站元素的HTML（如<nav> ， <header> ， <footer>等）存储在一个functions.php文件中，并使用php函数以多重页面。 这当然可以使整个网站的更改更容易，使我的生活更轻松。

不过，我并不想用PHP（或过去的ASP）来做这件事。 有没有人知道一个干净的方式来做到这一点在JavaScript，jQuery甚至节点？ 为了清楚我想调用一个函数在HTML（如writeNav(); ），拉动导航的HTML。 如果可能的话，我宁愿不在任何地方包含<script>标签。

Answer 1

“build立可在其他地方重复使用的HTML块”的一个非常常见的解决scheme是“模板化”。 有许多模板库可供select（Underscore甚至有它自己的小模板函数），但是我build议首先查看Handlebars.js，因为它非常强大，但也非常简单。

把手模板将允许您存储您的HTML，但是您需要：

• 在.js文件的string中，
• 在你的html页面上的<script type='text/handlebars'>标签中
• 在单独的html文件中被编译到单个JS文件中

它也可以让你换出小块的HTML，这样你就可以（例如）有一个被全部使用的头部，但replace标题，如下所示：

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

Handlebars网站（ http://handlebarsjs.com/ ）有一个很好的贯穿; 我强烈推荐它。

Answer 2

还有像BBEdit这样的文本编辑器，包括支持，如果它只是组织如何编写您的HTML。

Answer 3

我想你在说什么是HTML包括。

这不是一个真正有价值的解决scheme，而是让我通过原型devise阶段。

使用jQuery，将其包含在$（document）.ready（）callback中：

 $(".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，span等）将被title属性中文件path的内容replace。

注意：整个标签将在这个过程中被replace。

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

这个例子很愚蠢，但是我相信这个机制本身就是你想要完成的。

干杯