当使用(仅)模板系统时,我应该如何管理子模板的CSS,javascript等?

时间:2011-11-19 03:33:04

标签: javascript css templates web organization

在过去使用不同语言的不同模板系统时,我遇到了同样的问题,首先,

一般性问题

我想使用子模板来包含某个UI组件,该组件可能出现在许多不同页面上的不同位置。此UI组件需要某些CSS和JS文件。

我想用CSS和JS资源做正确的事情,就我所知和广义而言,这是a)尽可能多地结合b)尽可能地缩小并且可能c)放什么我可以在标记结束时使浏览器在显示内容之前不必等待它们加载。

所以,如果我有各种不同的UI组件,以及站点不同部分的不同标题和侧边栏,这些都需要自己特殊的CSS和JS才能正常运行,这对我来说是最好的管理方式他们通过一个模板系统,以便最终的标记尽可能小,组织得很好?

我的具体情况

我正在开发一个庞大的遗留PHP网站,为了给原作者带来怀疑的好处,开发可能已经在MVC成为真正的主流之前开始,之前有很多选择的框架可供使用。所以没有一致的MVC框架,没有路由,没有模板(也没有ORM,但是特定的诅咒在这里并不相关)。

我将不得不把事情搞清楚,压扁错误并添加一些新功能,直到完全重写可用,所以我试图在我进行的时候为事情注入一些理智。

最简单的起点似乎是视图层,我正在使用TinyButStrong。可以找到他们的子模板的一个示例here,但就像我说的,我认为这是一个非常普遍的问题。

我考虑过的事情

使用更加集成的框架,我希望能够像$view->add_js($foo)这样做,但转换到一个完整的框架是其他人正在做的事情,而我尝试保持现有的代码库适航。甚至没有足够的一致文件组织来手动滚动这样的东西。

目前我能想到的最好的事情就是在视图输出之前将DOMDocument从视图中删除,并在此时操纵<link><script>标记。我不知道这有点疯狂。考虑到问题的普遍性,我想认为有一种明智的方法可以解决这个问题。

非常感谢您的意见。

2 个答案:

答案 0 :(得分:1)

读者很难知道您的代码库可以做什么或不能做什么。处理这种情况的常用方法是将参数传递给视图模板,然后模板可以包含条件块或根据您的参数包含子模板。这不需要一个完整的框架,一个独立的模板引擎应该这样做。如果您的模板引擎支持继承,那么在模板中处理资产有一个很好的模式 - 请在此处查看http://symfony.com/doc/2.0/book/templating.html

对每个处理此类事情的请求操纵Dom似乎有点不正统。

答案 1 :(得分:0)

在这种情况下你想要的是某种形式的模板继承;也就是说,子模板可以访问“父”模板中的区域,并且可以编辑或替换这些区域中的内容的技术。使用此功能,可以将通过子模板包含的组件所需的CSS和JS添加到父页面的<head>元素中。

Twig中,这是使用命名块实现的。首先,您创建父模板(或布局,因为它在Twig中调用),例如, index.html.twig。您在其中包含一个名为{% block myCss %}的块。

接下来,要创建子模板,请使用行{% extends ::index.html.twig %}开始模板。然后,在子模板中定义的块的内容与父模板中的块(在这种情况下为{% block myCSS %})具有相同的名称将被替换为父模板。要附加而不是替换父模板中的内容,请使用{{ parent() }}包含父级中已存在的内容。

@Basel Shishani提供的链接提供example of this with code。我听说Twig是以Django为模型的,而template inheritance in Django看起来非常相似(除了使用{{ block.super }}而不是{{ parent() }}。讨论how to achieve the same ends in TinyButStrong

作为一个更广泛的观点,the Assetic library看起来像是一个非常有前途的管理CSS和JS资产的解决方案,以避免重复(例如,多个组件/子模板需要相同的JS文件),启用连接和资产缩小等等。这个presentation of its features提供了更多详细信息。