Zen Coding Implementierung des schnellen Schreibens von HTML/CSS-Code

In diesem Artikel zeigen wir eine neue Möglichkeit zur schnellen Entwicklung von HTML und CSS mithilfe einer Syntax, die CSS-Selektoren nachahmt. Es wurde von Sergey Chikuyonok entwickelt.

Wie viel Zeit verbringen Sie mit dem Schreiben von HTML-Code (einschließlich aller Tags, Attribute, Anführungszeichen, Klammern usw.)? Wenn Ihr Editor über Codehinweise verfügt, fällt Ihnen das Schreiben leichter, aber selbst dann müssen Sie immer noch viel Code manuell eingeben.

Wenn wir in Bezug auf JavaScript ein bestimmtes Element auf einer Seite abrufen möchten, stoßen wir auf dasselbe Problem: Wir müssen viel Code schreiben, was schwierig zu warten und wiederzuverwenden ist. Es entstanden JavaScript-Frameworks und es wurden auch CSS-Selektor-Engines eingeführt. Jetzt können Sie einfache CSS-Ausdrücke verwenden, um DOM-Elemente abzurufen, was ziemlich cool ist.

Aber was wäre, wenn Sie nicht nur Elemente mithilfe von CSS-Selektoren anordnen und positionieren, sondern auch Code generieren könnten? Wenn Sie beispielsweise so schreiben:

Kopieren Sie den Code Der Code lautet wie folgt:

div#content>h1 +p

...Dann können Sie eine Ausgabe wie diese sehen:

Code kopieren Der Code lautet wie folgt:

/p>
上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

下载(完全支持)

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

E
Elementname (div, p);
E#id
Element mit ID (div#content, p#intro, span#error);
E.class
Verwenden Sie Klassenelemente (div.header, p.error.critial). Sie können class und idID auch in Kombination verwenden: div#content.column.width;
E>N
Untergeordnetes Element(div>p, div#footer>p>span);
E+N
Geschwisterelement (h1+p, div#header+div#content+div#footer);
E*N
Elementmultiplikation (ul#nav>li*5>a);
E$*N
Artikelnummer (ul#nav>li.item-$*5);

Code kopieren Der Code lautet wie folgt:

…ruft dann das Verhalten „Abkürzung erweitern“ auf.

-Elemente generieren möchten, können Sie einfach li*5 schreiben. Außerdem werden alle untergeordneten Elemente überschrieben. Wenn Sie 4
-Elemente mit jeweils einem -Tag schreiben möchten, können Sie einfach li*4>a schreiben, wodurch der folgende HTML-Code generiert wird:

Code kopieren Der Code lautet wie folgt:
;/li>

-Elemente mit den Klassen item1, item2 und item3 generieren. Sie können die Abkürzung wie folgt schreiben: div.item$*3:

Kopieren Sie den Code Der Code lautet wie folgt:

 ">< /div> 

Fügen Sie einfach ein Dollarzeichen zu jeder Klasse oder jedem ID-Attribut hinzu, in dem der Index erscheinen soll, so oft Sie möchten. Also, so...

Code kopieren Der Code lautet wie folgt: div# i$-test.class $$$*5

wird konvertiert in:

Code kopieren Der Code lautet wie folgt:

< ;/div>

Wie Zen-Codierung weiß, wann ein Tag generiert werden soll. Standardattribute hinzufügen oder schließendes Tag überspringen? Es gibt eine spezielle Datei mit dem Namen

zen_settings.js
, die die Ausgabeelemente beschreibt. Dies ist eine einfache JSON-Datei, die die Abkürzungen für jede Sprache beschreibt (ja, Sie können Abkürzungen für verschiedene Syntaxen wie HTML, XSL, CSS usw. definieren). Die Common-Language-Abkürzungsdefinition sieht wie folgt aus: html': { 'snippets': { 'cc:ie6': '', ... }, 'abbreviations': { 'a': '', 'img': '',
...

} }

Elementtyp

Zen Coding hat zwei Hauptelementtypen: „Snippets“ und „Abkürzungen“. Fragmente sind zufällige Codeteile und Abkürzungen sind Tag-Definitionen. Mit Snippets können Sie jeden gewünschten Code schreiben und er wird in dem von Ihnen geschriebenen Format ausgegeben. Sie müssen ihn jedoch manuell formatieren (mit n und für Zeilenumbrüche und Einrückungen) und die Variable ${child} in „Gehe zu wo“ einfügen Sie möchten, dass die untergeordneten Elemente wie folgt ausgegeben werden: cc:ie6>style. Wenn Sie die Variable ${child} nicht verwenden, wird das untergeordnete Element nach dem im Code-Snippet ausgegeben.

Bei Abkürzungen müssen Sie Markup-Definitionen schreiben, und die Syntax ist sehr wichtig. Normalerweise müssen Sie ein einfaches Tag mit allen Standardattributen schreiben, wie zum Beispiel: . Wenn Zen Coding geladen wird, analysiert es eine Tag-Definition in ein bestimmtes Objekt, das den Namen des Tags, Attribute (einschließlich ihrer Reihenfolge) und ob das Tag leer ist, beschreibt. Wenn Sie also schreiben, teilen Sie Zen Coding mit, dass das Tag leer sein muss, und dann verwendet das Verhalten „Abkürzung erweitern“ bestimmte Regeln dafür, bevor es ausgegeben wird.

Für Snippets und Abkürzungen können Sie ein Pipe-Symbol hinzufügen, das Zen Coding angibt, wo der Cursor positioniert werden soll, wenn die Abkürzung erweitert wird. Standardmäßig platziert Zen Coding den Cursor zwischen Anführungszeichen auf leeren Attributen und zwischen öffnenden und schließenden Tags.

Beispiel

Hier ist also eine Erklärung, was passiert, wenn Sie eine Abkürzung schreiben und die Aktion „Abkürzung erweitern“ aufrufen. Erstens wird eine vollständige Abkürzung in unabhängige Elemente aufgeteilt: So wird div>a in div- und a-Elemente aufgeteilt, wobei ihre Beziehung natürlich beibehalten wird. Anschließend sucht der Parser für jedes Element zunächst im Snippet und dann in der Abkürzung nach der Definition. Wenn es nicht gefunden wird, wird der Name des Elements als neues Tag verwendet und die in der Abkürzung definierte ID und Klasse werden daran angehängt. Wenn Sie beispielsweise „mytag#example“ schreiben und der Parser im Fragment oder in der Abkürzung keine Mytag-Definition finden kann, gibt er aus.

Wir haben viele Standard-CSS und HTML-Abkürzungen und Snippets erstellt. Sie werden feststellen, dass das Erlernen der Verwendung von Zen Coding Ihre Produktivität steigern kann.

HTML-Tag-Paar-Matcher

Eine weitere sehr häufige Aufgabe für HTML-Programmierer ist das Finden von Tag-Paaren für ein Element. Sie möchten beispielsweise das gesamte Tag

auswählen und an eine andere Stelle verschieben oder löschen. Oder vielleicht suchen Sie nach einem schließenden Tag und möchten wissen, zu welchem öffnenden Tag es gehört.

Leider mangelt es vielen modernen Entwicklungstools an dieser Funktionalität. Dann beschloss ich, im Rahmen von Zen Coding meinen eigenen Tag-Pair-Matcher zu schreiben. Es befindet sich noch in der Betaphase und hat einige Probleme, aber es funktioniert ziemlich gut und schnell. Anstatt das gesamte Dokument zu durchsuchen (wie es ein normaler HTML-Tag-Paar-Matcher tut), sucht er ab der aktuellen Position des Cursors nach relevanten Tags. Dadurch geht es sehr schnell und kontextfrei: Es funktioniert sogar mit diesem JavaScript-Code-Snippet:

Code kopieren Der Code lautet wie folgt:

var table = '' for (var i = 0; i < 3; i++) {
table + = ''; for (var j = 0; j < 5; j++) {
table += ''; >}
table += ''
}
table += '

' + '

Abkürzungsumbruch verwenden

Dies ist eine wirklich coole Funktion, die die Funktionalität der Abkürzungs- und Tag-Paar-Matcher in einem vereint. Wie oft haben Sie festgestellt, dass Sie ein Wrapper-Element hinzufügen müssen, um einen Browser-Fehler zu beheben? Oder müssen Sie einem Inhalt auf Blockebene eine Dekoration hinzufügen, z. B. ein Hintergrundbild oder einen Rand? Sie müssen das öffnende Tag schreiben, Ihren Code vorübergehend unterbrechen, den relevanten Punkt finden und dann das Tag schließen. Hier kann Ihnen das „Umschließen mit Abkürzungen“ weiterhelfen.

Die Funktion ist ziemlich einfach: Sie werden aufgefordert, eine Abkürzung einzugeben, führen dann die entsprechende Aktion „Abkürzung erweitern“ aus und platzieren den gewünschten Text im letzten Element Ihrer Abkürzung. Wenn Sie keinen Text auswählen, wird der Tag-Paar-Matcher gestartet und die Ergebnisse verwendet. Es weiß auch, wo sich Ihr Cursor befindet: im Inhalt des Tags oder zwischen dem öffnenden und schließenden Tag. Abhängig von seiner Position umschließt es den Inhalt des Tags oder das Tag selbst.

Abkürzungsumbruch führt eine spezielle Abkürzungssyntax zum Umbrechen einzelner Zeilen ein. Springen Sie einfach zu der Zahl nach dem Multiplikationsoperator, zum Beispiel: ul#nav>li*>a. Wenn Zen Coding ein Element findet, das einen undefinierten Multiplikator verwendet, behandelt es es als sich wiederholendes Element: Es gibt es so oft aus, wie es Zeilen in Ihrem Kapitel gibt, und fügt den Inhalt jeder Zeile hinzu. Platzieren Sie es innerhalb des letzten untergeordneten Elements des wiederholten Elements.

Wenn Sie diese Abkürzung div#header>ul#navigation>li.item$*>a>span außerhalb dieses Textes einschließen:

Code kopieren Der Code lautet wie folgt:

Über uns 
Produkte 
Neuigkeiten 
Blog 
Kontakt 

 

Sie Sie erhalten folgende Ergebnisse:

Code kopieren Der Code lautet wie folgt:

< div id="header">

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

Ctrl+,
展开缩写
Ctrl+M
匹配对
Ctrl+H
使用缩写包括
Shift+Ctrl+M
合并行
Ctrl+Shift+?
上一个编辑点
Ctrl+Shift+?
下一个编辑点
Ctrl+Shift+?
定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是，本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

Installieren Sie EclipseMonkey über die Update-Website: http://download.eclipse.org/technology/dash/update(Sie können diesen Schritt überspringen, wenn Sie Aptana verwenden)
Erstellen Sie in Ihrem aktuellen Job ein Projekt der obersten Ebene und nennen Sie es beispielsweise zencoding
Erstellen Sie den Ordner Skripte im neu erstellten Projekt
Extrahieren Sie das heruntergeladene ZIP-Plug-in-Paket in diesen Ordner. Die Projektstruktur sieht folgendermaßen aus:
Nach der Installation werden Untermenüs zur Zen-Codierung im Menü „Skript“ in der Menüleiste von Aptana angezeigt

Hinweis:

Das offizielle Plug-in für Aptana basiert auf MAC. Wenn Sie Windows verwenden, müssen Sie die Tastenkombinationen manuell ändern (ändern Sie sie im Kommentarausschnitt am Kopf jeder Datei).
Die offizielle Dateikodierung ist etwas chaotisch. Achten Sie bitte auf das Kodierungsproblem

Die gute Nachricht ist, dass es jetzt eine Zen-Codierung für das DreamWeaver-Plugin gibt. Die schlechte Nachricht ist, dass das Plug-in nur sehr wenige Funktionen unterstützt und nur die Erweiterung von Abkürzungen unterstützt. Und die Standard-Tastenkombinationen sind ungültig. Aktionen können nur im Befehlsmenü angeklickt werden. Außerdem habe ich nicht getestet, ob das Plug-In nur die CS4-Version unterstützt. Aber was noch besser ist: Der Autor hat auch den Quellcode dieses Plug-Ins veröffentlicht und Sie können ein Dreamweaver-Plug-In anpassen.

Tatsächlich weist das offizielle DW-Plugin unter Windows einen kleinen Fehler auf, das heißt, ich habe es einfach korrigiert und das Paket neu kompiliert. Beim Testen auf diesem Computer gibt es kein Problem . Bei Interesse können Kinderschuhe heruntergeladen und ausprobiert werden:

http://www.boxcn.net/shared/c71z7x7sfe PS: Das offizielle DW-Plug-in wurde aktualisiert

Empfehlen Sie

, es von der offiziellen Website herunterzuladen . Neue Plugins bieten mehr Funktionsunterstützung. UPDATE vom 23.12.2009

Besondere Empfehlung

: Student Haoqing hat Abkürzungen in die Praxis umgesetzt und viele tolle Anwendungsfälle zusammengefasst. Ich empfehle jedem gehen und lernen. Vorstellung des ursprünglichen Autors:

Sergey Chikuyonok ist ein russischer Front-End-Entwicklungsingenieur und Autor, der eine große Leidenschaft für Optimierung hat: von Bildern und JavaScript-Effekten bis hin zu Workflow und zeitsparender Codierung. Besuchen Sie

seine Homepage

und seinen Twitter. Originaltext von: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

Verwandte Etiketten：

zen

Quelle：php.cn

Vorheriger Artikel：Setzen Sie den CSS-Standardstil zurück Nächster Artikel：Codemethode zum Verschönern der Eingabedateischaltfläche mit css_Experience-Austausch

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors