Question

I have a problem. I am doing all of this new fancy defer stuff when I load my JavaScript, as recommended by lighthouse之间进行std :: swap交换。

{% block head_content %}
    <script defer src={% static 'js/jquery.min.js' %}></script>
{% endblock %}

如果我只是在Django tempalte中这样做，那不是问题，我可以将<script>内容移动到.js文件中，然后将其推迟：

{% block content %}
    <script>
        $( jquery thing 
              let x = 0; // Do jQuery stuff with NO json_data
         );
    </script>
{% endblock %}

但是，我有一个Django应用程序正在执行以下操作：

{% block content %}
    <script>
        $( jquery thing 
             {{ json_data|safe }} // Do jQuery stuff with json_data
         );
    </script>
{% endblock %}

因此，如果我尝试将脚本移动到单独的.js文件中，则会得到：SyntaxError: expected property name, got {。

如果您由于使用延期而获得$ is not defined，则此very popular Q&A似乎不起作用，如顶部注释中所述。我唯一的选择是将脚本放在不使用延迟的正文中使用jquery的代码的上方吗？如果是这样，这将限制Django模板继承的有用性。

{% block content %}
    <script>
        <script src={% static 'js/jquery.min.js' %}></script> // Add above each first-use of jQuery (along with every other relevant library)
        $( jquery thing 
             {{ json_data|safe }} // Do jQuery stuff with json_data
         );
    </script>
{% endblock %}

Answer 1

我已经有一段时间没有使用Django了，但是我认为您不能在模板中“推迟”该脚本标签。也就是说，您可以尝试以下操作之一：

01 ：将.js加载到一个变量中，您可以从外部var myJsonData = "{{ json_data|safe }}";文件中访问该变量。

类似的东西：

json_data。

在此处检查this thread以获得更多信息。

02 ：另一种选择是创建一个端点，该端点将返回该.js并使用ajax从外部$.ajax({ url: "my_django_endpoint", success: function(result){ // Do jQuery stuff; } });进行调用。然后，您可以使用数据执行所需的任何操作。

类似

{{1}}

在此处检查this thread以获得更多信息。

我们使用了名为T3JS的框架，该框架具有使用上下文实现Option 01的巧妙方法。（如果您想在主题 getConfig 下查看）。

希望它会有所帮助：）

How to defer JavaScript when using Django template variables?

1 个答案: