Просмотр полной версии : Как подгрузить код JS динамически?
zhurchik
01.02.2015, 20:14
Приветствую Вас Уважаемые форумчане!
Многие из Вас неоднократно помогали мне, надеюсь, что и сейчас вы не пройдете мимо)))
Я столкнулся со следующей проблемой:
Сайт который я пишу работает полностью динамически (без полной перезагрузки страницы), так вот, все запрошенное содержимое вставляется в страницу через свойство innerHTML, проблема в том, что это свойство не предназначено для того, чтобы через него вставлять JS код.
Я нашел выход, а именно:
Тот JS код, который подключается через внешний файл (к примеру file.js), я вырезаю из полученных данных и подключаю через createElement, остальное же содержимое добавляю через innerHTML.
Казалось бы проблема решена, но есть одно НО... Подгружаемые данные содержат не только внешние файлы JS, но и отдельный код JS, который вышеописанным способом не подключить.
Какие могут быть решения? Может быть, вырезать весь код из тега <script></scrip> и добавить через eval?
Какие могут быть решения?
выкинуть костыли и использовать фреймворк для построения одностраничных веб приложений, потому что
Сайт который я пишу работает полностью динамически (без полной перезагрузки страницы)
это, по описанию, похоже именно на одностраничное веб приложение.
А вот это:
так вот, все запрошенное содержимое вставляется в страницу через свойство innerHTML, проблема в том, что это свойство не предназначено для того, чтобы через него вставлять JS код.
похоже на то, что вы пишете фреймворк для одностраничника заново, с нуля. не надо :)
zhurchik
01.02.2015, 20:37
melky,
Нет, это не одностраничка.
Я использую хистори API для того, чтобы у пользователя создавалось впечатление будто бы он перемещается физически, ко всему этому, если отключен JS то все равно все ссылки работают (сделано это для поисковиков). Сайт имеет много разделов, личную переписку, чат, форму и т.д.
Вообще, 100% динамику я реализовал для того, чтобы можно было слушать музыку, перемещаться по сайту и слушать музыку. Да и вообще удобно.
Я не использую ни фрейворки, ни библиотеки в проекте, сайт полностью самописный!
Если Вы считаете, что мой способ подключать JS код - костыль, тогда что не костыль? По какому принципу эти фрейворки работают в этом плане?
Если Вы считаете, что мой способ подключать JS код - костыль, тогда что не костыль? По какому принципу эти фрейворки работают в этом плане?
JS код не грузится динамически через HTML. у них он загружается сразу весь, через обычный <script> в HTML
zhurchik
01.02.2015, 20:56
melky,
У меня код тоже не грузится через innerHTML! Перед тем как вставить данные в innerHTML я вырезаю оттуда теги <script> а из них вырезаю полный путь до js файла и затем вставляю через createElement.
Я не хочу сразу подключать все файлы через в заголовке <head> т.к. какие то файлы отвечают за галерею, какие то за плеер, а пользователь зайдя на сайта может ни разу ни галереею не открыть, ни плеер, а зачем тогда лишний код JS Загружать?
Так и на сервер меньше нагрузка и на клиентский ПК и трафик меньше.
Проблема описанная в теле темы ещё актуальна)))
Казалось бы проблема решена, но есть одно НО... Подгружаемые данные содержат не только внешние файлы JS, но и отдельный код JS, который вышеописанным способом не подключить.
Отчего же... См. второй способ.
http://www.manhunter.ru/webmaster/289_dinamicheskoe_dobavlenie_skriptov_na_web_stran icu.html
zhurchik
02.02.2015, 00:15
ksa,
То-есть, это нормально когда в созданный через createElement тег script вписываются код JS строкой? Это чем-то похоже на eval.
Вообще такое приемлемо или это костыль?
Vlasenko Fedor
02.02.2015, 00:48
Мой маленький велосипед (http://jsfiddle.net/vlasenkofedor/5pDXf/) :)
Вообще такое приемлемо или это костыль?
Для динамической подгрузки имеено js-текста больше ничего нет вообще. :no:
Т.ч. как не назови, это можно сделать только такими способами... :)
zhurchik
02.02.2015, 10:58
Poznakomlus,
Разве задавать атрибуты в тег "<script>", типа "data-*" и прочих, разрешено?
Какая-то часть кода пригодилась, спасибо!
zhurchik
02.02.2015, 10:59
ksa,
Так ведь для этого и был придуман eval, не так ли?
Почему вы бы отдали предпочтение именно способу на который скинули ссылку, а не eval'у?
Так ведь для этого и был придуман eval, не так ли?
Я не создатель JS... Почем мне знать для чего он придуман. :D
Почему вы бы отдали предпочтение именно способу на который скинули ссылку, а не eval'у?
За пример с eval'ом мне тут заминусовали карму... С тех пор я его нигде не показываю. :lol:
zhurchik
02.02.2015, 11:23
Пример один из миллиона:
Пользователь вошел на сайт прочитать почту, но при загрузки страницы грузится весь код JS, плеер, галерея и прочий прочий, тот, то-есть, грузятся те функции которые пользователю не нужны. Вопрос? Зачем? Зачем грузить лишние данные. Как по мне, целесообразнее по мере необходимого загружать те или иные данные.
zhurchik
02.02.2015, 11:24
ksa,
Я бы тоже вас заминусовал, если бы вы в eval помещали пользовательские данные, но ведь речь идет о системных данных.
Я бы тоже вас заминусовал
Да утопись ты в луже... :lol:
zhurchik, по теме - вкратце - eval и не парься. остальные способы так или иначе выполняют строку кода (а это всё равно eval)
единственное - выполнять код нужно в глобальной области видимости
Почему вы бы отдали предпочтение именно способу на который скинули ссылку, а не eval'у?
если я не ошибаюсь, то тогда будет легче найти код в отладчике
Пользователь вошел на сайт прочитать почту, но при загрузки страницы грузится весь код JS, плеер, галерея и прочий прочий, тот, то-есть, грузятся те функции которые пользователю не нужны. Вопрос? Зачем? Зачем грузить лишние данные. Как по мне, целесообразнее по мере необходимого загружать те или иные данные.
хм. есть принцип - YAGNI. мне кажется, что вы зря пытаетесь сэкономить трафик на скриптах и для этого специально сидите и ломаете голову.
скрипты разве столько весят?
если не затруднит, запустите анализ на паре страниц сайта https://www.site24x7.com/web-page-analyzer.html меня интересует конкретно эта диаграммка (http://i.imgur.com/SxHHsD5.png)
zhurchik
02.02.2015, 12:16
melky,
Проблема не только в трафике, а в запросах к серверу. То ли браузер осуществит один запрос для получения JS кода, то ли 3-4, а это формирование заголовков, ответ от сервера и т.д. Конечно можно все пихнуть в один файл, но тогда тонны кода будут в одном файле, а это не удобно, ко всему этому, какая то часть кода будет внедрена в моб. версию и эту часть кода в любом случае нужно держать в отдельном файле, а не в скопе.
И еще, браузер при получении кода JS осуществлять лексический анализ.... А это опять же нагрузка на клиентский ПК.
Я хочу написать проект, который будет ближе к идеалу)))
zhurchik
02.02.2015, 12:18
melky,
То бишь, я могу легко подключить код (строковой код) через createElement("script") и это в рамках приемлемого и будет везде работать?
Проблема не только в трафике, а в запросах к серверу. То ли браузер осуществит один запрос для получения JS кода, то ли 3-4, а это формирование заголовков, ответ от сервера и т.д. Конечно можно все пихнуть в один файл
в HTTP/2.0 можно будет грузить 3-4 файла и к тормозам это не приведет. ну да ладно. но сейчас - да, нужно соединять в один файл... и сжимать через минификатор и GZIP
но тогда тонны кода будут в одном файле, а это не удобно, ко всему этому, какая то часть кода будет внедрена в моб. версию и эту часть кода в любом случае нужно держать в отдельном файле, а не в скопе.
есть прямая потребность в мобильной версии? обычно все решается отзывчивой версткой
И еще, браузер при получении кода JS осуществлять лексический анализ.... А это опять же нагрузка на клиентский ПК.
мой скрипт весит 3 мб (несжатый, версия для разработки) и выполняется 344.160 ms
javascript довольно быстрая штука.
Я хочу написать проект, который будет ближе к идеалу)))
кто же так не хочет)
melky,
То бишь, я могу легко подключить код (строковой код) через createElement("script") и это в рамках приемлемого и будет везде работать?
угу
ты придумал с нуля модули (ака завелосипедил), а они примерно так и работают
если интересно побольше узнать про модули - советую почитать про AMD и RequireJS
zhurchik
02.02.2015, 12:58
есть прямая потребность в мобильной версии? обычно все решается отзывчивой версткой
адаптивная верстка будет, но это от ПК до планшета, а для мобильных будет другая верстка и кода меньше, в общем, будет урезанный функционал.
Извините, может не в тему, но на мой взгляд нет удобнее инструмента для получения скриптов и зависимостей чем require.js
Извините, может не в тему, но на мой взгляд нет удобнее инструмента для получения скриптов и зависимостей чем require.js
а вы\ты commonjs (browserify\webpack) пробовал? я просто тоже так когда-то думал)
а вы\ты commonjs (browserify\webpack) пробовал? я просто тоже так когда-то думал)
melky,
Спасибо, почитаю. Честно говоря не пробовал. Мне очень понравился TypeScript а он прекрасно работает с require (с другими не пробовал).
ЗЫ: Простите за оффтоп
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot