Обработчик сообщений на JavaScript при участии jQuery
Представим себе web-приложение, которое взаимодействует с серверной частью посредством сообщений в формате JSON. Ответные сообщения, так же в виде кортежей, обернутых в JSON, передаются на сторону клиента, где декодируются и, в зависимости от содержимого, происходит то или иное действие.
В возвращаемом со стороны сервера кортеже (точнее, списке кортежей, но это на данный момент не играет роли) присутствует идентификатор события в виде поля action. Самый простой и незатейливый способ написать обработчик сообщений при помощи switch/case:
1 2 3 4 5 6 7 8 9 10 | $.vico.dispatchMessage = function(p) { var res = true; switch(p.action) { case('noauth') : { ... break; } } return res; } |
Разумеется, этот способ хоть и наглядный, но не самый приятный для чтения, поскольку предполагает простыню кода в случае наличия более 10 типов сообщений. Поэтому я запросил совета в твиттере, а пока реализовал более простую схему при помощи eval.
1 2 3 4 5 6 7 8 | $.vico.dispatchMessage = function(p) { var re = new RegExp('^[a-z0-9]+$', "g"); if(re.test(p.action)) { eval("var fn = $.vico.cb_" + p.action + ";"); if(fn) return fn(p); else return false; } else return false; } |
В этом случае для написания обработчика нового события потребуется только добавление новой, специально именованной функции. Поскольку eval потенциально ненадежное средство, кодификатор сообщения проверяется при помощи регулярного выражения (никому веры нет).
Тут в твиттере опытные товарищи напомнили про вариант с массивом, когда обработчик берется из таблички соответствия:
1 2 3 4 | var m_cb = new Array(); m_cb["noauth"] = $.vico.cbNoAuth; if(m_cb[p.action]) m_cb[p.action](p); |
Этот вариант не использует потенциально опасный eval, однако требует, чтобы в процессе написания кода обработчика изменения производились в двух точках – в массиве и в самой декларации функции.
Чтобы еще больше усложнить эту процедуру, было решено написать небольшой «класс», позволяющий добавлять/убирать из массива произвольное количество обработчиков события, что позволяет в дальнейшем расширять систему не только вглубь, но и в ширь. 
Код выглядит примерно следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | (function($) { $.AEvents = function() { $.AEvents.map = new Array(); }, $.AEvents.map = null, $.AEvents.bind = function(event, fn) { if($.isArray($.AEvents.map[event])) { if($.inArray(fn, $.AEvents.map[event]) == -1) { $.AEvents.map[event].push(fn); } } else { $.AEvents.map[event] = new Array(); $.AEvents.map[event].push(fn); } }, $.AEvents.detach = function(event, fn) { if($.isArray($.AEvents.map[event])) { var t = new Array(); $($.AEvents.map[event]).each(function(i, v) { if(v != fn) t.push(v); }) $.AEvents.map[event] = t; } }, $.AEvents.pass = function(event, data) { var r = new Array(); if($.AEvents.map) $($.AEvents.map[event]).each(function(i, v) { r.push(v(data)); }); return r; } })(jQuery); |
Использовать его тоже несложно:
1 2 3 4 5 6 7 8 9 10 11 | $.AEvents(); $.AEvents.bind("noauth", $.vico.noAuth); $.AEvents.bind("authok", $.vico.authPassed); $.vico.dispatchMessage = function(p) { var r = $.AEvents.pass(p.action, p); if(r && r.length > 0) return true; else return false; } |
Разумеется, следующий шаг – привнесение в этот класс функционала обмена сообщениями с сервером. В итоге получается что-то (не побоюсь громкого слова) отдаленно напоминающее gen_server в Erlang.
Как сделать гаджет для Google Wave
Google Wave – новый инновационный сервис Google, призванный заменить одновременно электронную почту, чат и средство групповых обсуждений. В основе лежат волны (wave) и вейвлеты (wavelet), представляющие собой ветви дискуссии, посвященные какой-либо теме. Сообщения, или всплески (blip), могут создаваться и редактироваться в рамках волн как участниками обсуждения, так и роботами, следящими за дискуссией и дополняющие ее данными (например, автоматическим переводом фраз между языками). Помимо текста во всплески можно добавлять гаджеты – объекты, реализующие дополнительную функциональность, например, систему голосования, интерактивную карту и т.п. Изготовлением гаджетов и займемся в нашей статье.
Для начала рекомендую посетить описание Google Wave API – это полезное чтение, особенно если вы решили, что возможностей гаджетов недостаточно и нужно написать робота. В отличие от последних, гаджеты пишутся на традиционной для клиентской части вэба связке HTML + CSS + JS и представляют собой некий контейнер с данными, помещенный во всплеск через iframe.
Тонкости AJAX
В общем случае с AJAX-запросами надо осторожно. Потому как
- активные клиент-сайд элементы надо не забывать синхронизировать (это касается, в частности, FCKEditor-а), иначе есть риск получить «протухшие» данные при сериализации формы перед запросом;
- данные, объем которых не ограничен на стороне клиента (например, в том же FCKEditor вследствие большого количества разметки может оказаться действительно много байт), лучше всего отправлять методом POST. Делается это просто – $.ajaxSetup( { type: «POST» } ); (если остальной код использует настройки по умолчанию – по завершению запроса лучше сделать обратную операцию), при этом стоит также помнить, что поле типа TEXT в mySQL имеет ограничение в 64Кбайта.
Все это пришлось пройти на стадии внедрения шаблона документов в Guard-Inform CRM. Исправлено, выводы на будущее сделаны.
Пасхальные яйца и портфолио
Намедни плотно поработали с Мариной foxie Карловой над ее сайтом-портфолио. Помимо добавления функции смены элемента дизайна в зависимости от времени суток и сезона, перевели всю клиентскую часть с Prototype на jQuery с добавлением FancyBox для просмотра галереи и закопали в сайте четыре «пасхальных яйца» – секреты, проявляющиеся при неоднократном нажатии на определенные элементы.
Мелочь, а приятно…
Guard-Inform CRM
Начинаю постепенно выполнять данные обещания. На сегодня – мини-CRM с возможностью выставления задач и отслеживания их выполнения. Сделано в рамках работы на компанию.
Известный факт – CRM не нужна, когда клиентов 5-10, все известны по именам-отчествам и записаны в мобильнике генерального директора. Однако когда клиентов больше 200-300 – это гораздо сложнее, а по достижении тысячного барьера без централизованного инструмента даже в рамках небольшой горизонтальной организации обойтись сложно. Помимо формальных характеристик клиента – реквизитов, услуг, документов и т.п. всегда есть желание получить и процессуальные параметры, а именно – мнение сотрудников о взаимодействии с клиентом, планы работ, результаты выполнения этих работ, т.е. то, что позволяет принимать управленческие решения в вопросах касабельно каждого конкретного клиента в отдельности. Помимо всего прочего, некоторые бизнес-процессы компании, как правило, являются вполне устоявшимися и естественно желание, когда определенные процедуры порождают вполне закономерный поток задач по отделам автоматически, без участия человека, который, как известно, может забыть, перепутать, потерять и т.д.
Подробнее »»
Как-то в начала века я утянул со skill.ru простой, но жутко хорошо сделанный JavaScript -сценарий проверки форм на стороне клиента, который нашёл своё применение во множестве различных web-проектов. Иногда функциональности скрипта мне не было достаточно, и тогда я дописывал и изменял код под свои нужды. К сожалению, в коде не было указано ни имя, не адрес автора, потому я не смог ни поблагодарить его, ни послать ему модифицированный код.
Проверка формы на стороне клиента – штука весьма удобная. Потому как позволяет не ожидать ответа от сервера, а мигом, ещё для отправки формы обрабатывающему сценарию, подсветить некорректно заполненные поля и дать возможность исправится. Это не самый идеальный вариант (предел совершенства – использование какого-нибудь ПО для обеспечения качества данных, например, «Фактор» от HFL) поскольку инициирует отрицательную обратную связь, заставляя пользователя чертыхаться и вносить изменения, дабы угодить «этому дурацкому сайту», но в целом – волне удобоваримое (в т.ч. и по трудозатратам) решение. Апофеозом подобной проверки, на мой субъективный взгляд, является форма регистрации на Автокадабре, где значения элементов ввода проходят проверку сразу после потери фокуса и пользователь получает обратную связь максимально быстро.
Подробнее »»
Карту на сайт? Легко!
Ну, что такое Google Maps API, думаю, объяснять не надо. Как ими пользоваться – давно и хорошо написано на сайте самого Google. Потому приведу простое и удобное решение для создания карты с большим числом объектов.
Рекомендую
