Download - Zen Coding
Zen CodingНабор инструментов для скоростной
и удобной верстки
Сергей Чикуёнок
Что такое Zen Coding
• Набор инструментов для работы с кодом
• Написан на чистом JavaScript, портирванна Python
• Поддерживаемые редакторы: Eclipse/Aptana, Coda, TextMate, Espresso (включен в базовую сборку), Gedit, TopStyle
• http://code.google.com/p/zen-coding/
Разворачивание аббревиатур —
ключевой компонент Zen Coding
Expand Abbreviation
div#header>cc:ie6+ul.nav>li*3>a
Expand Abbreviation
<div id="header">
<!--[if lte IE 6]>
<![endif]-->
<ul class="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Синтаксис
E#id.classdiv#header → <div id=”header”></div>
p.date → <p class=”date”></p>
div#head.one.two → <div id=”head” class=”one two”></div>
Синтаксис
E>Ehead>link →
table>tr>td →
ul#name>li.item →
<head><link/></head>
<table><tr><td></td></tr></table>
<ul id="name"><li class="item"></li></ul>
Синтаксис
E+Ep+p →
div#name>p.one+p.two →
<p></p><p></p>
<div id="name"> <p class="one"></p> <p class="two"></p></div>
Синтаксис
E$*Np.name-$*3 →
select>option#item-$*3 →
<p class="name-1"></p><p class="name-2"></p><p class="name-3"></p>
<select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option></select>
Структурные элементы
• Тэги
• Сниппеты — произвольный код
Все структурные элементы находятся в файле zen_settings.js (или zen_settings.py)
Структура zen_settings
var zen_settings = {
// описания языков‘css’: {
...},
‘html’: {‘extends’: ‘css’,
‘snippets’: {...
},
‘abbreviations’: {...
}
}}
Описание языка: сниппеты
‘snippets’: {'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->'
}
Описание языка: аббревиатуры (тэги)
‘abbreviations’: {
'a:link': '<a href="http://|"></a>',
'img': '<img src="" alt="" />'
}
Новое в версии 0.5
• Упрощенный синтаксис настроек
• Профили форматирования вывода
• Новый ключевой компонент — контекстно-независимый поиск пар тэгов (html pair matcher).
• Обёртывание аббревиатурами
Сниппеты принимают
атрибуты ID и CLASS:
‘snippets’: {'djb': '{% block ${id} %}\n\t${child}|\n{% endblock %}'
}
djb#content>div.page → {% block content %} <div class="page"></div>{% endblock %}
Профили форматирования
Eclipse/Aptana: профиль определяется в
зависимости
от текущего редактора (HTML/XML) и доктайпа.
Профили форматирования
div>img+br
Профили форматирования
HTML
<div><img src="" alt=""><br></div>
Профили форматирования
XHTML
<div><img src="" alt="" /><br /></div>
Профили форматирования
XML
<div><img src="" alt=""/><br/>
</div>
Поиск пар тэгов
<p><em>Hello world</em></p>
<p><em>Hello world</em></p>
Поиск пар тэгов
Работает везде, где есть тэги:
<?php$str = '<table>';$str .= '<tr>';for ($i = 0; $i < 4; $i++) {
$str .= '<td>'.$i.'</td>';}$str .= '</tr>';$str .= '</table>';?>
Wrap with abbreviation
<ul id="nav">
<li></li>
</ul>
+div#header>h1+div.wrap
Wrap with abbreviation
<div id="header">
<h1></h1>
<div class="wrap">
<ul id="nav">
<li></li>
</ul>
</div>
</div>
Wrap with abbreviation
item 1
item 2
item 3
+div#header>ul#nav>li.item-$*
Wrap with abbreviation
<div id="header">
<ul id="nav">
<li class="item-1">item 1</li>
<li class="item-2">item 2</li>
<li class="item-3">item 3</li>
</ul>
</div>
Как работает Zen Coding
Архитектура
Редактор Прослойка
Zen Coding
HTML PairMatcher
API
текст
текст
текст
Парсинг аббревиатур
1. Поиск аббревиатуры в текстовом потоке
2. Валидация аббревиатуры
3. Разбор аббревиатуры в дерево
4. Форматирование и вывод кода
Поиск аббревиатуры
Hello world! div#header+ul>li
Посимвольный перебор влево:
function isAllowedChar(ch) {var char_code = ch.charCodeAt(0),
special_chars = '#.>+*:$-_!@';
return (char_code > 64 && char_code < 91) // uppercase letter|| (char_code > 96 && char_code < 123) // lowercase
letter|| (char_code > 47 && char_code < 58) // number|| special_chars.indexOf(ch) != -1; // special
character}
перебор символов
Поиск аббревиатуры
Проблема: <div>ul#nav>li</div>
<div>ul#nav>li</div> или <div>ul#nav>li</div>?
При нахождении символа > проверяем его принадлежность тэгу — поиск влево до символа <, проверка по регулярному выражению, сравнение индексов.
Валидация аббревиатуры
Валидация совмещена с разбором в дерево:
function parseIntoTree(abbr) {
...
var re = /([\+>])?([a-z@\!][a-z0-9:\-]*)(#[\w\-\$]+)?((?:\.[\w\-\$]+)*)(?:\*(\d+))?/ig
abbr = abbr.replace(re, function(str, operator, tag_name, id, class_name, multiplier) {
...
return '';
});
return (!abbr) ? tree : null;
}
Разбор в дерево
div+ul#nav>li*3>a
Все узлы дерева являются объектами классов Tag() и Snippet().
root div
ul (id=”nav”) li (×3) a (href=””)
Форматирование и вывод
root.toString(profile_name);
Все узлы форматируются и выводятся согласно настройкам профиля и типам тэгов (блочный, инлайн, пустой).
Поиск HTML-пар
1. Поиск первого незакрытого тэга слева
2. Поиск первого неоткрытого тэга справа
3. Сохранение найденного результата в свойство last_match
4. Выбор диапазона в зависимости от позиции картетки (включаем только содержимое тэга или весь тэг)
<p>Lorem <span>ipsum</span> dolor <span>sit</span> amet.</p>
Поиск HTML-парHTMLPairMatcher.last_match = {
opening_tag: {
name: 'ul',
full_tag: '<ul id="nav">',
start: 5,
end: 19,
unary: false,
type: 'tag',
close_self: false
},
closing_tag: {
...
}
}
Поддержка редакторов
• У всех редакторов разный API
• У некоторых редакторов (TextMate, Coda) односторонняя связь
• Разворачивание аббревиатур по клавише Tab требует низкоуровневой поддержки редактора
EclipseMonkey• Позволяет писать плагины для Eclipse на
JavaScript
• Использует движок Mozilla Rhino
• можно использовать Java-классы внутри JavaScript
• позволяет обратиться к любому компоненту IDE
• немного отличается от того, что используется в браузерах
• нужно следить за типом объектов: String и java.lang.String — разные классы с разными характеристиками
Вопросы[email protected]://chikuyonok.ru
