如何在没有PHP的情况下分解HTML代码

How to factorize HTML code without PHP?

本文关键字：情况下 分解 HTML 代码 PHP      更新时间：2023-09-26

我真的很惊讶没有发现任何关于的问题

如何在不使用php的情况下分解HTML5代码，只使用HTML5和JS？

我想创建一个带有Java编码服务器的个人项目，然后是一个HTML/JS客户端和一个Android客户端。

我的想法是为几个HTML页面提供一个通用的标题，并且我不想重复代码。当然，我想做一个包含，但怎么做呢？

也许我应该使用服务器端的页面生成器，比如Node.js或类似的东西。但我更希望我的项目尽可能简单。

知道吗？

是的，我想在客户端。你是如何实现这种"下载"的？

基本上，您只需要获得包含HTML标记的页面文件。最简单的方法可能是使用jQuery.load方法：

HTML：

<header id="my-header"></header>

JavaScript：

$(function() {
    $('#my-header').load('url-to-your-html-file'); 
});

在load方法中，您还可以指定：

  • 要随下载请求一起发送的参数，例如，如果您没有将HTML存储为文件，而是从某种web服务（如您所述，是用Java编写的）获得HTML
  • 和回调（下载完成后执行的函数）：）

看看这把小提琴：http://jsfiddle.net/michasko/Lvf974pm/

编辑

您还可以使用其他jQuery方法，如ajax，在其中您可以指定应该缓存响应数据（静态HTML将只下载一次）。

我实际上在我当前的项目中做到了这一点，为每次页面加载节省8kb的带宽（考虑到这是一个每天有数百万页面加载的游戏，这加起来真的很快！）

基本上，获取所有不变的HTML并将其转储到JavaScript文件的字符串中。然后你可以在HTML中有<div id="header"></div>，并进行document.getElementById('header').innerHTML = "massive string of HTML here";

这意味着当JS文件被下载时，它只下载一次，然后每次都从缓存中重用。通过在#header元素上设置data-*属性来定义一些可变内容，您甚至可以变得更聪明。

希望这能有所帮助！

我会小心使用Javascript（或任何客户端技术）加载网页的重要元素。一些用户出于安全原因或为了提高在速度非常慢的互联网上的加载时间，在禁用Javascript的情况下浏览网络（比如那些远离城市中心并通过卫星上网的人）。如果你使用Javascript加载导航菜单等元素，这些用户将根本无法导航你的网站！

我在我的网站上一直在做的一项技术是使用HTML预处理器（如Jade）。这有点妥协。我在组件中编写代码，但在将其部署到服务器之前，我必须编译该项目，该项目将所有组件组合到每页一个HTML文件中。与PHP这样的服务器端脚本相比，我仍然更喜欢这样，因为它减少了加载时间（PHP必须在每次加载页面时执行，并增加HTTP请求的数量，这只是一种一次性编译技术）。这也是一种比用Javascript加载更灵活的因式分解技术。。。您可以加载一个"模板"，但加载时要使用某些变量（例如页面标题或当前页面，以便可以适当地设置导航菜单的样式）。另一个优点是，Jade编写起来比HTML愉快得多。

我使用SASS为我的CSS做了类似的事情。

如果您的服务器运行的是Java，您甚至可以很容易地实现编译过程的自动化。我通过将Jade代码推送到github来自动化我的编译过程。。。我有一个TravisCI钩子，它可以自动检测更改，编译它们，并通过ftp将结果推送到我的web服务器。这个过程对我来说完全是放手不管的，所以就我而言，我只看到过我漂亮的、因子分解的Jade代码。

我找到了另一个潜在的解决方案。由于我想在客户端使用JS框架，我想我可以使用RactiveJS、EmberJS、AngularJS等提供的模板。

这些框架建议定义可以一个嵌套在另一个中的HTML模板。我必须走得更远，但这看起来很有希望。

相关文章：