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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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