Монолитный спагетти-код • script.js, содержащий код всего сайта • множество глобальных объектов, нет инкапсуляции, конфликты • функциональность разбросана внутри script.js и inline-скриптов • местами inline-код Нет разделения сложной задачи на более простые — любая задача будет сложной. Нужна модульность. 2 / 28
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Монолитный спагетти-код
• script.js, содержащий код всего сайта• множество глобальных объектов, нет инкапсуляции,конфликты
• функциональность разбросана внутри script.js иinline-скриптов
• местами inline-код
Нет разделения сложной задачи на более простые — любаязадача будет сложной. Нужна модульность.
2 / 28
JavaScript модуль
(function () {var privVar
function privFunc() {}
return {pubFunc: function () {}
}})()
• реализация скрыта• нет глобальныхпеременных
• простой внешний фасаддля сложной внутреннейреализации
• отдельная единицазагрузки
3 / 28
Использование модулей
• модули зависят от других модулей• модули нужно загружать• и только когда это необходимо
Нужно стандартное решение:
• обеспечивающее загрузку по требованию• гарантирующую подгрузку зависимостей• делающее это эффективно
Стандартный способ определения модуля с учетомзависимостей и возможностью асинхронной загрузки.
define(id?, dependencies?, factory);
5 / 28
AMD: id
define(id?, dependencies?, factory);
• строковый идентификатор — имя модуля• необязателен, если не указан — идентификатор, которыйбыл использован для загрузки файла
• всегда абсолютный, относительные имена не допускаются
6 / 28
AMD: dependencies
define(id?, dependencies?, factory);
• массив идентификаторов зависимостей• зависимости разрешаются перед запуском factory• экземпляры зависимостей передаются в factory всоответствующих по порядку аргументах
exports.verb = function () {return require(’beta’).something();
}});
9 / 28
Require.js
http://requirejs.org
• одна из реализаций AMD (самая популярная)• базовый стандарт + различные дополнения• возможность статического анализа кода и последующаяоптимизация за счет сборки и компрессии модулей
10 / 28
Базовый API
Определение
define([’dep1’, ’dep2’
], function(dep1, dep2) {...
});
define({color: "black",size: "unisize"
});
Загрузка
require([’dep1’, ’dep2’
], function(dep1, dep2) {...
});
Конфигурирование
requirejs.config({baseUrl: ’/another/path’,...
});
11 / 28
Модули в Require.js• один файл — один модуль• объединение в один файл только оптимизатором• не надо указывать имен — этим занимается оптимизатор• модуль require — различные полезные утилиты• относительные пути — с помощью модуля require:
define(function(require) {var mod = require("./relative/name");
//The data object will be the API response// for the JSONP data call.console.log(data);
});
Предназначено для использования при начальнойинициализации приложения.
13 / 28
Конфигурированиеrequirejs.config(options)
basePath основной путь к загружаемым модулямpaths отдельные пути к различным префиксамshim внешние определения для не модульных скриптовmap псевдонимы для модулейconfig параметры конфигурации модулей
callback пользовательский обрабочик события загрузкиurlArgs дополнительные параметры для запроса
. . .
14 / 28
Структура модулей приложения
www/js/
app/ код приложенияlib/ библиотечные модули
lib1.jslib2.js
common.js код, общий для всех страницpage1.js код для отдельной страницыpage2.js
• минимальный API• отсутствие жесткой структуры• отсутствие глобального объекта приложения• соответствие базовым паттернам JavaScript• легко сконвертировать существующий код