JavaScript与jQuery前端开发：Emmet快速编码技巧.pdfVIP

你在写HTML代码(包括所有、属性、、大括号等)上花费多少时间？

如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还

是要手动敲入很多代码。

在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就

会遇到同样的问题，须写很多代码，这就变得难于和重用。

JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使

用简单的CSS表达式来获取DOM元素，这相当酷。

但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎

么样？比如，如果你这样写：

div#contenth1+p

…然后就可以看到这样的输出：

dividcontent

h1/h1

p/p

/div

有些迷惑吧？今天，我将向你介绍ZenCoding，一组用于快速HTML和CSS

编码的工具。最初由VadimMakeev在2009年4月提出(文章为俄语)，由鄙

人(也就是我)开发了数月并最终达到比较成状态。ZenCoding由两个

组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的

HTML对匹配器。看一下这个演示来看一下它们能为你做些什么。

注意：该原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这

里：，上面的是我费尽周折从Vimeo上

下来上传到优酷的，上传后质量竟被大打折扣了，囧。上也有一份视

频，是基于Aptana的演示，一样很：

。PS:貌似要比

Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

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

插件：

Demo

▪Demo(使用Ctrl+,展开缩写，需要JavaScript支持)

▪中文版演示

(完全支持)

▪Aptana(跨平台);

▪Coda,viaTEAforCoda(Mac);

▪Espresso,viaTEAforEspresso(Mac);

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

▪TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);

▪TopStyle;

▪SublimeText;

▪GEdit;

▪DreamweaverCS4

▪editArea编辑器;

▪ZenCoding编辑器中文版

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

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会

有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要是语

义化：“选择器”意为选择一些东西，但是在这里我们上是生成一些东

西，是写一个长代码的较短的替代。其次，它只是使用的CSS选择器语法

的一个小的子集，并添加了一些新的操作符。

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

▪E

元素名称(div,p);

▪E#id

使用id的元素(div#content,p#intro,span#error);

▪E.class

使用类的元素(div.header,p.error.critial).你也可以联合使用class和idID:

div#content.column.width;

▪EN

子代元素(divp,div#footerpspan);

▪E+N

兄弟元素(h1+p,div#header+div#content+div#footer);

▪E*N

元素倍增(ul#navli*5a);

▪E$*N

条目编号(ul#navli.item-$*5);

正如你能看到的，你已经知道如何使用ZenC