jQuery getScript() vs document.метод createElement('скрипт')
предполагая, что оба этих подхода правильно загружают скрипт и что я жду соответствующего количества времени, прежде чем использовать скрипт (и/или использовать обратный вызов), каковы основные различия между этими подходами.
примечание: Я понимаю, что первый использует jQuery (который имеет больший размер, и т. д.). Что меня действительно интересует, так это последствия этих подходов. Помещает ли один сценарий в другую область, чем другой? Так далее.
jQuery:
function loadScript() {
$.getScript('http://www.mydomain/myscript.js');
}
добавление к телу:
function loadScript() {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
document.body.appendChild(script);
}
добавление к head:
function loadScript() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.mydomain/myscript.js';
script.async = true;
head.appendChild(script);
}
3 ответов
jQuery добавляет script
элемент head
если он присутствует, или document
иным элементом. Под капотом!--4-->код аналогичен. Конечный результат будет одинаковым:оба подхода выполняют новый код в глобальной области.
в документации к методу Jquery говорится:
загрузите файл JavaScript с сервера с помощью запроса GET HTTP,затем выполните его.
Это означает, что импортированный javascript будет вызван straigt после успешной загрузки.
добавление к head: это означает, что браузер добавляет тег-скрипт в качестве последнего дочернего элемента и выполняет содержимое (то же самое, если вы добавляете тег manuelly в конце тега head). Добавление к телу: It означает, что браузер добавляет тег-скрипт в качестве последнего дочернего элемента тега body и выполняет это содержимое (то же самое, если вы добавляете тег manuelly в конце тега body).
стоит отметить, что jQuery getScript
функция отключает кэширование по умолчанию, что означает, что браузеры будут загружать скрипт каждый раз, когда запрашивается страница (см. предыдущий ответ здесь). Ваш должна использовать кэширование.