只包含一次脚本

Question

我正在构建一些需要特定 javascript 才能工作的 twig 模块。

javascript 文件是一种资产，可以按如下方式包含：

<script src="{{ asset('what/ever/hello.js') }}">

到目前为止还不错，但要知道：

这些模块可能会或可能不会出现在最终呈现的页面上。
这些模块可能会在同一页面上出现多次。
我不想在所有页面中包含 javascript，仅当至少存在一个需要它的模块实例时才包含。

如果我将脚本添加到模块 twig 文件中，并且多次使用该模块，将导致我的页面包含对同一脚本的多次调用。

我该如何处理这个案例？

Answer 1

您可以使用扩展来跟踪您想要包含的脚本，

<?php
    class Project_Twig_Extension extends \Twig\Extension\AbstractExtension {
        protected $scripts = [];

        public function getFunctions() {
            return [
                new \Twig\TwigFunction('get_scripts', [ $this, 'getScripts']),
                new \Twig\TwigFunction('add_script', [ $this, 'addScript']),
            ];
        }

        public function getScripts() {
            return $this->scripts;
        }

        public function addScripts($script) {
            if (!in_array($script, $this->getScripts()) $this->scripts[] = $script;
        }
    }

只是一些模型模块

{% do add_script('modules/module_a.js') %}
<h1>Module A</h1>

{% do add_script('modules/module_b.js') %}
<h1>Module B</h1>

只是一个简单的基本模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        {% block content %}
        {% endblock %}

        {% for script in get_scripts() %}
            <script src="{{ asset(script) }}"></script>
        {% endfor %}
    </body>
</html>

只是一个简单的子模板

{% extends "base.html" %}
{% block content %}
    {% incude "modules/module_a.html" %}
    {% incude "modules/module_b.html" %}
    {% incude "modules/module_a.html" %}
    {% incude "modules/module_b.html" %}
{% endblock %}

这会输出类似

的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>Module A</h1>
        <h1>Module B</h1>
        <h1>Module A</h1>
        <h1>Module B</h1>

        <script src="js/modules/module_a.js"></script>
        <script src="js/modules/module_b.js"></script>
    </body>
</html>

只包含一次脚本

Include script only once

twig