Пример. Форма ввода свойств некоторой сущности. Конкретнее: редактирование данных пользователя.
С чем столкнулся на практике:
<form action="#"> <input id="UserId" type="hidden" /> <div> <label>Имя:<input id="UserName" type="text" /></label> </div> <div> <label>Описание:<input id="UserDescription" type="text" /></label> </div> </form>
Запрос с помощью jQuery выглядит следующим образом:
function GetUser() { return { id: $("#UserId").val(), name: $("#UserName").val(), description: $("#UserDescription").val() }; }
И казалось бы, все отлично. Если бы не:
- а если у нас несколько элементов управления для ввода данных о пользователях - конфликт идентификаторов (идентификатор должен быть уникален в пределах страницы)?
- а если наша сущность называется OurEntityWithVeryVeryReallyVeryLongName и имеет множество полей, представляете себе кошмар в виде id="OurEntityWithVeryVeryReallyVeryLongNameFieldWithLongName1" и тому подобное?
Что предлагаю:
<form class="User" action="#"> <input class="Id" type="hidden" /> <div> <label>Имя:<input class="Name" type="text" /></label> </div> <div> <label>Описание:<input class="Description" type="text" /></label> </div> </form>
Теперь и запрос с помощью jQuery выглядит иначе:
function GetUser() { var user = $(".User"); return { id: $(".Id", user).val(), name: $(".Name", user).val(), description: $(".Description", user).val() }; }
Как по мне, вполне приемлемо, и даже похоже на объектную нотацию ("User.Name").
Возможно где-то в Сети уже есть подобное или лучшее решение, как делают Про я не искал (зря? тогда жду комментариев), сразу решил поделиться пришедшей мыслью. На этом все. Удачной разработки!
Привет, Костя!
ОтветитьУдалитьСтолкнулся с этой проблемой при работе с jsf + jquery. Я использовал следующий вариант для того чтобы добиться некоторой уникальности идентификаторов. Допустим присвоить форме id="userform", а полям внутри формы присваивать id вида id="userform:name". Получается некоторое подобие пространства имен для идентификаторов. Однако тут есть некоторая тонкость. Для того чтобы корректно работали jquery селекторы необходимо экранировать символ ":". Для этого я написал простенькую функцию на js:
escapeId : function(id) {return "#" + id.replace(/:/g,"\\:");}. Использование: $(escapeId("userform:name")).
Оказался вполне работоспособный вариант.
Успехов!
Еще немного рефлексии по поводу длинных имен js функций и css классов. Когда страничка реально огромная, то увеличивается время не только загрузки, но и рендеринга, т.к. браузеру приходится оперировать большими объемами текста. Для того чтобы минимизировать трафик и время рендеринга можно применить минификацию (обфускацию) (техника используется в gwt, также заметна на bing.com, yahoo.com). Возможно тебе будет это интересно http://developer.yahoo.com/yui/compressor/ http://yuiblog.com/blog/2006/03/06/minification-v-obfuscation/)
ОтветитьУдалитьДа, компрессорами интересовался, кое-какое представление есть.
ОтветитьУдалитьТут основной задачей было облегчить разработку - сделать все яснее и проще (именно кодирование вручную). А с GWT конечно же надо познакомиться поближе :) Всему свое время...