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

Question

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

所以,我现在采取的方法是

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

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

• 我有以下javascript文件

  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>
  

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

  {% block selective_js %}
  
      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
      <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>
  
      <!-- Initialize Methods -->
      <script type="text/javascript">
          $(document).ready(function() {
              $('some_element').initializeScript();
          });
      </script>
  
  {% endblock selective_js %}
  

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

题:

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

Answer 1

在父模板中定义一个块,其中包含"默认"JavaScript文件,然后根据需要扩展块:

# base.html

{% block js %}
    <script src="{{ STATIC_URL }}js/jquery.1.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.2.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.3.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.4.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.5.js"></script>
{% endblock %}


# child.html

{% extends "base.html %}

{% block js %}
    {{ block.super }} {# includes previous content in block #}
    {# view-specific imports here #}
{% endblock %}

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

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