Разработка больших сайтов Сумин Андрей Разработчик интерфейсов info@jsx.ru. - презентация

1 Разработка больших сайтов Сумин Андрей Разработчик интерфейсов

2 Имеется файл на одном из серверных языков calendar.extension, который должен: вставлять календарь на страницу; обеспечить подключение необходимых JavaScript файлов для работы календаря; не позволять нескольких подключений одного файла.

3 Для каждого проекта и каждого серверного языка реализовать алгоритм подключения JavaScript файлов. Часто необходимо участие JavaScript программиста для подключения JavaScript файлов (порядок подключения, зависимости).

4 Возможное решение Реализовать алгоритм на JavaScript. Все серверные языки генерируют одинаковый HTML код, который в браузере представляется календарем.

5 Необходимо реализовать На сервере: обозначить часть DOM дерева как компонент, указать тип компонента - календарь. На клиенте: найти обозначенные части DOM дерева; определить тип компонента; загрузить все необходимые JavaScript файлы; создать компонент.

6 На сервере Обозначить как компонент - особенное имя CSS класса. Указать тип - календарь: сформированным CSS классом; в атрибуте; любым удобным способом.

7 На сервере (пример) отметка узла как компонента указание типа компонента

8 На клиенте Компоненты находятся CSS селектором: var components = cssRule(.components); Вызов атрибута onclick вернет объект, который стоит после return: var Component = components[index].onclick(); Свойство type вернет тип компонента: var type = Component.type;

9 Загрузка JavaScript файлов Файлы должны иметь возможность: задать список зависимостей; получать уведомление о загрузке всех нужных ему файлов; сигнализировать об окончании загрузки и инициализации.

10 require( [file1, file2, …], function(){ // инициализация loaded(file); } ) Функция выполнится, когда все файлы из массива вызовут метод loaded. Требования Уведомление Сигнализация

11 Функция require Функция require должна дождаться вызовов всех loaded из списка и вызвать переданную функцию function. Если файл однажды загрузился или в процессе загрузки, не следует загружать его заново.

12 DOM узел найден по имени класса. Выполнение onclick идентифицировало его как календарь. Загрузился файл календаря и все файлы, от которых он зависит. Инициализируем компонент: window[type].init( /* type из атрибута onclick */ node, /* узел с классом «component» */ );

13 На сервере не нужно заботиться о подключении JavaScript файлов. На клиенте подключаются только нужные файлы. Файлы подключаются в нужной последовательности.

14 На заметку Удобно: подключить один файл, дающий возможность загружать файлы; вычислить и сохранить его путь в алиас; давать всем файлам имена, разворачивающиеся в пути к файлам; в именах файлов использовать алиас.

15 На заметку (пример) Подключаем файл на странице: Тогда строка вида require( [{core}.Calendar] ); превратится в path/Calendar.js

16 Спасибо за внимание.