В чем опасность включения одной и той же библиотеки JavaScript дважды? - PullRequest
42 голосов
/ 03 февраля 2011

Один из веб-приложений, в которых я работаю, состоит из множества частичных HTML-файлов.Если частичному требуется библиотека JavaScript, такая как YUI, библиотека YUI включается в частичную.

Когда во время выполнения комбинируются партиалы, полученный HTML часто включает библиотеку YUI несколько раз.

<html>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
... 
<script type="text/javascript" src="/js/yahoo/yahoo-min.js"></script>
...
</html>

Я несколько раз видел странное поведение при включении jQuery, особенно при использовании AJAX,Почему, в частности, включение одной и той же библиотеки JavaScript не раз является плохой идеей?Почему это только иногда вызывает проблемы?

Ответы [ 4 ]

35 голосов
/ 03 февраля 2011

В зависимости от библиотеки, включение ее более одного раза может привести к нежелательным эффектам.

Думайте об этом так, если у вас есть скрипт, который связывает событие нажатия с кнопкой, и вы включаете этот скрипт дважды, эти действия будут выполняться дважды при нажатии кнопки.

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

11 голосов
/ 03 февраля 2011

Вы должны использовать подход, который я изучил, изучая источник HTML5 Boilerplate :

<script>
    !window.YAHOO && document.write(
        unescape('%3Cscript src="/js/yahoo/yahoo-min.js"%3E%3C/script%3E')
    );
</script>

Я не использую YUI, поэтому замените !window.YAHOO на тот, который использует глобальный YUI.

Этот подход будет загружать библиотеку, только если она еще не существует в глобальной области действия.

6 голосов
/ 03 февраля 2011

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

2 голосов
/ 12 января 2017

Каждый раз выполняется .Зависит от файла, это может быть нежелательно.Например, если файл содержит alert("hello"), он будет отображать окно предупреждения при каждой ссылке на файл, и вы, возможно, хотели, чтобы он отображался только один раз.

Запись безопасных библиотек:

Вот как вы можете обойти это, если хотите только одноразовое исполнение.Допустим, вы пишете библиотеку foobar.js, которая экспортирует один глобальный объект, foobar:

function foobar() {
 // ...
}

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

window.foobar = window.foobar || function foobar() {
  // ...
};

Использование небезопасных библиотек:

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

<script>(function() {
  if (! window.foobar) {
    var script = document.createElement('script');
    script.async = true; // remove this if you don't want the script to be async
    script.src = 'foobar.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    window.foobar = true;
 }
}();</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...