php模板系统-为模板加载默认Javascript行为的正确方法_Php_Javascript_Template Engine

php模板系统-为模板加载默认Javascript行为的正确方法

php javascript

php模板系统-为模板加载默认Javascript行为的正确方法,php,javascript,template-engine,Php,Javascript,Template Engine,情况：负责构建HTML页面的PHP模板系统 Javascript核心函数都在外部文件中每个模板都有一些默认的Javascript函数，需要根据每个模板调用这些函数当呈现页面时，我接下来需要调用一组Javascript函数：即 <script type="text/javascript"> $(document).ready(function{ API.loadThis(); // all these Javascript functions are

情况：

负责构建HTML页面的PHP模板系统

Javascript核心函数都在外部文件中

每个模板都有一些默认的Javascript函数，需要根据每个模板调用这些函数

当呈现页面时，我接下来需要调用一组Javascript函数：即

<script type="text/javascript">
     $(document).ready(function{
         API.loadThis();  // all these Javascript functions are in an external JS file
         API.loadThat();
         API.buildDateSelector("#idForSelector");
         // etc
    });
</script>


$（文档）.ready（函数）{
API.loadThis（）；//所有这些Javascript函数都位于外部JS文件中
API.loadThat（）；
API.buildDateSelector（“idForSelector”）；
//等
});

到目前为止，我只是将其作为文本附加到每个HTML模板中。但是，如果一个页面由多个较小的模板组成（每个模板都可能包含自己的初始化Javascript），那么我的页面上就会出现大量的内联Javascript

我的问题是:

我应该如何正确地组织一切，以便在页面加载时可以轻松地“注册”或“触发”一些默认Javascript

或者将每个Javascript块附加到每个模板（如上所述）是否合适

有很多方法可以做到这一点。我建议你买一些开源框架，看看它们是如何运作的，然后决定你的偏好。有些技术被认为是“最佳实践”，但许多框架的结构归结为开发人员的偏好

我有一个用于我自己项目的框架，类似于您所描述的，每个较小的模板都被称为“组件”。每个组件都可以使用

addJS（）

方法向自身添加任意数量的javascript，css和html也是如此。顶级控制器循环浏览给定页面的内容（就组件而言）。这让我有机会提前加载所有css、javascript和html。然后，我可以按照我认为合适的顺序输出它们

因此：

页面控制器处理请求
- 初始化一个或多个组件
  - 组件
```
load
```
    方法填充html、javascript和css类属性（文件名数组、html字符串）为自己
  - 组件有自己的一组模板，js、css
- 输出站点范围的模板
  - 包括页面标题中的所有组件css
- 迭代组件，输出组件html和布局内容
- 输出页面页脚的组件JS

我有一个

组件

文件夹，其中包含每个组件的文件夹。每个组件文件夹中都有一个php文件（该组件的处理程序），可以选择一个或多个css/js文件。这使一切井然有序。

我会做的与@Chris非常相似。但是，我建议做一些小的改动：

向

addJS

函数添加一个参数，该参数指示页面上的位置。默认情况下，您应该至少支持

头部

和

脚

（

头部

将其放置在头部，

脚

将其放置在关闭之前）

然后，在模板中包含标记以指示位置：

    {{js_head}}
</head>
<body>
    <!--content here-->
    {{js_foot}}
</body>

然后，在模板代码中，只需执行以下操作：

$replace = $this->buildJSCache('head');
if ($replace) {        
    $replace = '<script type="text/javascript" src="'.$filename.'"></script>';
}
$template = str_replace('{{js_head}}', $replace, $template);

$replace=$this->buildJSCache（'head'）；
如果（$替换）{
$replace=''；
}
$template=str_replace（{{js_head}}}'，$replace，$template）；

您可以为用户获得可维护性和速度的双赢（如果需要，您甚至可以缩小它）

注意：所有这些代码都只是演示，如果您要在生产中使用它，我会将其清理干净并进一步思考

这至少是我的0.02美元

另外，如果不清楚我在问什么，请告诉我，我可以添加更具体的信息。感谢我们的产品，我们有一些类似的东西，我们这样做，有{tpl_name}_js_bottom.tpl，如果在呈现template.Nice时存在，就会加载它。这就是我的想法。该页面有一个JS onload函数/代码数组，在呈现该页面时，所有函数/代码都会被回显。您还正确地检查了许多其他模板引擎。我觉得在发布之前我应该在一个较低的层次上这样做：PA注意：你想要的不是模板引擎，而是应用程序框架。这是使用模板引擎的代码部分-决定何时呈现内容、如何处理输出等的代码。模板引擎只涉及生成HTML。所以，当你去购物时，寻找框架并观察它们使用的模板引擎。很有趣，谢谢。我并没有真的这样想，但我只是把所有的东西都归为一个“模板引擎”heheNor I，我希望他们至少能提供一个解释。：-/嗯，我给你+1。谢谢我也喜欢指定插入内联JS的位置的想法。很有趣。我得坐下来好好想想

$js = $this->js;
$positions = preg_replace_callback(
    '/{{js_(inline_)?([a-zA-Z0-9]+)}}/', 
    function ($match) use ($js) {
        if (isset($js[$match[2]])) {
            $js = implode("\n", $js[$match[2]]);
            if ($match[1] == 'inline') {
                return $js;
            } else {
                return '<script type="text/javascript">'.$js.'</script>';
        }
        return '';
    },
    $templateBody
);

$this->addJS('return this.form.submit();', 'submit_form');
$html = '
    <input type="text" onblur="{{js_inline_submit_form}}" />
    <button name="submit" onclick="{{js_inline_submit_form}}" />
';

public function buildJSCache($position) {
    if (!isset($this->js[$position]) || empty($this->js[$position])) {
        return '';
    }
    $file = implode($this->js[$position]);
    $name = 'js/'.md5($file) .'.js';
    if (!file_exists($name)) {
        file_put_contents($name, $file);
    }
    return $name;
}

$replace = $this->buildJSCache('head');
if ($replace) {        
    $replace = '<script type="text/javascript" src="'.$filename.'"></script>';
}
$template = str_replace('{{js_head}}', $replace, $template);