Динамическая загрузка функций JS
Вообще говоря, когда нам нужно загрузить файл JS, мы будем использовать теги скрипта для его реализации, аналогично следующему коду:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" src = "example.js"> </script>
Однако использование тегов сценария для загрузки файлов JS напрямую имеет следующие недостатки:
1. Строгий заказ на чтение. Поскольку браузер считывает файлы JavaScript в том порядке, в котором <Script> появляется на веб -странице, а затем запускает их немедленно, когда несколько файлов зависят друг от друга, файл с наименьшей зависимостью должен быть размещен спереди, и файл с наибольшей зависимостью должен быть размещен в конце, в противном случае код сообщит о ошибке.
2. Проблемы с производительностью. Браузер использует «синхронный режим» для загрузки тега <croppl>, то есть страница будет «блокировать», ожидая загрузки файла JavaScript, а затем запустить последующий HTML -код. Когда существует несколько тегов <Script>, браузер не может читать одновременно. Один должен быть прочитал перед чтением другого, что приводит к большому расширению времени чтения, а ответ страницы медленный.
В настоящее время мы подумаем о динамической загрузке JS. Метод реализации динамической загрузки JS аналогичен следующему коду
Кода -копия выглядит следующим образом:
/*
*@desc: динамически добавить скрипт
*@param src: адрес загруженного файла JS
*@param обратный вызов: функция обратного вызова, которую необходимо вызвать после загрузки файла JS
*@Демо:
addDynamicStyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
Alert ('lab.js на сервере CTRIP Загрузка завершена')
});
*/
Функция addDynamicjs (src, обратный вызов) {
var script = document.createElement ("script");
script.setattribute ("type", "text/javascript");
script.src = src [i];
script.charset = 'gb2312';
document.body.appendchild (script);
if (обратный вызов! = не определен) {
script.onload = function () {
перезвонить();
}
}
}
Это не вызовет блокировку страницы, но это вызовет другую проблему: файл JavaScript, загруженный таким образом, не находится в исходной структуре DOM, поэтому функция обратного вызова, указанную в Dom-Udection (Domcontentload) событии и событие Window.Onload для него недействительна.
В настоящее время мы подумаем об использовании некоторых библиотек внешней функции для эффективного управления проблемами с загрузкой JS.
Давайте перейдем к основной теме и поговорим о lab.js
Lab.js
Если мы используем традиционные методы для загрузки JS, код, который мы пишем, обычно будет иметь стиль, показанный в следующем коде.
Кода -копия выглядит следующим образом:
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javascript">
initaaaa ();
initBbb ();
</script>
<script src = "ccc.js"> </script>
<script type = "text/javascript">
initCcc ();
</script>
Если мы используем Lab.js, для реализации вышеуказанной функции кода мы используем следующий метод
Кода -копия выглядит следующим образом:
<!-Загрузите библиотеку Lab.js First->
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javascript">
$ Lab
.script ("aaa.js"). Wait () // Метод .wait () без параметров означает запуск файла JavaScript, только что загруженный немедленно
.script ("bbb-a.js")
.script ("bbb-b.js") // Загрузите aaa.js bbb-a.js bbb-b.js, а затем выполнить initaaa initbbb
.wait (function () {// метод .wait () с параметрами также немедленно запускает файл JavaScript, загруженный только сейчас, но также запускает функцию, указанную в параметрах.
initaaaa ();
initBbb ();
})
.script ("ccc.js") // Загрузите CCC.JS и выполните метод initCCC после загрузки CCC.JS
.wait (function () {
initCcc ();
});
</script>
Несколько лабораторных сетей можно работать одновременно, но они полностью независимы и нет никаких отношений. Если вы хотите убедиться, что файл JavaScript запускается после другого файла, вы можете написать их только в той же операции цепи. Только когда определенные сценарии полностью не связаны, вы должны рассмотреть возможность разделения их на разные лабораторные сети, указывая на то, что между ними нет корреляции.
Общие примеры использования
Кода -копия выглядит следующим образом:
$ Lab
.script ("script1.js") // script1, script2 и script3 не зависят друг от друга и могут быть выполнены в любом порядке
.script ("script2.js")
.script ("script3.js")
.wait (function () {
оповещение («Сценарии 1-3 загружаются!»);
})
.script ("script4.js") // Вы должны ждать Script1.js, script2.js, script3.js, который будет выполнен до выполнения
.wait (function () {script4func ();});
Кода -копия выглядит следующим образом:
$ Lab
.script ("script.js")
.script ({src: "script1.js", type: "text/javascript"})
.script (["script1.js", "script2.js", "script3.js"])
.script (function () {
// Предполагая `_IS_IE`, определяемое страницей хоста как верно в IE и FALSE в других браузерах
if (_is_ie) {
вернуть "IE.JS"; // только если в т.е. этот сценарий будет загружен
}
еще {
вернуть ноль; // если не в т.е., этот вызов сценария будет эффективно игнорироваться
}
})
Просмотреть lab.js Загрузка информации в консоли
Если вы хотите отладить или просмотреть каждую информацию о загрузке JS на консоли, вы можете использовать метод $ lab.setglobaldefaults. Для получения подробной информации см. Пример кода.
Кода -копия выглядит следующим образом:
<!-Загрузите лабораторную библиотеку CTRIP. Сначала и загрузите его онлайн->
<script type = "text/javascript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </script>
<script type = "text/javascript">
$ Lab.setglobaldefaults ({Debug: true}) // Открыть отладку
$ Lab
// первая цепочка исполнения
.script ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// вторая цепочка выполнения
.wait (function () {
//console.log(window.$)
//console.log(window._)
})
// Третья цепочка исполнения
.script ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
// Четвертая цепочка исполнения
.wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// пятая цепочка исполнения
.script ('js/aaa.js')
.script ('js/bbb.js')
// шестая цепочка исполнения
.wait (function () {
// console.log (module1function)
// console.log (module2function)
})
</script>
В настоящее время откройте консоль и посмотрите на информацию, как показано на следующем рисунке:
Я считаю, что вы будете поражены функцией отладки Lab.js, когда вы видите это. На самом деле, Lab.js действительно довольно мощный, и я просто понимаю некоторые из его простых функций. Запишите это сначала и поделитесь с этим. Это также для удобства себя в будущем.