如何在django模板中管理Javascript模块？

假设我们想要一个基于javascript的功能库（我认为是jquery）： 例如：

ajax对话框

挑选约会对象的人

表单验证器

滑动菜单栏

手风琴式的东西

每种语言都有四段代码：一些Python、CSS、JS和HTML

安排所有这些物品的最佳方式是什么，以便：

• 每个javascript“模块”都可以被不同的视图灵活地重用
• 组成完整函数的四位代码保持在一起
• css/js/html部分出现在响应中的正确位置
• 模块之间的公共依赖关系不会重复（例如：公共javascript文件）

x--------------

如果，或者有什么方法可以确保，当从templatetag调用时，模板遵守{%block%}指令，那就太好了。因此，可以在一个文件中创建一个模板，每个模板都有一个用于CSS、HTML和JS的块。通过templatetag调用它，该标记从任何视图的模板调用。这是有道理的。这已经可以用某种方式做到了吗？我的templatetag模板似乎忽略了{%block%}指令

x--------------

---

有一些非常相关的GasBog，将这些媒体放在表单中，这可能适用于表单验证器和日期选择器示例。

< P>如果不止一个页面使用给定的JS文件，则应该考虑将它们全部连接在一起并缩小结果。这将减少网络连接，从而提高整体页面加载时间。别忘了将过期时间缩短到至少一到两周。

我想你将很难把这四个部分放在一起，然后一蹴而就地应用它们——这仅仅是因为其中一些出现在你的

标签中，而另一些出现在

标签中

我们所做的是确保为我的

base.html

（以及我的基本css文件）上的所有页面加载jQuery。。。然后，我有

{%block css%}

和

{%block js%}

的块标记。继承

base.html

文件的模板可以提供自己的javascript和css（并且只提供所需的内容）

我已经创建了一些模板标签，这些标签创建了ajax函数，其输出基于所显示的对象（例如，包括

object\u id

），这减少了重新编码

---

有一件事我没有试过，但感兴趣的是。

我发布这个问题已经有一段时间了。为了解决这个问题，我一直在做的是：

将所需的javascript部分编写为静态服务的库

使用服务器端值从模板调用静态库中的例程

编写时需要限制，使其仅充当客户端脚本；在为js提供服务时，不要试图从服务器注入值。最终，我发现在html模板中严格应用服务器端变量不会那么混乱

通过这种方式，我能够：

将html标记上的javascript选择器保存在同一个文件中（即：模板）

完全避免使用模板标签

在不同的位置重复使用每个javascript库，以及

将css/js/html片段保存在所有需要找到它们的地方

这并不完美，但它能让我一直过下去，直到有一个更整洁的想法出现

例如，“media/js/alertlib.js”中的js库可能包括：

function click_alert(selector, msg){ 
    $(selector).click(function(){ alert(msg) })
}

模板包括：

<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
    click_alert('#clickme', {% message %})
</script>

<div id='clickme'>Click Me</div>

单击警报（“#单击我，{%message%}）
点击我

看一看就是为了这个目的而创建的。

谢谢Peter。有一些js压缩例程，这可能是响应中间件中的一个方便的事后想法；然而，这个问题是关于如何最好地安排django项目，以使响应中包含大量javascript而不会让源代码变得混乱。我希望“包含”和“模板标签”会以某种方式参与进来。你是对的：我脑子里有一次对话，只给了你一半。我们尝试了“使用模板只包含任何给定页面的JS文件”路线，但在两次点击中，用户无论如何都会吸收掉95%的JS文件。我们没有吃掉所有这些单独下载的内容，也没有处理确保每个页面都包含正确内容的混乱问题，而是尝试将所有内容压缩到一个连接文件中并缩小它。结果出人意料地小，然后我们将link标记放在基本模板中。完成。我同意Peter的观点——将它们连接在一起并让用户一次下载它们可能更容易。将django资产视为管理连接的简单方法：