如何在Django的可复用组件中正确使用JavaScript？

以下是几种实用的解决思路，都是Django项目里常用的方案：

1. 模板条件渲染+分块引入组件JS #

这是最贴合Django模板继承机制的方案，核心是让组件可以分别输出HTML结构和JS代码：

首先改造component.html，通过参数控制是否只输出JS块：

{% if not only_js %}
<!-- 组件的HTML结构 -->
<div class="my-component">
  <p>组件内容</p>
</div>
{% endif %}

<!-- 组件专属JS块 -->
{% block component_js %}
<script>
  // 这里可以安全使用jQuery，因为会在依赖库之后加载
  $(function() {
    $('.my-component').on('click', function() {
      // 交互逻辑
    });
  });
</script>
{% endblock %}

然后在需要引入组件的页面（已继承base.html），分两处引入组件：

{% extends 'base.html' %}

{% block content %}
  <!-- 引入组件HTML部分 -->
  {% include 'component.html' %}
{% endblock %}

{% block extra_js %}
  {{ block.super }} {# 保留base里原有的JS #}
  <!-- 只引入组件的JS部分 -->
  {% include 'component.html' with only_js=True %}
{% endblock %}

这样组件JS会被渲染到base.html的extra_js块位置，也就是jQuery等依赖库加载完成之后，不会出现未定义的问题。

2. 抽离JS为独立静态文件 #

如果组件的JS逻辑不需要动态模板变量，直接把JS代码抽成独立文件，比如static/js/component.js：

$(function() {
  $('.my-component').on('click', function() {
    // 交互逻辑
  });
});

然后在使用组件的页面中：

{% extends 'base.html' %}

{% block content %}
  {% include 'component.html' %} {# 只引入HTML结构 #}
{% endblock %}

{% block extra_js %}
  {{ block.super }}
  <script src="{% static 'js/component.js' %}"></script>
{% endblock %}

这种方案的优势是JS可以被浏览器缓存，减少重复加载，适合通用型组件。

3. 延迟执行JS逻辑（临时应急方案） #

如果不想调整模板结构，可以在组件的JS里做延迟执行，确保依赖库加载完成后再执行逻辑：

<div class="my-component">
  <p>组件内容</p>
</div>

<script>
  function initMyComponent() {
    // 检查jQuery是否已加载
    if (typeof $ !== 'undefined') {
      $('.my-component').on('click', function() {
        // 交互逻辑
      });
    } else {
      // 未加载则等待100ms重试
      setTimeout(initMyComponent, 100);
    }
  }

  // 监听DOM加载完成事件
  document.addEventListener('DOMContentLoaded', initMyComponent);
</script>

这种方法适合快速临时解决问题，但代码不够优雅，长期维护建议用前两种方案。

4. 自定义模板标签收集组件JS #

如果项目中有大量这类组件，可以写一个自定义模板标签来收集组件JS，统一输出到extra_js块：

1. 首先在app的templatetags目录下创建component_tags.py：

from django import template

register = template.Library()

@register.simple_tag(takes_context=True)
def add_component_js(context, js_code):
    # 在上下文里创建一个列表存储组件JS
    if 'component_js_list' not in context:
        context['component_js_list'] = []
    context['component_js_list'].append(js_code)
    return ''

2. 在component.html中使用这个标签注册JS：

<div class="my-component">
  <p>组件内容</p>
</div>

{% load component_tags %}
{% add_component_js %}
<script>
  $(function() {
    $('.my-component').on('click', function() {
      // 交互逻辑
    });
  });
</script>
{% endadd_component_js %}

3. 在base.html的extra_js块中输出所有收集到的JS：

{% block extra_js %}
  <!-- 原有依赖库 -->
  <script src="{% static 'js/jquery.min.js' %}"></script>
  <!-- 输出组件JS -->
  {% if component_js_list %}
    {% for js in component_js_list %}
      {{ js|safe }}
    {% endfor %}
  {% endif %}
{% endblock %}

这种方案适合大型项目，统一管理组件JS的加载，避免重复代码。

内容的提问来源于stack exchange，提问作者Artem Shalagin