Эта статья представляет собой краткое изложение некоторых знаний о требованиях, сопровождаемых примером анализа в многостраничных приложениях.
Структура каталога этого случая следующая:
APSJS API Три основных функция: определить (создать модуль), require (загрузочный модуль) и config (config)
1. Загрузите файл JS в файл HTML
Содержание Page1.html заключается в следующем:
<! Doctype html> <html> <head> <title> Page 1 </title> <script data-main = "scripts/page1" src = "scripts/lib/require.js"> </script> </head> <body> <a href = "page2
Содержание Page2.html заключается в следующем:
<! Doctype html> <html> <head> <title> Page 2 </title> <script data-main = "scripts/page2" src = "scripts/lib/require.js"> </script> </head> <body> <a href = "page1.html"> перейти к странице 1 </a> </body> </body> </body>
Расширение знаний:
Атрибут данных Main определяет основной модуль веб-программы, и этот файл сначала загружается requirejs. Поскольку имя суффикса файла по умолчанию - JS JS, Page1.js может быть сокращена как Page1
Правила приоритета корневого пути для загрузки файлов сценариев
При загрузке модуля с require () суффикс .js будет пропущен и будет искать из Baseurl; Если он имеет суффикс .js или начинается с "/" или содержит протокол URL (http/https), корень будет
Поиск в соответствии с вашими настройками пути
Конфигурация> Data-Main> BaseUrl по умолчанию
Если Data-Main и Config не установлены, BaseUrl по умолчанию-это каталог, на котором находится HTML-страница, которая требуется. JS находится.
Установите Data-Main, затем Baseurl-это каталог, в котором находится основной модуль (например, основным модулем в первом HTML является Page1.js, поэтому каталог, в котором он находится/сценарии-это корневый каталог)
Настройте конфигурацию, явно установите BaseUrl, а также установите отдельный путь для каждого модуля.
2. Настройте пути модулей и т. Д.
Используйте метод require.config () для настройки поведения загрузки модуля. В многостраничном приложении конфигурация может быть записана в общем файле, например, файл common.js в этом примере. Затем, после того, как каждая страница загружает текущую конфигурацию, необходимые модули загружаются в функцию обратного вызова.
Common.js Code заключается в следующем:
require.config ({baseurl: 'scripts/app', paths: {jquery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min'.'../lib/jquery']}});Расширение знаний:
Поддерживаемые элементы конфигурации:
baseurl:
Клетный путь поиска для всех модулей. Примечание. Когда загруженный файл JS (заканчивается .JS, начинается с "/", содержит протокол), BaseUrl не будет использоваться;
Пути:
Названия модулей Path Maps, которые не размещаются непосредственно под Baseurl. Начальная позиция при настройке пути относится к BaseUrl, если настройка пути не начинается с «/» или не содержит протокола URL;
ПРИМЕЧАНИЕ. Путь, определенный в путях, не может содержать суффиксов .js, потому что механизм разрешения пути автоматически добавит суффиксов .js; и путь загрузки может быть установлен несколько раз. Если загрузка из CDN не выполняется, локальный файл JS будет загружен;
Шим:
Настройка для модулей, которые не используют DEFINE () для объявления зависимостей;
Есть два параметра, на которые необходимо обратить внимание на:
(1) Экспорт значения (имя выходной переменной), разоблачение интерфейса метода
(2) массив DEPS, указывающий на зависимость модуля
нравиться:
require.config ({baseurl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {deps: ['underscore', 'Zepto'], экспорт: 'backbone'}, 'zepto.animate': ['Zepto']}}}}}}}}}});3. Модуль загрузка
Код page1.js выглядит следующим образом:
require (['./ common'], function (common) {require (['saypage1'], function (saypage1) {saypage1.hello ();});});Код page2.js выглядит следующим образом:
require (['./ common'], function (common) {require (['saypage2'], function (saypage2) {saypage2.hello ();});});Расширение знаний:
Функция require () принимает два параметра. Первый параметр - это массив, который представляет модуль, от которого он зависит; Второй параметр - это функция обратного вызова, и он будет вызван только после того, как все указанные в данный момент будут успешно загружены модули. Загруженный модуль может быть вызван в качестве параметра для функции обратного вызова.
Чтобы гарантировать, что необходимый модуль загружается только после завершения конфигурации, он предназначен в основном для правильного анализа пути и требует его в функции обратного вызова.
4. Определение модулей
Код в указанной странице1.js:
define (['jquery'], function ($) {function sayshi () {$ ('body'). append ('<h1> hello page1! </h1>');} return {hello: sayhi}});Расширение знаний:
Функция определения также принимает два параметра. Первый параметр представляет собой массив зависимых модулей, а второй параметр - функция обратного вызова.
Конечно, когда он наконец запущен, файлы JS должны быть объединены и сжаты. Вы можете использовать R.JS, который удобен и быстр ~
Выше приведено примером анализа многостраничного приложения requirejs, которое редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!