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

时间:2013-02-04 18:01:58

标签: javascript html css partials

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

1 个答案:

答案 0 :(得分:2)

我知道两种不同的方法:

<强> 1。使用Ajax

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

JQuery&#39; load可以执行$('#header').load('header-partial.html');

之类的操作

如果您正在使用大量视图等构建更复杂的东西......我会考虑使用像Backbone.js或AngularJS这样的MV * javascript框架。

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

<强> 2。使用构建脚本

如果您的网站足够简单,您想要做的就是在每个页面上都包含页眉和页脚,那么您应该考虑将此作为部署过程中的构建步骤。 I.E.在本地压缩你的html与部分,并上传整页,每个html页面上都有页眉/页脚代码。

如果禁用js,此方法的好处是不会破坏您的网站。

例如,请查看html5boilerplate&#39; s ant build script