Подключение нескольких JS файлов
Просто на обычном PHP написать функцию и в цикле пройтись по массиву и через require_once подключить все файлы. Слышал о Require.js, но там какие то колбэки прописывать надо после каждого подключения. Кто какой подход использует
Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 25 сен 2015 в 8:50
533 2 2 золотых знака 8 8 серебряных знаков 24 24 бронзовых знака
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Подключение некритичных скриптов уже на клиенте:
function includeJS(srcArray, onLoaded) < var head = document.getElementsByTagName('head')[0], scriptsHave=document.querySelector('script'), isLoaded = [], callbackCalledOnce = false; for (var i = 0; i < scriptsHave.length; i++) < /*защита от дурака - убираем адреса, если они уже подключены*/ var found=srcArray.indexOf(scriptsHave[i].src); if(found!=-1) srcArray.splice(found,1); >for (var i = 0; i < srcArray.length; i++) isLoaded[i] = 0; for (var i = 0; i < srcArray.length; i++) < /*добавляем очередной скрипт в страницу*/ var scriptElement = document.createElement('script'); scriptElement.setAttribute('type', 'text/javascript'); scriptElement.setAttribute('src', srcArray[i]); head.appendChild(scriptElement); scriptElement.onload = function (x) < isLoaded[x] = 1; /*незагруженных не осталось и callback не вызывался*/ if (isLoaded.indexOf(0) == -1 && !callbackCalledOnce) < callbackCalledOnce = true; setTimeout(onLoaded, 100); /*без задержки - в разных браузерах иногда косячит */ >>(i); > > Отслеживать
ответ дан 25 сен 2015 в 8:56
967 6 6 серебряных знаков 18 18 бронзовых знаков
А чем это лучше PHP?, кроме того через require_once не нужно делать проверку на уже подключенный файлы, т.к функция сама выдаст исключение если повторно подключается одинаковый файл
25 сен 2015 в 9:01
Но подход понятен
25 сен 2015 в 9:01
Как-то влияет на время отрисовки страницы, что-то около SEO. Отложенная загрузка позволит сначала отрисовать страницу без ожидания скриптов, и лишь потом дожидаться их догрузки
25 сен 2015 в 9:07
Нафиг сложности , вы говорите что проще через php , но вы забываете что все это хозяйство , при загрузке будет выполнять отдельные http запросы и соответственно тормозить загрузку странички . По мне так чем меньше сделает php тем лучше — его задача нагенерить контент , со всем остальным прекрасно справляется клиент , тем более что сейчас даже телефоны по мощностям как маленькие серваки .
А по поводу подключения js в нужный момент то чем не вариант JQ ?
$.when( $.getScript("/common/js/WelcomeMatch.js"), $.getScript("/common/js/underscore-min.js") ) .done(function() < WelcomeMatch.run(); >) .fail(function() < alert("При загрузке одного из компонентов произошла ошибка."); >); Отслеживать
ответ дан 25 сен 2015 в 9:24
1,668 10 10 серебряных знаков 15 15 бронзовых знаков
В вашем примере, колбэк done произойдет когда скрипт загрузиться или выполниться?
25 сен 2015 в 9:43
Скрипты выполнятся в тот же момент как будут загружены.
25 сен 2015 в 9:51
Да все верно , это всего лиш пример того как можно загрузить скрипты и выполнить их только после того как все объекты будут аккуратно загружены . Событие которое может инициализировать этот процесс может быть любым , предположим пользователь подвел мышку к диву где есть кнопка , после загрузки скриптов кнопка станет активной . Разве это не экономия ресурсов , подгружать только тогда — когда есть надобность .
25 сен 2015 в 10:06
RequireJS всё-таки хорошее решение именно для вашей задачи. Скачайте себе сам require.js, в теле страницы единственный тег:
А в скрипте загрузки scripts/main.js что-то типа:
requirejs([ "ololo", // .js тут не пишем "alala", // скрипты в той же папке scripts/ ], function() < // это запустится после того, как все зависимости точно загружены function_iz_ololo_js(); >); Другой подход. Если все скрипты грузятся с вашего сервера, можно собрать их в один файл и минифицировать. Понадобится, скорее всего, node.js и напр. модуль UglifyJS.
Редактировать скрипты будете по-отдельности, а потом запускать команду или маленький деплой скрипт, который их соберёт и сожмёт в единственный js файл, который и грузится обычным образом из странице. Можно даже сделать так, чтобы скрипт «следил» за папкой, где вы редактируете код, и автоматом собирал все после каждого сохранения.
Отслеживать
ответ дан 25 сен 2015 в 9:24
30.7k 4 4 золотых знака 48 48 серебряных знаков 86 86 бронзовых знаков
Скажите, а когда происходит document.ready. Когда Dom построен? Сразу вопрос Dom построен когда все скрипты и css подгрузились, или Dom может быт построен и до этого. При условии что все скрипты подгружаются синхронно
25 сен 2015 в 9:51
.ready – событие от jQuery, его нет в «чистом» javascript. Происходит когда и весь html страницы загружен и спарсен, и все зависимости – стили, картинки. DOM строится до этого – не дожидаясь картинок, стилей и скриптов. См. событие DOMContentLoaded – оно происходит, когда только html загрузился и распарсился, но не внешние зависимости.
25 сен 2015 в 10:29
function addScript(scripts) < for(var i = 0; i < scripts.length; i++) < var script = document.createElement('script'); script.src = '/path/to/scripts/' + scripts[i]; document.body.appendChild(script); >> addScript([ 'ololo.js', 'alala.js', ]); Отслеживать
ответ дан 25 сен 2015 в 9:04
63 8 8 бронзовых знаков
а как выполнить функцию, которая в ololo.js? addScript([‘ololo.js’]); ololoFunc(); вызовет ololoFunc(); когда ololo.js еще не загрузился
25 сен 2015 в 9:12
А кто нибудь использует Require.js.
25 сен 2015 в 9:12
Как угодно, можно или пользоваться специальными инструментами на клиенте типа Require.js, который умеет подтягивать зависимости при настройке и использовать групповое включение(именно поэтому его используют). Либо создать файл со списком нужных скриптов и подключить его один раз через require_once. Либо, при наличии разных скриптов на разных страниц создать специальный класс PHP, который сгенерирует прямо в разметку нужный код HTML.
А вот велосипеды с document.createElement(‘script’) выложенные к вопросу мне совсем не нравятся, так как смысла в них нет. С таким же успехом можно просто вставить в конец простую HTML разметку с нужными файлами.
Как использовать общий файл JS на разных страницах сайта?
Имею общий файл script.js , который собирается из нескольких файлов, предположим slide-index.js , slide-shop.js с помощью gulp.
Файл script.js подключаю на всех страницах сайта. Хорошая ли это практика? Это ещё один вопрос, с тем что многие функции внутри общего файла не нужны на разных страницах (привел аналогию со слайдерами только для главной страницы / страницы магазина).
Главная тема вопроса: Ненужные участки кода ( в т.ч. слайдер для магазина) ломает основной слайдер, на главной странице.
Функции обоих слайдеров называются по разному. Переменные на всякий случай тоже. Уже 10 раз все перепроверил, но JS жалуется, что на данной странице нет тех элементов, которые необходимы для работы.
Находясь на Главной странице, жалуется на:
Uncaught TypeError: can't access property "addEventListener", document.querySelector(. ) is nullЧто таких элементов нет на этой странице, и подвязываться некуда. Хорошо, просто закомментировал все слушатели, но тут следующая проблема — не видит slides2, оно и понятно, slides2 это слайд магазина.
Uncaught TypeError: can't access property "classList", slides2[(slideIndex2 - 1)] is undefinedИ тут начинается какой-то ступор. Если НЕ объединять скрипты в один, и подключать на разные страницы СВОИ скрипты, то всё работает хорошо. Сторонних библиотек Jquery и остальное не подключаю.
Как решить данную проблему?
- Вопрос задан более трёх лет назад
- 1469 просмотров
Как подключить несколько js файлов к html
Сейчас на сайте
Гостей: 21
| Гости: | |
 [Ваш IP] |
13:59:41 |
| /Статьи | |
| Yandex [Bot] |
13:59:05 |
| /Статьи | |
| Yandex [Bot] |
13:58:46 |
| /includes/user_fields/. | |
| 205.210.31.162 |
13:58:31 |
| / | |
| Google [Bot] |
13:58:15 |
| /Статьи | |
| Yandex [Bot] |
13:58:07 |
| /Статьи | |
| Yandex [Bot] |
13:57:50 |
| Поиск по тегам | |
| Yandex [Bot] |
13:57:27 |
| Поиск по тегам | |
| Yandex [Bot] |
13:57:26 |
| Поиск по тегам | |
| Yandex [Bot] |
13:57:23 |
| /Статьи | |
| 11 — не показано | |
Всего пользователей: 55
Новый пользователь: antalyaliali
Последние загрузки
JS- утилиты, фреймворки → Syntax Highlighter [1322]
PHP скрипты → Скрипт для проверки . [1098]
JS- утилиты, фреймворки → JQuery TimeAgo [1015]
JS- утилиты, фреймворки → JQuery Form [969]
JS- утилиты, фреймворки → JQuery Validation Pl. [4189]
Последние статьи
Безопасность → DKIM-подпись для почтового домена в I. [19111]
Собственное мнение → Page Rank и тИЦ ушли в небытие. [4730]
Собственное мнение → isset и empty — функции? Нет! [8314]
Программирование → PHP-Fusion: переход с mysql на mysqli. [9225]
Программирование → Перевод CMS PHP-Fusion с mysql_* на m. [6882]
PHP → Функция генерации нового названия
JavaScript, JQuery → Выделяем весь текст в поле textarea
CSS → Стиль ссылок в зависимости от на.
PHP → Функция хэширования пароля
.htaccess → Разрешаем любым файлам обрабатыв.
Как соединить все файлы JavaScript в один?
Приветствую. Стоит задача соединить все файлы JavaScript в один, так как в шаблоне блога их около 5 и целесообразно сделать один большой, чем 5 мелких. Подскажите пожалуйста как это выполнить.
Ответы на пост (22) Написать ответ
29.10.2012 11:48
Если файлы действительно мелкие, то целесообразнее размещать их в самом коде, а не присоединять их в качестве внешнего файла.
29.10.2012 12:05
как я знаю, код вроде должен быть наиболее чистым, без этих скриптов.
29.10.2012 12:09
google при небольшом объёме кода советует встраивать его в страницу.
29.10.2012 16:36
можно ссылку на на эту рекомендацию?
29.10.2012 16:47
Сейчас под рукой нет, вечером посмотрю в закладках
29.10.2012 17:24
Без закладок нашел:
https://developers.google.com/speed/docs/best-practices/rtt?hl=ru-RU
«For small bits of JavaScript code that shouldn’t be cached, consider inlining that JavaScript in the HTML page itself.»
29.10.2012 11:56
Целесообразнее их подключать отдельным файлом. Но действительно чтобы это был один файл.
Тегов по возможности вообще не должно быть на странице. Denismbox говорит не верно.
Объединить очень просто. берешь все эти файлы, и один за одним вставляешь все содержимое в какой нибудь один файл, и потом просто подключаешь этот один файл. Все скрипты которые будут в этом файле будут доступны на сайте.
29.10.2012 11:57
Тегов «SCRIPT»
29.10.2012 12:03
т.е я беру создаю один файл и всё содержимое других файлов вставляю последовательно в один?
Запуск файла осуществляю в файле header.php тегом
Я правильно понимаю? В этом случае никаких ошибок с наложением не будет?
29.10.2012 12:11
Боюсь, что это ваши домыслы на счёт «Тегов по возможности вообще не должно быть на странице.»
29.10.2012 13:41
Это не домыслы, это уменьшает время загрузки страницы. Вы можете посмотреть это в фаербаге если понимаете о чем речь.
29.10.2012 16:51
Шутите? не нужно использовать js? Или вы о том, что загрузка внешних файлов будет осуществляться быстрее, чем загрузка небольшого встроенного js кода?
Я предпочитаю пользоваться вот этим: https://developers.google.com/speed/pagespeed/insights
29.10.2012 17:40
Единоразовая загрузка одного файла JS , быстрее чем загрузка скриптов в теле страницы, и уж тем более быстрее подключения несколько JS файлов
29.10.2012 17:41
Если скрипт конечн не один а хотя бы больше 5.
29.10.2012 17:59
вот вам вопрос на засыпку: допустим на сайте есть слайдер использующий jquery, расположенный на главной странице и tooltype. Естественно, что тянется три скрипта, сама библиотека tolltype и скрипт слайдера. Так вот вопрос:»что будет загружаться быстрее три скрипта в одном файле или загрузка одного файла (jquery+tooltype) и встроенного кода слайдера, на главной странице?»
Напомню, что у ТС 5файлов.
29.10.2012 18:00
*сама библиотека, tolltype и скрипт слайдера
29.10.2012 18:14
Если один скрипт слайдера в коде, то может быть и второй вариант. А если скриптов на сайте несколько то однозначно все скрипты из одного файла более быстрый вариант.
30.10.2012 10:08
>А если скриптов на сайте несколько то однозначно все скрипты из одного файла более быстрый вариант. Гениально! Вот только, лишние скрипты вы предлагаете тянуть, а так да, гораздо быстрее)))
29.10.2012 12:21
Написал advcreative:
. берешь все эти файлы, и один за одним вставляешь все содержимое в какой нибудь один файл, и потом просто подключаешь этот один файл. Все скрипты которые будут в этом файле будут доступны на сайте.