我如何在 Javascript 和 Django 中执行此操作？

Question

我习惯将 JavaScript 放在页面顶部的头部。在我的 javascript 中，我使用了 Django 中的很多模板内容，例如： {{ user.id }} {{ post.body }}

我决定将我的 javascript 移动到另一个文件中，然后导入它使用： script src=

但由于我的 javascript 位于另一个文件中，现在它无法读取我的 Django 模板内容。

我该怎么办？我的 javascript 中有 Django 模板内容，我必须将我的 javascript 移动到另一个文件。

Answer 1

在页面顶部转储一些 JSON 对象到脚本标记中：

<script type='text/javascript'>
var a = {{ someJsonObject }}
</script>

然后包含单独的 javascript 文件并使用 a.variable1、a.variable2 等。在你的 JavaScript 代码中。

Answer 2

您也可以生成 javascript 作为模板！但这需要通过 Django 提供动态 JavaScript。

例如..

#views
def some_js(request):
    return render_to_response('js/some_dynamic_js.js', {}, mimetype='text/javascript')

没有任何规定 Django 模板必须是 HTML。它们只是一种模板化文本的方式。代码是文本，因此可以模板化。我在当前的项目中这样做。

Answer 3

您可以按照 Samet 建议使用 JSON 数组，甚至可以仅使用常规 JS 变量。

<script type='text/javascript'>
some_numeric_property = {{variable1}};
some_string_property = '{{variable2}}';
</script>

另一种方法（我通常采用的方法）是通过函数调用和 data- 属性传递您需要的所有详细信息。例如，如果我希望某个链接在鼠标悬停时弹出带有用户个人资料的 AJAX 气泡，我可能会这样做：

<a href='/profile/{{user.id}}' onmouseover='show_user_popup({{user_id}})'>{{user.name}}</a>

或这样做（假设我的脚本将事件附加到具有 user-link 类的链接） )：

<a href='/profile/{{user.id}}' class='user-link' data-uid='{{user_id}}'>{{user.name}}</a>

如果需要，您还可以在加载 HTML 后直接在 HTML 的 head 中调用这些函数。

<script type='text/javascript' src='{{MEDIA_URL}}/js/whatever.js'></script>
<script type='text/javascript'>
do_something_with_a_number({{variable1}});
do_something_with_a_string('{{variable2}}');
</script>

后者的优点是，因为加载 JS 文件时不会执行任何代码（显然，创建和绑定 function 对象除外），因此您可以在每个页面上包含一个 JS 文件在您的网站上，只需在适当的页面上调用您需要的位即可。然后，该文件将在第一次加载后被缓存（假设您发送正确的标头），从而减少后续页面的加载时间。

编辑：安全考虑：我所描述的方法（以及本页上的许多其他方法）建议将数据作为 a) HTML 标记的属性或 b) JavaScript 实体插入。只要您知道数据 a) 不能由不受信任的用户设置或 b) 始终采用“安全”格式（即数据来自 SlugField 或 < code>IntegerField 或数据库中的某些内容）。

但是，如果这两种情况都不是，您需要通过转义适当的字符来防止 HTML 和/或 JS 注入。 Django 的 HTML 实体转义的默认行为在某些情况下可能会保护您，但也可能不会，因此值得检查。