Question

我一直很惊讶没有发现任何问题：

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

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

我的想法是为几个HTML页面设置一个公共标题，我不想重复代码。当然，我想做一些包括，但是如何？

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

有什么想法吗？

Answer 1

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

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

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

希望这有帮助！

Answer 2

是的，我想要使用JS的静态HTML页面客户端。你如何实现这样的“下载”？

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

<强> HTML ：

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

<强>的JavaScript ：

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

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

与您的下载请求一起发送的参数，例如，如果您没有将HTML存储为文件，而是从某种Web服务（如您所提到的用Java编写）中获取它
和回调（下载完成后执行的功能）：）

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

修改

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

Answer 3

我会谨慎使用Javascript（或任何客户端技术）来加载网页的重要元素。出于安全原因，一些用户在禁用Javascript的情况下浏览网页，或者在非常慢的互联网上（例如远离城市中心并通过卫星上网的人）改善加载时间。如果您使用Javascript加载导航菜单等元素，则这些用户根本无法浏览您的网站！

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

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

如果您的服务器运行Java，您甚至可以非常轻松地自动执行编译过程。我通过将Jade代码推送到github来自动化我的编译过程...我有一个TravisCI挂钩，可以自动检测更改，编译它们，并通过ftp将结果推送到我的Web服务器。这个过程对我来说是完全不干涉的，所以就我而言，我只看到了我漂亮的漂亮分解的Jade代码。

Answer 4

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

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

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

4 个答案: