По мере того, как веб -сайт постепенно становится богаче, JS на веб -страницах становится все более и более сложным и раздутым. Оригинальный метод импорта файлов JS через теги скрипта больше не может соответствовать текущей модели разработки в Интернете. Нам нужна серия сложных потребностей, таких как сотрудничество команды, повторное использование модуля, модульные тестирование и т. Д.
Requirejs - очень маленькая структура загрузки модуля JavaScript, которая является одним из лучших реализатора спецификации AMD. Последняя версия requirejs составляет всего 14 тыс. После сжатия, которая очень легкая. Он также может работать в сочетании с другими структурами, и использование requirejs, несомненно, улучшит качество вашего фронтального кода.
Какие преимущества могут потребовать
Официальное описание требований:
Requirejs - это файл JavaScript и загрузчик модуля. Он оптимизирован для использования в браузере, но его можно использовать в других средах JavaScript, таких как Rhino и Node. Использование модульного загрузчика сценария, подобного требованиям, улучшит скорость и качество вашего кода.
Общее значение:
В браузере его можно использовать в качестве загрузчика модуля для файлов JS, или его можно использовать в средах узлов и носорогов, Балабала ... Этот отрывок описывает основную функцию requirejs «модульная нагрузка». Что такое модульная нагрузка? Мы объясним один за другим на следующей странице
Давайте сначала рассмотрим общий сценарий и объясним, как использовать requirejs с помощью примеров
Нормальный метод письма
index.html:
<! Doctype html> <html> <head> <script type = "text/javascript" src = "a.js"> </script> </head> <body> <pan> body </span> </body> </html>
A.JS:
function fun1 () {alert ("это работает");} fun1 ();Может вы предпочитаете писать это
(function () {function fun1 () {alert ("it работает");} fun1 ();}) ()Второй метод использует область блока, чтобы объявить эту функцию, предотвращая загрязнение глобальных переменных. Суть остается той же. При запуске двух вышеупомянутых примеров я не знаю, заметили ли вы, что при выполнении оповещения содержимое HTML пустое, то есть <pan> body </span> не отображается, и оно появляется только после нажатия подтверждения. Это результат JS, блокирующего браузер.
Требуется метод написания
Конечно, во -первых, вам нужно перейти на веб -сайт readyJS, чтобы загрузить JS -> requirejs.rog
index.html:
<! Doctype html> <html> <head> <script type = "text/javascript" src = "require.js"> </script> <script type = "text/javascript"> require (["a"]); </script> </head> <body> <pan> body </span> </body> </html>
A.JS:
define (function () {function fun1 () {alert ("it работает");} fun1 ();})Браузер предлагает «он работает», что означает, что он работает правильно, но есть небольшая разница. На этот раз браузер не является пустым, и тело появилось на странице. До сих пор мы можем знать, что requirejs имеет следующие преимущества:
1. Предотвратить загрузку JS от блокировки рендеринга страницы
2. Загрузите JS с использованием программных вызовов, чтобы предотвратить следующие уродливые сцены
<script type = "text/javascript" src = "a.js"> </script> <script type = "text/javascript" src = "b.js"> </script> <script type = "text/javascript" src = "c.js"> </script> <script type = "javascript" src = "C. type = "text/javascript" src = "d.js"> </script> <script type = "text/javascript" src = "e.js"> </script> <script type = "text/javascript" src = "f.js"> </script> <script type = "javascript" src = "F.Js" </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </javascript "" type="text/javascript" src="g.js"></script><script type="text/javascript" src="h.js"></script><script type="text/javascript" src="i.js"></script><script type="text/javascript" src="j.js"></script>
Выше всего об этой статье. Я надеюсь, что всем будет полезно понять необходимый модульный инструмент.