Лучшая практика для использования 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

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

Answer 3

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

Answer 4

Вы используете модульный 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 будет выглядеть

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); 
}); 

И вам потребуются некоторая самонастройка на месте, чтобы начать цикл событий. Feel free to look at an EDA demo