четверг, 4 ноября 2010 г.

Упрощение навигации по DOM

Хотелось бы затронуть тему правильной организации DOM, best practices, так сказать. Возможно немного пространно сформулировал, но смысл станет ясен после примера.

Пример. Форма ввода свойств некоторой сущности. Конкретнее: редактирование данных пользователя.



С чем столкнулся на практике:

<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").

Возможно где-то в Сети уже есть подобное или лучшее решение, как делают Про я не искал (зря? тогда жду комментариев), сразу решил поделиться пришедшей мыслью. На этом все. Удачной разработки!

3 комментария:

  1. Привет, Костя!
    Столкнулся с этой проблемой при работе с jsf + jquery. Я использовал следующий вариант для того чтобы добиться некоторой уникальности идентификаторов. Допустим присвоить форме id="userform", а полям внутри формы присваивать id вида id="userform:name". Получается некоторое подобие пространства имен для идентификаторов. Однако тут есть некоторая тонкость. Для того чтобы корректно работали jquery селекторы необходимо экранировать символ ":". Для этого я написал простенькую функцию на js:
    escapeId : function(id) {return "#" + id.replace(/:/g,"\\:");}. Использование: $(escapeId("userform:name")).
    Оказался вполне работоспособный вариант.
    Успехов!

    ОтветитьУдалить
  2. Еще немного рефлексии по поводу длинных имен js функций и css классов. Когда страничка реально огромная, то увеличивается время не только загрузки, но и рендеринга, т.к. браузеру приходится оперировать большими объемами текста. Для того чтобы минимизировать трафик и время рендеринга можно применить минификацию (обфускацию) (техника используется в gwt, также заметна на bing.com, yahoo.com). Возможно тебе будет это интересно http://developer.yahoo.com/yui/compressor/ http://yuiblog.com/blog/2006/03/06/minification-v-obfuscation/)

    ОтветитьУдалить
  3. Да, компрессорами интересовался, кое-какое представление есть.
    Тут основной задачей было облегчить разработку - сделать все яснее и проще (именно кодирование вручную). А с GWT конечно же надо познакомиться поближе :) Всему свое время...

    ОтветитьУдалить