javascript - 使用 Django 模板变量时如何延迟 JavaScript？

Question

我有一个问题。我正在做所有这些新花样 defer按照 lighthouse 的建议，加载我的 JavaScript 时的东西在开发 PWA 时。

{% 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 { .

这very popular Q&A如果你得到 $ is not defined 似乎不起作用由于使用延迟，如最高评论所述。我唯一的选择是将脚本放在正文中使用 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:将您的 json_data 加载到您可以从外部 .js 文件访问的变量中。

类似于:

var myJsonData = "{{ json_data|safe }}";。

检查 this thread此处了解更多信息。

02:另一种选择是创建一个端点，该端点将返回该 json_data 并使用 ajax 从外部 .js 调用它。然后，您可以使用这些数据来做任何您需要的事情。

有点像

$.ajax({
   url: "my_django_endpoint",
   success: function(result){
      // Do jQuery stuff;
   }
});

检查 this thread此处了解更多信息。

我们使用了一个名为 T3JS 的框架它有一种使用上下文实现选项 01 的简洁方法。 (如果您想查看主题getConfig)。

希望对您有所帮助:)