Javascript 的最佳实践需要 Django 中的上下文变量

Question

直到现在，我一直在我的模板中包含脚本，方法是使用 {% load static %} 并将 javascript 代码放在静态目录中，与 html 文件分开，因为我认为它是最好的做法。

但是我越来越需要在javascript中使用上下文变量。由于模板标签不能直接集成到单个 javascript 静态文件中（据我所知），我一直在使用选择器从呈现的模板中将这些值导入到 javascript 中。例如：

<!--template.html-->
<div id="url_ajax" style="display:none">{% url 
"images:products" %}</div>
{%load static%}
<script src="{% static "js/ajax.js" %}"></script>

/*Ajax.js*/
url_ajax = document.getElementById("url_ajax").innerHTML
$.post(url_ajax, {
      rankit: this.rankit,
      pd: JSON.stringify(pd)
    },
    function(data) {
      if (data['status'] == 'ok') {
        [...]
      }
    }
  );

虽然这可行，但出于安全原因或可扩展性考虑，我觉得这不是一个好的做法。但是我不知道在 javascript 中集成上下文变量而不是在模板中直接集成 javascript 代码的另一种方法，如果该代码将在许多模板中使用，这都不是一个好方法。

作为一名 Django 学习者，我想知道在这些情况下最常用的方法是：分离的 javascript 文件从呈现的模板中获取上下文变量，javascript 代码直接插入模板 html，或者我不知道的第三种方法？

Answer 1

我不太喜欢你的解决方案，不需要创建额外的 html 元素来传递 django 变量并从 JS 读取它。这很容易出错，并且会向您的 DOM 添加不需要的 html 元素。

相反，我推荐两种解决方案：

解决方案 1

在模板中使用 JS 脚本，您将在其中转储 JS 变量，然后直接从 JS 文件中使用它们。为此，我通常会在我的模板中有一个脚本 before 我的自定义 JS 代码，我在其中定义了一个包含所有 Django 变量的全局 JS 对象，如下所示：

    <script>
        var g_django = {
            url1: '{% url "the_first_url" %}',
            url2: '{% url "the_second_url" %}',
            image: '{% static "images/an_image" %}'
        }
    </script>
    <script src='{% static "js/ajax.js" %}'></script>

现在我可以在 js/ajax.js 脚本中使用 g_django.url1、g_django.image 等。如果你没有很多东西需要在 django 和 JS 之间共享，可以使用这个。

解决方案 2

如果你有更多的东西需要在 Django 和 js 之间共享并且你想要更好地控制你可以创建一个 JS-Django 模板，即创建一个普通的 JS 文件 inside你的模板文件夹。然后可以将此文件包含在 <script> 标记内（在此处查看我的答案以获得与 css: 类似的解决方案），或者，甚至更好地通过TemplateView。因此，您将在 templates 文件夹中创建一个名为 django_data.js 的文件，您将在其中编写与 django 变量混合的 JS 代码，例如它的内容可能是这样的

    var g_django = {
        url1: '{% url "the_first_url" %}',
        url2: '{% url "the_second_url" %}',
        image: '{% static "images/an_image" %}'
    }

然后需要通过 TemplateView 将此文件包含到您的 urls.py 中，如下所示：

class django.views.generic.base.TemplateView

urlpatterns = [
    path('django_data_js/', TemplateView.as_view(template='django_data.js', content_type='application/javascript'), name='django_data_js' ),
]

现在您可以访问 django_data_js/ 查看您的 JS 变量并确保一切都正确呈现，当然您可以像这样将它（作为模板）包含到您的脚本中：

    <script src='{% url "django_data_js" %}'></script>
    <script src='{% static "js/ajax.js" %}'></script>

注意包含 template-js（使用 url）和包含普通静态文件（使用 static）之间的区别。然后您就可以在 js/ajax.js.

中使用 g_django

Javascript 的最佳实践需要 Django 中的上下文变量

Best practice for Javascript which requires context variables in Django

javascript

django

django-templates

django-staticfiles