Zen Coding快速编写HTML/CSS代码的实现

在本文中，我们将展示一种通过使用模仿CSS选择器的语法来快速开发HTML和CSS的新方法。它是由谢尔盖奇库约诺克开发的。你花多少时间写HTML代码(包括所有标签、属性、引用、大括号等。)?如果你的编辑器有代码提示功能，你会更容易编写，但即便如此，你也要手动输入大量代码。在JavaScript中，当我们想要获取页面上的特定元素时，会遇到同样的问题，必须编写大量代码，这就变得难以维护和重用。JavaScript框架应运而生，它们还引入了CSS选择器引擎。现在，您可以使用简单的CSS表达式来获取DOM元素，这非常酷。但是，如果您不仅可以使用CSS选择器来布局和定位元素，还可以生成代码呢？比如这样写：复制代码如下： div#contenth1 p …然后可以看到输出：复制代码如下： div id=' content ' h1/h1p/p/div，上面的效果可以用dreamweaver来测试，Dreamweaver v.0.7的扩展下载地址Zen Coding是不是有些混乱？今天，我将介绍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?PS:看似youtube比Vimeo更容易翻越【和谐】墙，但如何翻越【和谐】墙已经超出了本网站的范围。如果你想跳转到详细的介绍和用户指南，请看看演示页面，立即下载你适用的插件：

Demo

Demo(使用Ctrl，扩展缩写，需要JavaScript支持)中文版demo

下载(完全支持)

Aptana(跨平台)；Coda，通过TEA换Coda(Mac)；浓缩咖啡，通过TEA for Espresso(Mac)；

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

TextMate(只能用于Mac机，Windows可以用E-text编辑器代替)；TopStyle崇高的文本；GEditDreamweaver CS4 editArea在线编辑器；禅宗编码在线编辑器中文版现在让我们来看看这些工具是如何工作的。

展开缩写

扩展缩写功能，将类似CSS的选择器转换为XHTML代码。“缩写”这个词可能有点难理解。为什么不直接叫它“CSS选择器”？嗯，第一个原因是语义化：“选择器”的意思是选择一些东西，但是在这里我们实际上生成一些东西，这是编写长代码的一个简短替代。其次，它只使用了真正的CSS选择器语法的一小部分，并添加了一些新的运算符。下面是支持的属性和运算符列表：e元素名(div，p)；E#id使用id的元素(div#content，p#intro，span # error)；E.class使用类的元素(div.header，p . error . critical)。您也可以同时使用类和idid : div # content . column . width。EN后代元素(divp，div # footer span)；e兄弟元素(h1 p，div #表头div #内容div #表尾)；E*N元素乘法(ul # navli * 5a)；E$*N项目编号(ul # navli . item-$ * 5)；如您所见，您已经知道如何使用Zen Coding:它只是一个简单的CSS选择器(呃，“缩写”抱歉)，就像这样…复制代码如下： div # header ring . logo ul # navli * 4a…然后调用“扩展缩写”行为。有两个新的运算符：元素乘法和项目编号。例如，如果你想生成5 li元素，你可以简单地写li*5。它还将重写所有子元素。

如果你想写四个li元素，每个元素里面都有一个A标记，你可以简单的把它们写成li*4a，这样会生成如下的HTML代码：复制代码如下： lia href=' '/A/lilia href=' '/A/lilia href=' '/A/lilia href=' '/A/lilia href=' '/A/Li最后3355。假设您想用类item1、item2和item3生成三个div元素。你可以写这个缩写，div.item$*3:复制代码如下： div class=' item 1 '/div div class=' item 2 '/div div class=' item 3 '/div只需给你想要索引的任何类或id属性添加一个美元符号，你可以使用任意多个。所以，这样…复制的代码如下：div # I $-test.class $ $ * 5将转换为：复制的代码如下： Div id=' i1-test ' class 111 '/Div id=' I2-test ' class 222 '/Div id=' i3-test ' class 333 '/Div id=' i4-test ' class 444 '/Div id=' i5-test ' class 555 '/Div Zen编码如何知道何时向生成的标记添加默认属性或跳过结束标记？有一个名为zen_settings.js的特殊文件描述了输出元素。这是一个简单的JSON文件，描述了每种语言的缩写(是的，您可以为不同的语法定义缩写，如HTML、XSL、CSS等。).通用语言缩写定义如下：复制的代码如下： ' html ' : { ' snippets ' 3360 { ' cc 3360 ie 6 ' : '！- [if lte IE 6]\n\t${child}|\n！[endif]-'，}，'缩写' : {'a' :' a href=''/a '，' img ' : ' img src=' http 3360 ' alt=' '/'，}} 010.片段是随机的代码片段，缩写是标签定义。通过片段，你可以写任何你想要的代码，它会以你写的格式输出。但是您必须手动格式化它(使用\n和\t来换行和缩进)，并将${child}变量放在您想要输出子元素的地方，就像这样：cc:ie6style。如果不使用${child}变量，子元素将在代码片段之后输出。有了缩写，就必须写标签定义，语法非常重要。通常，您必须编写一个包含所有默认属性的简单标签，例如： a href=“”/a .当加载Zen Coding时，它会将一个标签定义解析为一个特定的对象，该对象描述了标签的名称和属性(包括它们的顺序)以及标签是否为空。因此，如果您编写img src=' ' alt=' '/，您将告诉Zen Coding标签必须为空，然后“扩展缩写”行为将在输出之前对其使用特定的规则。对于片段和缩写，您可以添加管道符号，该符号告诉Zen Coding当缩写展开时光标将位于何处。默认情况下，Zen Coding将光标放在空属性的引号之间以及开始和结束标记之间。

元素类型

好吧，下面是你写了一个缩写，并呼吁采取“扩展缩写”的行动时发生的事情。首先，它将一个完整的缩写分成独立的元素：因此diva将被分成div和a元素，当然它们的关系将被保持。然后，对于每个元素，解析器首先在代码片段中查找定义，然后在缩写中查找。如果找不到，它会使用元素的名称作为新标签，并将缩写中定义的id和类添加到其中。例如，如果您编写mytag#example，解析器在片段或缩写中找不到mytag定义，它将输出mytag id="example" mytag。我们做了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以提高你的工作效率。00-1010对于HTML编码者来说，另一个非常常见的任务是找到元素的标签对。例如，您想要选择整个div id="content "标记，并将其移动到另一个地方或删除它。或者，您可能正在寻找一个结束标记，并想知道它属于哪个开始标记。不幸的是，许多现代开发工具缺乏这一功能。

然后我决定写我自己的标签对匹配器，作为Zen Coding的一部分。但是，它仍然处于测试阶段，仍然存在一些问题，但是它可以很好地快速工作。它开始从光标的当前位置寻找相关的标签，而不是浏览整个文档(就像匹配器使用HTML标签的通常方式)。这使得它非常快速且不受上下文影响：它甚至可以用于这个JavaScript代码片段：复制代码如下： var table=' tablefor(var I=0；I 3；I){ table=' tr '；for(var j=0；j5；j){ table=' TD ' j '/TD '；} table='/tr '；} table='/table '；00-1010这确实是一个很酷的功能，它结合了缩写和标签对匹配器的功能。有多少次你发现你需要添加一个包元素来修复一个浏览器错误？还是需要给块级内容添加一个装饰，比如背景图片或者边框？您必须编写开始标记，暂时中断代码，找到相关点并关闭标记。这就是“使用缩写包”可以帮助你的地方。该功能非常简单：它要求您输入缩写，然后执行适当的“展开缩写”操作，并将所需的文本放在缩写的最后一个元素中。如果您没有选择任何文本，它将启动标记对匹配器并使用结果。它还可以计算出光标的位置：在标签内容的内部或开始和结束标签之间。根据其位置，它包装标签的内容或标签本身。缩写引入了一种特殊的缩写语法来换行。只需跳转到乘法运算符后的数字，例如：ul # navli * a .当Zen Coding找到一个未定义的乘数时，它会将其作为一个重复元素：它将输出您的章节中的行数，并将每行的内容放在重复元素的最后一个子元素中。如果您包装这个缩写div # headerul # navigationli。此文本周围的项目$ *。Aspan:复制代码如下：关于美国产品newsblog联系起来，你会得到如下结果：复制代码如下： div id=' header ' ul id=' navigation ' Li class=' item 1 ' a href=' spana。关于Us/span/A/Li Li class=' item 2 ' A href=' SPan products/span/A/Li Li class=' item 3 ' A href=' SPan news/span/A/Li Li class=' item 4 ' A href=' SPan blog/span/A/Li class=' item 5 ' A href=' SPan向上联系/span/a/Li/ul/div如您所见，Zen Coding是一个强大的文本处理工具。

例子

Ctrl，展开缩写Ctrl M匹配使用缩写为Ctrl H包括Shift Ctrl M合并行Ctrl Shift？最后一个编辑点Ctrl Shift？下一个编辑点Ctrl Shift？这些快捷方式的定位是可定制的。00-1010关于Zen Coding是如何工作的，以及它如何让你的编码变得更容易，你已经学到了很多。为什么不现在自己试试呢？因为Zen Coding是在纯JavaScript中开发的，并移植到Python中，所以它甚至可以在浏览器中使用，这使得它成为引入CMS的首选。Demo(使用Ctrl，展开缩写，需要JavaScript支持)中文版demo

HTML 标签对匹配器

Zen Coding不依赖特定编辑器。它是一个只处理文本的优秀组件：它获取文本，做一些处理，并放回新的文本(或索引，用于标签匹配)。Zen Coding是由JavaScript和Python编写的，因此它几乎可以在任何平台上运行。在Windows上，可以运行JavaScript版本，而Mac和Linux分支可以使用Python版本。如果您的编辑器支持Zen Coding，您需要编写一个特定的插件，可以在编辑器和Zen Coding之间转换数据。问题是一个编辑器可能因为它自己的插件系统而不完全支持Zen Coding。例如，TextMate通过用脚本输出替换当前行来支持“扩展缩写”功能，但它无法处理标记对匹配，因为没有标准方法来请求TextMate选择内容。

使用缩写包裹

Aptana(跨平台)；Coda，通过TEA换Coda(Mac)；浓缩咖啡，通过TEA for Espresso(Mac)；

快捷键

TextMate(只能用于Mac机，Windows可以用E-text编辑器代替)；TopStyle崇高的文本；GEditDreamweaver CS4 editArea在线编辑器；中文版Zen Coding在线编辑器Aptana是我的主要开发环境，它使用了一个JavaScript版本的Zen Coding。它还包含许多其他用于我日常工作的工具，因此任何新的Zen Coding版本都将首先提供给Aptana，然后部署到Python中并与其他编辑器兼容。Coda和Espresso插件由杰出的文本编辑器动作(TEA)平台支持，并由伊恩贝克开发。最初的源代码在GitHub上，但是我做了自己的分支来集成Zen Coding的特性。

在线演示

许多尝试过Zen Coding的人说，它改变了他们写页面的方式。当然，还有很多事情要做，还有很多编辑要支持，还有一些文档要写。请浏览当前文档和源代码，找到您的问题的答案。希望你喜欢禅宗编码！

支持的编辑器

遗憾的是，这篇文章的原作者并没有解释禅宗编码的具体用法，沈飞认为有必要做如下简要解释。这里以Aptana/Eclipse和Dreamweaver为例。其他编辑器平台暂不描述。有问题可以在评论里和前端观察网友交流。00-1010由于Aptana本身基于Eclipse，Zen Coding也支持Eclipse，但只需要一个EclipseMonkey插件的支持。Aptana封装了这个插件，所以如果使用Aptana，可以跳过下面的第一步。通过更新网站安装eclipse monkey:http://download.eclipse.org/technology/dash/update(如果您使用Aptana，可以跳过这一步)。在您当前的工作中，创建一个顶级项目并命名它。例如，要求zencoding在新创建的项目中创建脚本文件夹，并将下载的ZIP插件包解压缩到该文件夹中。项目的结构看起来是这样的： 。

安装后，与Zen编码相关的子菜单将出现在Aptana菜单栏的“Script”菜单中。注意：Aptana版本的官方插件基于MAC。如果您使用的是Windows，则需要手动更改快捷键(在每个文件头的注释部分更改)。官方的文件编码有点乱。修改官方js时，请注意编码问题。修改不当将导致相关功能的丧失。00-1010好消息是DreamWeaver插件已经有了Zen编码，坏消息是插件只支持扩展缩写的功能。默认快捷键无效。您只能在“命令”菜单中单击操作。另外，没有测试插件是否只支持CS4版本。但是，作者已经发布了这个插件的源代码，您可以自定义一个Dreamweaver插件。其实官方的DW插件在Windows中有一些bug，就是会有空行。我只是修改了一下，重新编译了一个包。这台机器上的测试很好。感兴趣的童鞋可以试试下载：http://www.boxcn.net/shared/c71z7x7sfePS:官方DW插件已经更新，建议正式下载。新插件增加了更多的功能支持。UPDATE @ 12-23-2009特别推荐：有豪情的同学把缩写付诸实践，总结了很多很棒的用例，推荐大家学习。

完全支持

Sergey Chikuyonok是俄罗斯前端开发工程师和作家。他对优化有着极大的热情：从图片和JavaScript效果到工作流程和省时编码。访问他的主页和推特。原文：http://www . qianduan . net/Zen-coding-a-new-write-html-code . html。