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

Question

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

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

• 在基本模板中加载基本 jquery 脚本(每个模板都需要)
• 在基本模板中定义一个 js block ，并有选择地加载每个模板所需的 javascript。例如 {% block selected_js %}{% endblock selected_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

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

# 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 %}

这将防止模板中出现重复。查看:template inheritance有关模板和继承的更多信息。

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