在django模板中有效地加载jquery和javascript文件

在我的一个django项目中，我使用了大量的自定义jquery脚本和大量的开源jquery插件。 现在，如果我在我的基本模板中加载所有jquery脚本，我将在模板中加载大量未使用的javascript代码，这些代码不需要任何/一些已加载的jquery文件，这将影响页面加载时间特别的模板。

所以，我目前采取的方法是

• 在基本模板中加载基本jquery脚本（每个模板所需的脚本）
• 在基本模板中为js定义一个块，并为每个模板选择性地加载所需的javascripts.eg {% block selective_js %}{% endblock selective_js %}

上面的方法效果很好，但我看到的唯一问题是模板中有很多代码重复。 比如说：

• 我有以下javascript文件

• 现在在多个模板中，我需要包含上面提到的所有javascript文件，并且还想要初始化所提到的脚本中的一些方法。 所以目前，我必须在所有模板中执行此操作：

   {% block selective_js %}        $(document).ready(function() { $('some_element').initializeScript(); });  {% endblock selective_js %} 

这意味着模板中有很多代码重复。

题：

如何在不必以有效方式加载未使用的javascript代码的情况下防止重复代码？

Answer 1

在父模板中定义一个块，其中包含“默认”JavaScript文件，然后根据需要扩展块：

 # base.html {% block js %}      {% endblock %} # child.html {% extends "base.html %} {% block js %} {{ block.super }} {# includes previous content in block #} {# view-specific imports here #} {% endblock %} 

这样可以防止模板中的重复。 有关模板和inheritance的更多信息，请访问： https ：//docs.djangoproject.com/en/1.5/topics/templates/#template-inheritance。

您可以使用django-compressor来组合和缩小CSS和JS导入并缓存它们以实现高效加载。