Как/когда/где включить внешний javascript

Я ищу несколько советов о том, как наилучшим образом сохранить функции JavaScript (jQuery).

Я развиваюсь в MVC/бритве и поэтому имею страницу макета. Здесь я включаю мою библиотеку jQuery и внешний файл JavaScript, поэтому она доступна на каждой отдельной странице.

Это хорошо работает, но теперь я полностью осознаю тот факт, что добавляю почти 300 строк JS на КАЖДУЮ страницу, где, возможно, половина из них используется на любой из этих страниц.

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

У меня есть несколько вопросов вокруг этой договоренности:

  • Является ли размещение JS внутри HTML в целом приемлемым, если используются переменные с использованием бритвы? Кажется, что нет чистого способа передачи переменной во внешний файл js
  • Должен ли я разделить свои функции на отдельные JS файлы и просто включить то, что необходимо для каждой страницы на сайте?
  • Если бы я разделил их на несколько файлов, как это работает с jQuery (document).ready? Должен ли я использовать это, если весь JavaScript, который я включаю, должен использоваться?

Я уверен, что это скорее вопрос мнения, чем черно-белый ответ, но я хочу рассмотреть все свои варианты, прежде чем двигаться дальше. Несмотря на то, что он отлично работает, я не могу не чувствовать, что есть лучший/более чистый способ.

ОТВЕТЫ

Ответ 1

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

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

$(document).ready(function() {
    mysite.mypage();
});

Тогда функция mysite.mypage() может быть определена во внешнем JS файле. 300 строк - это не конец света, я бы сказал, что его, вероятно, слишком рано беспокоиться об оптимизации.

Вы всегда можете посмотреть, как уменьшить этот JS файл, чтобы уменьшить размер. Быстрый и простой способ сделать это можно здесь:

http://www.minifyjavascript.com/

Ответ 2

Вы когда-нибудь слышали о require.js? http://requirejs.org/ Мне это очень полезно.

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

Я не знаю о передаче переменной во внешний JS файл, я не думаю, что это возможно/ "правильно".

Вы можете сделать каждый внешний JS файл в функцию, которая принимает и возвращает параметры. Затем на странице вы должны использовать его: - включить файловую зависимость - вызвать функцию

То, что я делаю, похоже на ваше второе предложение.

для вопроса $(document.ready), это действительно зависит от вас. Вам не обязательно использовать его, но полезно для некоторых вещей, посмотрите этот обзор: http://docs.jquery.com/Tutorials:Introducing_ $(document).ready()