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

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 文件，它从呈现的模板中获取上下文变量，直接插入模板 html 中的 javascript 代码，或者我使用的第三种方法不知道？

Answer 1

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

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

解决方案一

在模板中使用 JS 脚本，您将在其中转储 JS 变量，然后直接从 JS 文件中使用它们。为此，我通常会在我的模板之前我的自定义 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>

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

方案二

如果你有更多的东西需要在 Django 和 js 之间共享，并且你想要更好地控制你可以创建一个 JS-Django 模板，即在你的模板文件夹内创建一个普通的 JS 文件。然后可以将该文件包含在 <script> 中标记(在此处查看我的答案以获得与 css 类似的解决方案:Django Use Static files URL in Static Files)或者，甚至更好地通过 TemplateView 用作普通的 django View .因此，您将创建一个名为 django_data.js 的文件在你的templates你将在其中编写与 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 )之间的区别。然后您就可以使用 g_django从你的内部 js/ajax.js .