仅使用客户端技术重用 HTML 代码答案

【问题标题】：Reusing HTML code with only client side technologies仅使用客户端技术重用 HTML 代码
【发布时间】：2013-01-19 12:01:53
【问题描述】：

我的任务是仅使用 HTML、CSS 和 JavaScript 等客户端技术创建网站。我们不能使用任何服务器端技术，因为讲师懒得安装任何东西，并且不允许我们使用诸如 Heroku 之类的东西进行部署。有没有办法我可以做到这一点？特别是，我想为导航和页脚创建部分内容，而不必将它们复制并粘贴到每个文件中。

【问题讨论】：

标签： javascript html css partials

【解决方案1】：

我知道两种不同的方法：

1.使用 Ajax

您可以使用 ajax 来执行此操作 - 可能借助 JavaScript 库或框架。

JQuery 的load 可以做$('#header').load('header-partial.html'); 之类的事情

如果您要构建包含大量视图等的更复杂的东西...我会考虑使用 MV* javascript 框架，例如 Backbone.js 或 AngularJS。

查看 GitHub 上的 AngularJS seed project 以获取示例

2。使用构建脚本

如果您的网站足够简单，您只想在每个页面上包含页眉和页脚，那么您应该考虑将此作为部署过程中的构建步骤。 IE。在本地编译您的 html，并在每个 html 页面上使用页眉/页脚代码上传完整页面。

如果 js 被禁用，这种方法的好处是不会破坏您的网站。

例如，查看 html5boilerplate 的 ant build script

【讨论】：

我会尝试寻找一些 ajax 示例，因为 AngularJS 不是一个选项。它需要 node.js，这也需要安装。谢谢
如果没有服务器端组件，您将如何使用 AJAX？ AJAX 需要向服务器脚本发送请求。
它不需要 node.js - 它只是前端技术。 Node 仅用于集成其测试框架。学习这样的东西将是大量的工作，所以也许直接的ajax方法会很好（我个人会使用JQuery）
@Barmar rly？你不能只用JQuery's load 来做$('#header').load('header-partial.html'); 之类的事情吗？
@AntarrByrd 有趣的是我一年后才意识到这一点，但你说 AngularJS 需要 node.js。它没有。它完全是客户端 js。在使用 Angular 时使用 node.js 构建相关工具很常见，但这一切都只是在开发中。生成的 html/css/js 以与任何“普通”前端项目相同的方式部署。