Question

让我们说我们想要一个基于javascript的功能库（我在想jquery）：例如：

ajax对话框
日期选择器
表单验证器
一个滑动菜单栏
一个手风琴的东西

每个代码有四个代码：一些Python，CSS，JS和＆amp; HTML。

安排所有这些作品的最佳方法是：

每个javascript'模块'可以被不同的视图巧妙地重用
构成完成功能的四位代码保持在一起
css / js / html部分出现在响应中的正确位置
模块之间的公共依赖关系不会重复（例如：共同的javascript文件）

X --------------

如果或者有某种方法可以确保从模板标签调用模板时，模板会尊重{％block％}指令，那将会很好。因此，可以在单个文件中创建单个模板，每个模板具有CSS，HTML和JS的块。通过从任何视图所需的模板调用的模板标签来调用它。这是有道理的。这可以通过某种方式完成吗？我的模板标签模板似乎忽略了{％block％}指令。

X --------------

这里有一些非常相关的关于将这些媒体放在表格中的问题http://docs.djangoproject.com/en/dev/topics/forms/media/这可能适用于表单验证器和日期选择器示例。

Answer 1

我发布此问题已经有一段时间了。我一直在做的解决方法是：

将您需要的javascript部分写为静态提供的库
使用服务器端值

需要约束来编写它，使其仅充当客户端脚本;不要试图在服务js时尝试从服务器注入值。最后，我发现在html模板中严格应用服务器端变量不那么令人困惑。

通过这种方式，我能够：

将html标签上的javascript选择器保留在同一个文件中（即：模板）
完全避免使用templatetags
在不同的地方重复使用每个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>

Answer 2

如果多个页面使用给定的JS文件，则应考虑将所有这些文件连接在一起并缩小结果。这减少了网络连接，这将改善整个页面加载时间。不要忘记将到期时间延长至少一两周。

Answer 3

查看为此目的而创建的Django Sekizai。

Answer 4

我认为您将很难将所有四个部分放在一起并一举应用 - 只是因为有些部分出现在<head>标签中，而其他部分出现在<body>标签中。

所做的是确保为我的base.html（以及我的基本css文件）上的所有页面加载了jQuery ...然后，我有{% block css %}和{{的块标记1}}。继承{% block js %}文件的模板可以提供自己的javascript和css（并且只提供所需的东西）。

我创建了一些模板标签，用于创建ajax函数，其输出基于所显示的对象（例如，包括base.html） - 这会减少重新编码。

我还没有尝试但感兴趣的一件事是django-compress。

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

4 个答案: