Django, рекомендуемый способ объявления и решения JavaScript-зависимостей в блоках

Есть ли хороший, эффективный и / или рекомендуемый способ объявления и предоставления JS-зависимостей для блоков в шаблонах Django?

В основном то, что я хочу сделать, это:

  1. В файле шаблона Django, содержащем блок, объявите: мне нужна библиотека JS X для работы.
  2. В теге страницы после рендеринга страницы вставьте тег сценария для этой библиотеки, но не более одного раза.

Причины:

  1. Минимизируйте количество ненужных библиотек JS, включенных в страницу, чтобы сохранить время загрузки приемлемым в старых браузерах. (некоторые библиотеки, такие как jquery-ui, очень тяжелые для старых IE)
  2. Предотвратите возможную повторную загрузку библиотек JS, как по причинам производительности, так и по предотвращению ошибок. Это происходит, когда у вас есть повторяющиеся блоки или несколько блоков, включая одну и ту же библиотеку JS.

Я видел некоторые потенциальные решения для этого, но ни одно из них пока не было очень убедительным с точки зрения производительности или ясности.

2 ответа

Для этого я лично использую Django Sekizai. В моем базовом шаблоне у меня есть этот блок:

{% load sekizai_tags %}

<body>
# your own logic here

{% with_data "js-data" as javascripts %}
    {% for javascript in javascripts %}
        <script type="text/javascript" 
        src="{{ STATIC_URL }}{{ javascript }}" ></script>
    {% endfor %}
{% end_with_data %}
</body>

Затем в моих включенных или расширенных шаблонах:

{% load sekizai_tags %}

{% add_data "js-data" "myapp/js/script.js" %}

Обратите внимание, что вы можете определить несколько блоков, а также использовать их для CSS, что очень удобно.

Файлы, добавленные с тегом "add_data", никогда не будут повторяться, даже если они будут добавлены несколько раз.

Вы могли бы использовать {% include %} тег шаблона. Если вы загрузите js в заголовок, вы можете сделать что-то вроде этого:

base.html

<head>
<title>XXXX</title>
    ...
    <script type="text/javascript" src="{{ STATIC_URL}}js/jquery.js"></script>
    ...
{% block site_header %}{% endblock %}
</head>

other.html

{% extends "base.html" %}
{% block site_header %}
...
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/urlify.js"></script>
..
{% endblock %}

Вам нужно будет настроить шаблоны / патчи / и т.д. к вашим потребностям.

Другие вопросы по тегам