Большинство проектов используют модульную разработку, что требуется, что является моделью для разработки модулей AMD, поэтому необходимо изучить ее. Используя требования, шаг за шагом, чтобы написать демоверсии, мы можем изучить общий процесс разработки потребностей и некоторые чувства использования потребностей самостоятельно.
AMD: Механизм асинхронной загрузки кода JavaScript на основе модулей. Он рекомендует разработчикам инкапсулировать код JavaScript в модули, а зависимость от глобальных объектов становится зависимостью от других модулей, не объявляя множество глобальных переменных. Установите зависимости отдельных модулей посредством задержки и загрузки по требованию. Преимущества модульного кода JavaScript очевидны. Свободная связь различных функциональных компонентов может значительно улучшить повторное использование и обслуживание кода. Эта неблокирующая одновременная быстрое загрузка кода JavaScript позволяет другим элементам пользовательского интерфейса на веб-странице, которые не полагаются на код JavaScript, такие как изображения, CSS и другие узлы DOM, сначала загружается, веб-страница загружается быстрее, и пользователи также получают лучший опыт.
1. Скачать Dequiejs
Перед модульной разработкой с Readiejs нам нужно что -то подготовить. Это должно быть загрузка файла require.js, хахаха, потому что он был разработан на основе его.
2. Создайте HTML -файл
После создания HTML -файла импорт requirejs должен использовать тег <script>, в этом нет никаких сомнений. Тогда в этом теге есть атрибут данных. Его функция состоит в том, чтобы выступать в качестве входа и выхода, то есть после загрузки requirejs, введите из атрибута данных.
Например, следующее:
<! Doctype html> <head> <title> Tress </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <!-Это требуется, данные данных используется в качестве модуля записи, есть js/main-> <script data-main = "js/js/js/js/js/js/js/js/js/js/js/main" js/main " src = "js/require.js"> </script> </body> </html>
Когда я загружаю js/require.js, тогда я выполняю файл JS/Main от JS. Main также файл JS. Мы можем опустить его суффикс .JS, и это добавит его.
3. Data-Main
После того, как программа выполняет <script data-main = 'js/main' src = 'js/require.js'> </script>, введите main.js через Data-main и выполнить main.js. Так что же в Main.js?
Пожалуйста, смотрите код:
/* require.config выполняет BaseUrl как 'JS', BaseUrl ссылается на корневой каталог файла модуля, который может быть абсолютным путем или относительным путем*/require.config ({baseurl: 'js', paths: {jquery: 'jquery-1.8.min'}) анонимная функция, такая как обезьяна-> mk*/require (['monkey'], function (mk) {mk.init ();});Из приведенного выше кода вы можете видеть, что main.js содержит два модуля: require.config и требуется.
Функция require.config заключается в настройке некоторых параметров requirejs, а затем обратиться к нему публично.
Например, функция вышеупомянутого Baseurl заключается в том, чтобы использовать его в качестве базового пути и поиск файлов по этому пути. Я помещаю все файлы .js в папку JS. Поэтому после настройки этого свойства последующие файлы будут искать контент в пути JS.
следующее:
require (['monkey'], function (monkey) {monkey.init ();});Когда это относится к обезьянам, это эталонная обезьяна, а не JS/Monkey.
Какова роль путей? Он должен заменить некоторые обычно используемые файлы JS на общие имена. Например, jQuery-1.8.2.min.js, мы не можем писать это каждый раз, когда называем это, поэтому для удобства мы заменяем jQuery-1.8.2.min.js. В будущем мы можем использовать jQuery напрямую, что быстро и удобно.
Хорошо, требуется. Конфиг в основном знаком с ним. Одним словом, его функция заключается в настройке requirejs.
А как насчет необходимости?
Функция Требуется выполнить. Например, здесь мне нужна обезьяна. Если есть возвратное значение, то мы можем выполнить соответствующую обработку MK.
Эй, что внутри обезьяны?
Посмотрим:
/* Определить параметр - это анонимная функция, которая возвращает объект*/define (['jQuery'], function ($) {var init = function () {console.log ($. Browser);}; return {init: init};});определять! Его функция заключается в определении модуля JS для использования другими модулями или потребностями. Его метод обращения к другим модулям JS похож на метод потребности. Он вводит требуемые файлы JS, а затем соответствует параметрам один за другим. Важно отметить, что другие модули не могут получить доступ к методам или переменным, определенным в определении, поэтому, если вы хотите, чтобы другие модули имели доступ к ним, вы можете выбрасывать соответствующий метод (возврат) объекты или функции. Здесь я возвращаю, - это объект, который предоставляет инициировать для вызова других модулей.