如何构建HTML以实现良好的代码重用和维护?

时间:2014-01-21 07:59:37

标签: html html5 code-reuse maintenance

我在使用C ++,C和Java等语言编写原生应用程序方面的背景有限,但现在我正在努力进入Web开发。虽然大部分都非常简单和干净,但我在理解如何创建网站和网络应用程序方面遇到了一些问题,这些网站和网络应用程序可以在适用的情况下重用现有代码。据我所知,当使用JavaScript,CSS和PHP之类的东西时,你可以简单地从其他文件中导入脚本以用于任何html文件,这非常有用。但我很难弄清楚如何用HTML完成这项工作,是否可能?

例如,假设我有一个带有标题栏的单页网站'以及下面的一堆独特内容(例如,stackoverflow徽标,按钮和本页顶部的菜单)。但是现在,我想扩展我的网站并添加3个共享相似布局的新页面,并且具有完全相同的标题栏'在顶部。实现此目的的一种方法可能是简单地复制包含该部分代码的内容并将其粘贴到page2.html,page3.html和page4.html中;每个页面的唯一代码是独立的,它可以正常工作。我对这种方法的问题在于,改变标题栏的内容会让人感到非常痛苦。没有经过多页HTML,并且设计/内容中创建奇怪的不一致的可能性变得很高。我猜这个" stackoverflow.com/questions/ask"和" stackoverflow.com/tags"不要在页面顶部包含元素的重复,复制和粘贴代码,但由于我的HTML体验有限,我不知道如何实现这一点。

那么,是否有某种方式包括"包括"或"导入" HTML代码是为了跨多个页面清理代码重用?这个功能是内置到HTML中还是我需要更深入地研究JavaScript和PHP之类的东西来创建结构良好的网站?我已经找到了答案,有几个人建议使用iframe,但几乎立即建议不要在现代网页设计中使用iframe。这可能是一个好方法吗?

6 个答案:

答案 0 :(得分:7)

现在可以使用代码片段,但它缺少适当的browser support。它被称为html-templates。将来,这将允许您创建自己的html模板,以避免重复代码。但是现在..不是原生HTML,只有其他技术(基于PHP,基于Javascript,基于Ruby和不基于什么)。

答案 1 :(得分:6)

我通常为HTML做的是制作基本网站布局,就像你想要自动加载大多数内容一样。首先,我将创建所有包含内容的div然后用你想要的内容填充它,比如你的标题,添加一个标志,一些欢迎文本导航栏等等。然后我会删除标题div中的所有内容并将其粘贴到标题中html的。

现在我将使用JQuery,一个javascript插件将header.html中的所有HTML数据加载到标题div中。它的JQuery代码看起来像这样,抱歉它已经有一段时间了,现在无法访问工具。

$(document).ready(function(){
   $('#header').load("header.html");
});

对于PHP,您可以编写函数文件并: include "functions.php"; PHP也支持OOP,你可以在其中创建可重用的类和方法。

答案 2 :(得分:5)

如果您碰巧使用Dreamweaver,那么它就有一个HTML模板系统,而​​不需要特定的服务器端语言。

否则它听起来像(并且为了保持简单而不使用CMS或完整模板系统,如Smarty),您希望使用PHP将固定块包含在您的代码中,例如站点范围的标题和放大器。页脚。

例如,在您网站中每个文件的顶部,您可以使用以下PHP代码在该位置插入文件header.php:

<?php  include "header.php"; ?>

希望这有助于作为起点:)

答案 3 :(得分:4)

为了重用代码,您必须使用PHP或JavaScript框架。

我建议使用后者,特别是http://angularjs.org/,这很棒。使用可以重用代码的视图(和其他组件)来构建Web应用程序。

值得一试,你的背景不应该有任何问题。

干杯。

答案 4 :(得分:2)

我建议'谷歌'代表'HTML最佳实践'并且 尝试一些结果,如:http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

答案 5 :(得分:0)

有很多方法可以做到这一点。将CSS和Java-Script代码放入中心文件中,您在HTML文件中引用这是一个良好的开端。

过去我使用PHP来包含常见内容,例如标题,导航,页脚等。

最近我开始使用Jekyll(http://jekyllrb.com/),基本上你是为页面创建模板,在中央文件中有标题,导航和设计。

页面本身只包含内容,而Jekyll会从中生成主页。

安迪