标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。
不幸的是,很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题,但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法),它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关:它甚至可以用于这段JavaScript代码片段:复制代码 代码如下: var table = '
'; for (var i = 0; i < 3; i++) { table += ''; for (var j = 0; j < 5; j++) { table += '' + j + ' | '; } table += '
'; } table += '
';
使用缩写包裹
这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。
该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。
缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。
如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:复制代码 代码如下: About Us Products News Blog Contact Up 你将会得到以下结果: 复制代码 代码如下:
你可以看到,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,下面的第一步可以跳过。
通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳过这一步)
在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding
在新创建的项目中创建scripts文件夹
解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单
注意事项:
Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)
官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失;
DreamWeaver
好消息是,现在已经有了Zen coding for DreamWeaver插件,坏消息是,该插件支持的功能很少,只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外,没有测试该插件是不是只支持CS4版本。不过比较好的是,作者将本插件的源码也放出了,你可以自定义一个Dreamweaver的插件。
事实上,官方的DW插件在Windows下有点儿bug,就是会出现空白的行,我简单的修正了下,重新编译了个包,在本机测试没问题,感兴趣的童鞋可以下载尝试:http://www.boxcn.net/shared/c71z7x7sfe
PS:官方的DW插件已经更新,推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009
特别推荐:豪情同学将缩写给实践了一番,总结出了很多很棒的用例,推荐大家前去学习。
原作者介绍:
Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者,他在优化方面有很大的热情:从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页和他的Twitter。原文来自:http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html