Javascript.RU

Оформление кода → Атомы

Клиентское приложение принято разделять на 3 основных слоя: данные, поведение и оформление. Для каждого слоя используется свой язык: html, javascript и css, соответственно. Связь между ними осуществляется через некоторые идентификаторы: имена тэгов, классов, идентификаторов. Но к сожалению, в большинстве случаев они сильно завязаны на контекст использования, что усложняет поддержку и рефакторинг.

Несколько примеров:

var user= new User( 'tenshi' )
var isUser= anElement.hasClassName( 'user' )
var container= document.getElementById( 'user' )

Тут мы видим много различных сущностей имеющих одно имя: имя переменной, имя конструктора, имя класса, идентификатор. Что если вы заглянули в исходный код страницы и обнаружили у одного элемента класс 'user', которого там быть недолжно? Из-за того, что имя класса не является для вашего приложения атомарной сущностью (то есть требует дополнительный контекст типа var, new, hasClassName, getElementById, чтобы обрести смысл), поиск по строке «user» выдаст вам гору всякого мусора, который придётся разгребать руками.

Чтобы решить описанную проблему вводятся пространства имён. Например:

var user= new User( 'tenshi' )
var isUser= anElement.hasClassName( 'm-user' )
var container= document.getElementById( 'id-user' )

На первый взгляд кажется двойное указание контекста бессмысленным, но это позволяет использовать получившиеся атомы для обозначения одних и тех же сущностей во всём проекте, какие бы языки в нём не использовались.

<div id="id-user">Tenshi</div>
<div class="b-person-info m-user">ahtung! tenshi is a user!</div>
#id-user { font-size: 24pt }
.b-person-info { border: 1px solid transparent }
.b-person-info.m-user { border-color: red }
var anUserElement= $( 'id-user' )
var aPersonElement= anUserElement.select( '.b-person' )[0]
aPersonElement.addClassName( 'm-user' )

Наиболее употребительные префиксы:
id- для идентификаторов
b- для цсс блоков
m- для модификаторов блоков

Для имён, используемых в рамках одного языка, префиксы как правило не используют. Хотя, встречается, например, что имена конструкторов начинают с префиксов T или С, либо помещают в единое пространство имён типа $ или YMaps:

var aMapList= new CMapList
(       $$( '#id-map-list .b-map' )
        .map
        (       YMaps.Map.bind
                (       YMaps
                ,       {       propagateEvents: true
                        ,       coordSystem: new CCoordSystem
                        }
                )
        )
)

А какие атомы используются в ваших проектах?

0

Автор: tenshi, дата: 4 ноября, 2011 - 16:50
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:54
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:07
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
8 + 9 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
tenshi
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum