В чем опасность включения одной и той же библиотеки JavaScript в два раза?

Один из webapps, с которым я работаю, состоит из многих частичных файлов 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 более одного раза плохая идея? Почему это только иногда вызывает проблемы?

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

function foobar() {
 // ...
}

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

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

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

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

<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>