Автоматизация написания ajax-обработчиков форм

Речь пойдёт о небольшом упрощении реализации доступного AJAX front-end’а. Говоря о доступности, подразумевается, что имеется 2 версии приложения для пользователей с AJAX и без оного.

Разрабатывая приложения, которые подразумевают взаимодействие с помощью AJAX, есть несколько моментов, которые очень сильно отвлекают, так что хотелось бы упростить их. В частности, при создании форм для таких приложений достаточно скучно каждый раз описывать в форме onsubmit=«mysuperfunction(…);», хотелось бы данный процесс автоматизировать. Так же хотелось бы использовать паттерн MVC для разработки в JS.

Идея подхода, использовать значение атрибута action для вызова JS-методов.


Точно не знаю, используется ли данный метод в каких-то JS MVC framework’ах. Буду благодарен за конструктивную критику и ссылки, если изобретаю колесо.

Итак, предпосылки. Существует множество форм в приложении, которые должны обрабатываться асинхронно, если AJAX есть или приводить к обычному HTTP запросу в другом случае. Вообще говоря, в форме есть уже все данные, которые необходимы для обработки. Это, прежде всего, данные элементов управления, тип передачи формы (POST/GET) и адрес, куда эти данные нужно послать.

Идея подхода, использовать значение атрибута action для вызова JS-методов. Написав, небольшой кусочек кода, форму можно будет описывать следующим образом:

<form action=«url» method=«post» onSubmit=«return MVC.dispatch();»> сразу оговоримся, что для реализации данного подхода необходима строгая и логичная структура проекта (главное не допускать одинаковых action’ов у форм выполняющих разные действия). Таким образом, необходимо прописать маршруты и обработчики для данных маршрутов на JS (полная аналогия с Zend Framework, Django, RoR).
Собственно необходимо написать что-то подобное. Маленькое замечание, так как предполагается использование MVC, что ведёт к созданию как контроллеров так и action’ов, то описание в структуре маршрутов как строки (названия метода) было выбрано сознательно (потом это можно прикрутить к имеющимся framework’ам или реализовывать свой).

// святая святых<br>function MVC(){<br>    // объект с данными<br>    this.data = new Object();<br>    // маршруты (url,имя метода)<br>    this.routes=[{url:'/',action:'action1'}];<br>}<br><br>// обработка<br>MVC.prototype.dispatch = function(form){<br>    // обработаем элементы формы и запишем их в MVC.data<br>    // для checkbox'ов и radio-кнопок естественно применена особая логика<br>    this.data = new Object();<br>    for (var i=0;i<form.elements.length;i++){<br>        if (typeof form.elements[i].value!='undefined' && form.elements[i].name!=''){<br>            if (form.elements[i].type=='checkbox' || form.elements[i].type=='radio'){<br>                if (form.elements[i].checked){<br>                    this.data[form.elements[i].name]=form.elements[i].value;<br>                }<br>            } else {<br>                this.data[form.elements[i].name]=form.elements[i].value;<br>            }<br>        }<br>    }<br><br>    // "выдернем" action формы<br>    var url=form.attributes['action'].value;<br>    // сверимся с маршрутами и вызовем необходимый метод<br>    for (i in this.routes){<br>        if (url==this.routes[i].url){<br>            var f=this[this.routes[i].action];<br>            f.call(this);<br>        }<br>    }<br>    <br>    return false<br>};<br><br>// реализация метода для маршрута /<br>MVC.prototype.action1=function(){<br>    var d=document.getElementById('data');<br>    <br>    d.innerHTML = 'Данные формы:<ul>';<br>    for (i in this.data){<br>        d.innerHTML += '<li><b>'+i+'</b>:'+this.data[i]+'</li>';<br>    }<br>    d.innerHTML += '</ul>';<br>}<br><br>MVC = new MVC();<br><br>* This source code was highlighted with Source Code Highlighter.

Код прозрачен так, что пояснений особо думаю не потребуется. Писалось за 15 минут, так что жду критики. Почему не используется form.action? Потому что, во время выполнения в этом атрибуте будет полный адрес, что нас не устраивает.

Описание формы. Форму опишем следующим образом.

<form action="/" method="post" onsubmit="return MVC.dispatch(this);">
<input type="text" name="field1"><br>
<input type="checkbox" name="field2" value="y" /><br>
<input type="radio" name="field3" value="y" /><br>
<input type="radio" name="field3" value="n" /><br>
<input type="submit" value="submit" /><br>
</form>

Сделаем небольшой тестовый пример для проверки (Пример).

Таким образом, мы автоматизировали процесс разработки. Описание маршрутов можно реализовать в соответствии с тем, как вы это делаете на серверной стороне и перенести их в JS простым копированием.

Что касается серверной стороны, то данный подход может коснуться и её. Нам всего-то и нужно, что реализовать объект формы, который автоматом будет подставлять значение атрибута onSubmit. Для Zend Framework это может выглядеть так. Самое главное переопределить метод Init().

сlass MYForm extends Zend_Form{
	...
	public function Init(){
		parent::Init();
		$this->setAttrib("onSubmit","return MVC.dispatch(this);");
	}
	...
}

Вот собственно и всё. Создавать объект формы будем от только, что описанного, объекта.

В дальнейшей разработке («на клиенте») будем только описывать обработчики для маршрутов. Всё остальное уже сделано.

Чего добились?

1. Логичная структура приложения. Как на серверной, так и на клиентской частях. И что, немало важно, структура одинаковая.
2. Все формы сразу готовы к AJAX’ификации. Нужно только описать обработчик. Снижен риск забыть дописать обработчик.
3. Обработчики ассоциируются с маршрутами, так что не будут возникать ошибки, как если бы в onsubmit стояло название функции (которое можно написать неверно или забыть).

Что ещё нужно реализовать?

1. маршруты и обработчики по-умолчанию
2. обработчики ошибок
3. «привязать» к существующим MVC

P.S.: тестировалось в Firefox (3.0.6), Opera (9.62), IE (8.0.6001.18241 b2).
Спасибо за внимание. Жду критики.