Почему все мои плагины jquery в одном файле не будут работать?

Question

Раньше у меня было это:

<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/alertbar.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.masonry.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.growfield2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.placeholder.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.color.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/tipsy/src/javascripts/jquery.tipsy.js"></script>

Все работает, когда я загружаю страницу, и ошибок нет. Мой друг сказал мне, чтобы объединить их все в один файл. Итак, я сделал:

find somedir/ -name '*.js' -exec cat {} + > ../allplugins.js

Теперь, когда я включаю "allplugins.js", я получаю Uncaught типовых ошибок. Объект № не имеет метода "редактируемый"

Answer 1

Вы должны объединить свои плагины javascript в том же порядке, в котором вы их импортировали.

Вы можете сделать это, перечислив их в файл (скажем, plugins.list), по одной строке для каждого имени файла. Затем соберите allplugins.js, используя:

cat plugins.list | while read jsfile; do
  echo
  echo "//===== `basename "$jsfile"` ====="
  cat "$jsfile"
done > ../allplugins.js

Например, если у вас есть файл inc.js, который имеет

obj = { 'editable': function(){ return 42; } };

А затем script.js, который пытается использовать объект, определенный в inc.js:

obj.editable()

Если вы измените порядок этих двух файлов, вы увидите, что объект obj используется, но еще не определен.

Answer 2

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

Answer 3

edit извините - использование ">>" вместо ">", вероятно, не нужно, поскольку перенаправление происходит на уровне команды "find", поэтому все должно работать нормально.К сожалению об этом.

этот материал не нужен

Должно быть:

find somedir/ -name '*.js' -exec cat {} + >> ../allplugins.js

(то есть ">>" вместо просто "> ".) Перед этим добавьте:

rm ../allplugins.js

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

заканчиваете ненужную часть

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

Кроме того, найдите своего друга и бросьте в него воздушный шар.

Answer 4

Я заметил, что вы пометили этот вопрос как django.Возможно, вас заинтересует django-mediasync , который автоматически обрабатывает конкатенацию js-файлов для вас (см. http://pypi.python.org/pypi/django-mediasync/2.0.0#joined-files):

Объединенные файлы указываются в файле MEDIASYNC с помощью JOINED. Этодиктует, что сопоставляет отдельные носители с псевдонимом для присоединяемых файлов.

'JOINED': { 'styles/joined.css': ['styles/reset.css','styles/text.css'], 'scripts/joined.js': ['scripts/jquery.js','scripts/processing.js'], },

Файлы, перечисленные в JOINED, будут объединены и переданы в S3 с именем псевдонима. Отдельные файлы CSSбудет также перенесен на S3. Псевдонимы должны заканчиваться либо .css, либо .js для правильной установки типа контента.

Существующие теги шаблона могут использоваться для ссылки на присоединенный носитель.используйте псевдоним соединения в качестве аргумента:

{% css_print "joined.css" %}

При локальном обслуживании теги шаблона будут отображать тег HTML для каждого из файлов, составляющих объединенный файл:

<link rel="stylesheet" href="/media/styles/reset.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="/media/styles/text.css" type="text/css" media="screen, projection" />

При удаленном обслуживании один HTML-тег будет отображаться с именем присоединенного файла:

<link rel="stylesheet" href="http://bucket.s3.amazonaws.com/styles/joined.css" type="text/css" media="screen, projection" />

Это дизайнОн может использовать сайт со статическим контентом через что-то вроде Amazon S3, но его также можно использовать для обслуживания статического носителя с вашего локального сервера, в то же время автоматически обрабатывая контакт с файлами.