Наилучшая практика для получения данных из Django представления в JS для выполнения на странице? - PullRequest
0 голосов
/ 13 февраля 2020

Мне сказали, что это «плохая практика» - возвращать данные из Django представления и использовать эти возвращенные элементы в Javascript, загруженном на страницу.

Например: если бы я был При написании приложения, которое нуждалось в дополнительных данных для загрузки / отображения графика на основе javascript, мне сказали, что неправильно передавать эти данные непосредственно в javascript на странице из переменной шаблона, передаваемой из представления Django.

Моя первая мысль :

  • Просто получите данные, необходимые графику в представлении django, и верните их в контекстную переменную, которая будет использоваться в шаблоне. , Затем просто обратитесь к этой переменной контекста непосредственно в javascript в шаблоне.

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

Так как это лучше всего достигается ?

Моя вторая мысль :

  • Ускорение Django Rest Framework и создание конечной точки, куда вы передаете все необходимые данные и создаете AJAX запросить при загрузке страницы - затем загрузить данные и выполнить необходимые действия JS.

Это работает, кроме одной вещи , как мне получить переменные, необходимые для запроса AJAX, в сам запрос AJAX?

Я должен был бы получить их либо из контекста (что является «неправильным способом»), либо получить параметры из URL. Есть ли какой-нибудь простой способ разобрать данные из URL в JS? Это похоже на боль в шее, просто обойтись без использования представления необходимых данных и доступа к этим переменным непосредственно в JS.

Итак, действительно ли это "плохая практика" - передавать данные из Django просматривать и использовать его непосредственно в Javascript?

Приемлемы ли оба метода?

Каков Django подходящий способ передачи таких данных в Javascript на данной странице / шаблоне?

1 Ответ

1 голос
/ 13 февраля 2020

Передача данных напрямую не всегда является неправильным путем к go. JS есть, чтобы вы могли выполнять код, когда все остальное готово. Поэтому, когда они говорят вам, что это неправильный способ передачи данных напрямую, это потому, что нет смысла делать страницу и данные более тяжелыми, чем это должно быть до того, как JS сработает.

НО это нормально - передавать важные данные, чтобы ваши JS коды знали, что они должны делать. Чтобы сделать это более понятным, давайте рассмотрим ваш случай:

Вы хотите визуализировать график. А графики иногда тяжелы для рендеринга, и это может сделать первый рендеринг медленным. И в большинстве случаев графики не так полезны без дополнительного контекста, который предоставляет ваша страница. Таким образом, чтобы ваша веб-страница загружалась быстрее, вы разрешаете JS загружать ваш график после того, как ваша веб-страница была обработана. И если вы будете ждать, то нет смысла передавать дополнительные данные, потому что это делает страницу более тяжелой и замедляет первоначальный рендеринг, а также требуется время для анализа и преобразования этих данных в JSON объекты.

Удаляя данные и позволяя JS загружать их в фоновом режиме, вы уменьшаете размер страницы и ускоряете ее рендеринг. Поэтому, пока пользователь читает контекст, необходимый для вашего графика, JS извлечет необходимые данные и отобразит график. Это заставит вашу веб-страницу иметь более быстрый начальный рендеринг.

В общем:

Когда передавать данные напрямую:

  • Когда исходные данные необходимы для JS, чтобы сделать то, что нужно (конфиги, значения по умолчанию и т. Д. c).
  • Когда разница во времени имеет большое значение, и вы не можете слишком долго ждать дополнительный запрос на завершение рендеринга.
  • Когда данные очень малы.

Когда данные не передаются напрямую:

  • В любом случае, для рендеринга дополнительных данных требуется время, так почему бы не получить последние тоже?
  • Когда размер данных большой.
  • Когда вам нужно как-то рендерить что-то как можно быстрее.
  • Когда для этих данных требуются тяжелые процессы.
  • Когда JS может уменьшить размер ваших данных (Решите, какие именно данные должны передаваться в точности, используя опции, доступные только JS.)
...