В процессе работы мне пришлось столкнуться с интерестным плагином для jQuery. Плагин представляет собой календарь позволяющих добавлять события для определенных дат. Функционал реализуемый плагином, в какой мере, подобен google calendar.
Но в этой заметке речь пойдет не о плагине, а о способе получения событий.
Итак необходимо реализовать интерфейс установки массива событий как в виде масива данных, так и в виде URL на серверный обработчик данных. Дополнительным требованием будет возможность поддерживать возможность установки нескольких серверных обработчиков.
Итак первоначально определим обработчик определяющий тип передаваемых данных
var events = []; var eventSources = options.eventSources || []; if (options.events) eventSources.push(options.events);
В этом участке кода – options массив исходных настроек.
Следующей задачей является определение обработчика при вызове которого производится анализ/получение данных и их последующая обработка (преобразование, отрисовка и т. п.)
Итак для вызова этих действий будем использовать одну функцию
fetchEvents(renderEvents);
где renderEvents это callback функция обработчик полученных данных.
// // Fetch from ALL sources. Clear 'events' array and populate // function fetchEvents(callback) { events = []; if (eventSources.length > 0) { var queued = eventSources.length; // This is a function, code execute only when we call this function // Not now var sourceDone = function() { if (--queued == 0) { // stack of call ++ popLoading(); if (callback) { callback(events); } } }; // Stack of call -- pushLoading(); for (var i = 0; i < eventSources.length; i++) { fetchEventSource(eventSources[i], sourceDone); } } } // // methods for reporting loading state // var loadingLevel = 0; function pushLoading() { if (!loadingLevel++ && options.loading) { options.loading(true); } } function popLoading() { if (! --loadingLevel && options.loading) { options.loading(false); } }
Этот кусок кода проверяет на наличие источников событий, если источников более 0, создает функцию обработчик, увеличивает счетчик запусков получения данных. И для каждого источника вызывает функцию получения данных. Обратите внимание что в функцию fetchEventSource кроме текущего источника мы передаем, так же callback функцию.
Итак функция обработчик получения данных
// // Fetch from a particular source. Append to the 'events' array // function fetchEventSource(src, callback) { // This is callback function for ajax call var reportEvents = function(response) { for (var i = 0; i < responseEvents.length; i++) { // Translate recived events list to our need format } events = events.concat(responseEvents); if (callback) { callback(responseEvents); } }; if (typeof src == 'string') { // Type of source is url var params = {}; // Params for ajax call $.getJSON(src, params, reportEvents); } else if ($.isFunction(src)) { // Tupe of source is function src(start, end, reportEvents); } else { reportEvents(src); } }
Алгоритм работы функции очень простой. Мы определили функцию обработчик вызова данных — reportEvents. Далее, в зависимости от типа исходных данных (url, функция, масив) производим необходимые действия (отправка ajax запроса, прямой вызов обработчика). В дальнейшем функция обработчик вызывает первоначальный указанный callback
Приблизительная схема алгоритма
Похожие посты:
- None Found