Лучшая практика использования JavaScript в Django

Question

Я хочу продвинуть свой проект Django с помощью некоторого JavaScript / jQuery. Чтобы с самого начала сделать это, я хотел бы знать, какой способ организации .js-файлов является оптимальным.

Загрузка одного большого файла включает в себя меньше накладных расходов, чем загрузка множества маленьких, а также потому, что он выглядит чище в коде, который я рассмотрел, чтобы создать один глобальный .js-файл и включить его в base.html (от которого наследуется каждый шаблон) , Однако в результате JavaScript попытается назначить все привязки событий, даже если элементы, к которым должны быть привязаны события, отсутствуют в текущем документе. Со всеми селекторами jQuery, которые затем должны были бы выполнять свою работу, которая не может быть слишком эффективной. Из более раннего опыта веб-разработки я знаю, что можно сделать что-то вроде if(location.href == '/some/url/') { (JavaScript code) ... }. В данном случае это кажется неосуществимым для меня, поскольку при изменении URL-адресов мне придется изменить URLconf и файл .js (при этом используя reverse () и {% url%}, чтобы предотвратить это в других местах). Я думаю, что здесь нет возможности использовать названные URL-адреса?

Кто-нибудь знает, как организовать JavaScript без файла для каждого шаблона с одной стороны и без ненужного снижения производительности?

Answer 1

Я не знаю, что этот вопрос специфичен для Django - похожие проблемы возникают при управлении Javascript во всех видах систем.

Тем не менее, я обычно стараюсь размещать свои файлы Javascript так, чтобы это действительноСценарии и библиотеки включены в один файл, сценарии, относящиеся к разделу сайта, включены в набор файлов, относящихся к разделу, а сценарии, относящиеся к одной странице, включены в еще один сайт файлов, специфичных для страницы (или встроенныхкод, в зависимости от контекста).

Django имеет хорошую поддержку для этого подхода, потому что вы можете также настроить свои шаблоны.Включите глобальный скрипт в шаблон base.html, затем создайте шаблон mysection-base.html, который наследуется от base.html и просто добавляет файлы Javascript (и CSS), специфичные для этого раздела.Тогда подстраницы в этом разделе могут наследоваться от mysection-base.html вместо base.html, и все они будут иметь доступ к специфичным для раздела сценариям.

Answer 2

Я считаю django-compress неоценимым, поскольку он автоматически сжимает и минимизирует ваши предварительные развертывания JavaScript и CSS. Он даже автоматически обрабатывает SASS, LESS и CoffeeScript, если они плавают на вашей лодке.

Answer 3

Вы используете модульный javascript.

Выберите свой предпочтительный упаковщик (мой - browserify ), который упаковывает все ваши модули в один пакет, который вы уменьшаете и gzip.Вы отправляете этот файл клиенту, и он кешируется.

Это означает, что вы кэшировали весь свой код, минимизировали HTTP-запросы и оставались экономными и эффективными.

А так как у вас есть модульный код, вы простозагрузите ваш код, как обычно.

Лично я бы использовал некоторые функции обнаружения форм для загрузки модулей.Вы можете выбрать функцию обнаружения почти для любой функции (некоторые селекторы css, маршруты, сегменты URL).

Определение функции будет выглядеть следующим образом:

var Features = {
  "class": "name",
  "class2": "name2",
  "dynamic-scroll": "dynamic-scroll",
  "tabstrip": "tabstrip",
  ...
}

for (var key in Features) {
  require(Features[key]);
}

Где как маршрутизация с Дэвис будет выглядеть как

Davis(function() {
  this.get("blog", function(req) {
    require("blog")(req);
  });

  this.get("blog/:post", function(req) {
    require("blog-post")(req);
  });

  this.get("shop", function(req) {
    require("shop")(req);
  });
  ...
});

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

// some-module

mediator.on("blog-loaded", function() {
  // load in some libraries

  // construct some widgets

  mediator.emit("blog-ui-build", widgets);
});

И вам понадобится начальная загрузка, чтобы запустить цикл обработки событий. Не стесняйтесь смотреть на демонстрацию EDA

Answer 4

Приложения от http://djangopackages.com/grids/g/asset-managers/ могут помочь.