2014-09-21 96 views
0

我正在创建一个从头开始的管理面板,我想知道为了最大限度地减少重复代码(特别是HTML)的需求,我需要使用哪些技术。HTML布局技术(管理面板)

回头我刚刚在每个文件中重写了所有的HTML。虽然这给了单个页面的最终可修改性,但工作量和维护量使其成为最糟糕的方式。

很多年前,我就开始做PHP引入到HTML通过功能,如:

PrintMenu(); 
PrintHeader(); 
PrintLeftBox(); 

虽然这缩短了代码,它使页面的未来变化过于复杂的需求。如果我想更改整个布局并从HTML中删除左侧框,该怎么办?现在我有数百页的PrintLeftBox();

这两个简单的方法几乎是我创造过网站布局的唯一途径。

现在我正在寻找一种更加动态和高效的方式来生成可以在每个页面上进行修改并轻松重做的布局。

我的大部分页面看起来都是一样的;顶部的菜单,中间的巨大内容和底部的页脚。虽然有些网站需要不同的设置,顶部的菜单,左侧的某种导航,中间的项目列表以及右侧的“编辑视图”。

我该如何创建一个可以与看起来不同的页面一起工作的“布局系统”?

我不需要任何代码,我需要有人指向正确的方向。

回答

0

好吧,在我看来,使用PrintMenu()有一百页是一件好事,因为您只需更改该函数的内容即可更新数百页的外观,至少与你确定所有页面都使用菜单。现在也许如果你传递了一个参数,让我们来说一个数组(这样你可以在后面更新它的属性),例如包含页面特征,那么这将会创建一个更加灵活的模型。 或者如果你愿意,你也可以传递一个对象。

pageConfig = new oPageConfig 

PrintMenu (pageConfig); 
PrintHeader (pageConfig); 
PrintLeftBox (pageConfig); 

又路过一个变量,你的职责,你可以选择不(与例如没有菜单的特殊页)显示菜单。

0

使用模板引擎可以在这种情况下相当有益。 只要您喜欢,请选择以下两种解决方案之一。

  1. 在后台,尝试玉(Node.js的),理解(PHP)...

    你可以找到更多在这里:http://en.wikipedia.org/wiki/Comparison_of_web_template_engines;

    MenuHeaderFooter将在不同的文件进行分隔,并且可以在将由模板引擎在服务器部分呈现其他HTML文件包括

  2. 在前端,试试Angular。JS或其他Web MVC框架,

    该解决方案的缺点是,你可能需要花更多的时间在提供稳定的RESTful API,因此,因为所有的渲染工作由Angular.js在客户部分完成。