最前端

我的工作,我的生活,点点滴滴...

归档: ‘ 2010 年十月

Zen Coding: 一种快速编写HTML/CSS代码的方法

译自:Smashing Magazine

中文:Zen Coding: 一种快速编写HTML/CSS代码的方法

请尊重版权,转载请注明来源!


在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。

在 JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。 JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。

但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:

div#content>h1+p

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

<div id="content">  <h1></h1>  <p></p>  </div>

有些迷惑吧?今天,我将向你介绍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

下载(完全支持)

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

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

展开缩写

展开缩写功能将类似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;
  • E>N
    子代元素(div>p, div#footer>p>span);
  • E+N
    兄弟元素(h1+p, div#header+div#content+div#footer);
  • E*N
    元素倍增(ul#nav>li*5>a);
  • E$*N
    条目编号 (ul#nav>li.item-$*5);

正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这 里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个<li>元素,你可以简单的写位li*5。它也将同样重写全部子代元素。 如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a,这样会生成以下HTML代 码:

<li><a href=""></a></li>  <li><a href=""></a></li>  <li><a href=""></a></li>  <li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写,div.item$*3:

<div class="item1"></div>  <div class="item2"></div>  <div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可,而且想要多少都可以。那么,这样…

 div#i$-test.class$$$*5

会被转换成为:

<div id="i1-test" class="class111"></div>  <div id="i2-test" class="class222"></div>  <div id="i3-test" class="class333"></div>  <div id="i4-test" class="class444"></div>  <div id="i5-test" class="class555"></div>

你会看到,当你写a的缩写的时候,输出是<a href=””></a>。或者,如果你写img,输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的?有一个专门的文件,名为zen_settings.js描述了输出元素。这是一个简单的JSON文件,描述每种语言的缩写(是的,你可以为不同的句法定义缩写,比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样:

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',  			...  			},  			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',  			...  			}  			}

元素类型

Zen Coding有两个主要的元素类型:“片段(snippets)” 和 “缩写(abbreviations)”。片 段就是随意的代码碎片,而缩写是标签定义。通过片段,你可以写出你想要的任何代码,它也会照你写的格式输出;但是你必须手动的格式化它(使用n 和t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方,就像这样:cc:ie6>style。如果你不使用${child}变量,子元素将会输出于 代码片段的后面

有了缩写,您必须编写标记定义,而且语法是非常重要的。通常,你必须写一个简单的带有 所有默认的属性的标签,比如: <a href=””></a>。当Zen Coding被加载后,它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以,如果你 写<img src=”” alt=”” />,你会告诉Zen Coding这个标签必须是空的,然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写,你可以添加一个管道符号,它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的,Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那 么,这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先,它将一个完整的缩写分开为独立的元素:这样div>a 会被分成div 和a 元素,当然也会维持他们的关系。然后,每个元素,解析器先在代码片段内而后在缩写中寻找定义。如果它找不到,将会使用元素的名字作为新的标签,并为其添加 缩写中定义的id和class。比如,如果你写mytag#example,解析器在片段或缩写中找不到mytag定义,它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSSHTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不 幸的是,很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题,但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做 法),它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关:它甚至可以用于这段JavaScript代码片段

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

使用缩写包裹

这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

About Us  Products  News  Blog  Contact Up

你将会得到以下结果:

<div id="header">  	<ul id="navigation">  		<li class="item1"><a href=""><span>About Us</span></a></li>  		<li class="item2"><a href=""><span>Products</span></a></li>  		<li class="item3"><a href=""><span>News</span></a></li>  		<li class="item4"><a href=""><span>Blog</span></a></li>  		<li class="item5"><a href=""><span>Contact Up</span></a></li>  	</ul>  </div>

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

快捷键

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

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

在线演示

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

支持的编辑器

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

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

完全支持

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

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,下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
  5. 安装之后,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

一款媲美Firebug的Web前端插件


web developer

大家或许不知道有一款和Firebug相媲美的web前端插件—- Web Developer Toolbar,这也是我用的第一个firefox插件,它有很多实用的甚至连Firebug也无法媲美的功能。

以下是十个你可能从未了解过的关于Web Developer Toolbar的强大功能:

  • 1. 辅助线功能——Display Line Guides(Miscellaneous)

    当然,你正在使用 背景网格来设计你的网站。但是,万一你需要去快速地核查在页面上(或者是图形上)一些元素的平面图时,这个非常方便的功能可以让你任意添加许多个人的水平和垂直的指导。

  • 2. 浏览图象信息——View Image Information(Images)

    在Images菜单中,有许多与图片有关的功能。然而,我喜欢“浏览图象信息(View Image Information)选项,以很快的方式去看看一张页面上所有的图片,包括了背景图片,所有的东西都列在一个新的标签上,连同路径、尺寸、以及文件大小。

  • 3. 浏览色彩信息——View Color Information(Miscellaneous)

    我已经数不清有多少次,我需要去查看关于一个页面元素的色彩信息。Colorzilla是我通常所使用的工具,但是,如果要为一个标题找到正确的配色,有时候可能会非常棘手。
    而利用Web Developer Toolbar这一功能就会非常的简单,并且在一个新的标签中,列出了完整的CSS配色(带有样本)。

  • 4. 显示元素信息——Display Element Information(Informaition)

    你是否仍旧突出显示一个页面的元素,然后从文章背景菜单中选择“浏览选择来源(View Selection Source)”,去找出它是如何编码的?
    然后停止,用Ctrl+Shift+F来代替。点击一个元素去看看它的信息(分类/编号、位置、尺寸、等等)。你也可以看到那个元素的来龙去脉,如果你需要为你所采用的风格添加一些额外的特别环节,那真的是非常有用!

  • 5. 浏览页面信息——View Page Information(Information)

    点击这个选项,在标签弹出框窗口中,获取关于你的页面的多种信息。在这里,你可以看到关于你页面的各种信息,以及形式的详细资料、链接信息和详细的图片信息(包括文件大小、尺寸和预览)。
    并且,在Web Developer Toolbar的右边,单击绿色的符号,便可获取此功能。

  • 6. 显示密码——Show Passwords(Forms)

    窗体菜单对任何一个人来说,都是非常有用的一个工具。但是“显示密码(Show Passwords)”选项,可能是一个你从来不知道其存在的功能。

    大部分我都保存到了Firefox的密码管理中,如果我一直都需要去知道这个究竟是什么,只需要点击它,就可以得到这个信息。

  • 7. 嵌入式形式领域——Populate Form Fields(Forms)

    说起窗体,当需要去测试时,这个功能是非常有用的。如果你确实需要收到这样的形式,你可以通过选项菜单(Options)改变默认邮件地址。

  • 8. 屏幕表现——Small Screen Rendering(Miscellaneous)

    想知道你的网站在移动设备上是如何表现出来的?这个选项给了你一个大概的印象,它至少向你展示了你的工具条是否显示在你的主要内容之上。

  • 9. 标出所有未被访问过的链接——Mark All Links Unvisited(Miscellaneous > Visited Links)

    这对某些前提来说,是非常有用的功能。假定你想对你的所有链接在他们的自然状态下做一个屏幕截图,只需快速点击原始页面。当你在运行一个可用性的测试时,它也同样有用,并且,你需要为下一项任务重新安排你的页面。

  • 10. 浏览速度报告——View Speed Report(Tools)

    出于某些原因,你应该点击页面,并且从文章背景菜单中去获得“Tools”子菜单,从而获取“Web Developer”选项。这个功能驱动了Web Site Optimization的 Web Page Analyzer
    这个服务告诉你,在不同连接速度时,如何快速加载你的网页,并且同时提供其他相关页面有价值的信息,包括基于其分析的介绍去加快你的网站的速度(提示:让你的图片更小一点,并且不要使用那么多HTML代码、CSS、以及scripts等等)

附加:编辑HTML(Miscellaneous)
相信我们都知道Web Developer Toolbar所提供的关于CSS可怕的编辑功能。但是你知道吗,你可以用同样的方式来编写HTML代码。
为了网站的发展而利用这一功能,对于打磨网站内容来说,它真的是非常的方便。例如:当你在一个特定的空间里,试着去编辑标题或者一些内容时,它就显得非常的方便。
在Web Developer Toolbar中,这是我最喜欢的功能,尽管它鲜为人知。它还有很多我不没用过,或者不知道怎么用的功能(比如:Enable Auto Completion、Show Window Chrome、Display Object Information),大家好好研究!

别忘了优化jQuery 性能

jquery

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.
在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  • 1. 总是从ID选择器开始继承

    在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.
    复制代码 代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    像这样选择按钮是低效的:
    复制代码 代码如下:

    var traffic_button = $(‘#content .button’);

    用ID直接选择按钮效率更高:
    复制代码 代码如下:

    var traffic_button = $(‘#traffic_button’);

    选择多个元素

    提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.
    代码如下:

    var traffic_lights = $(‘#traffic_light input’);

     

  • 2. 在class前使用tag

    第二快的选择器是tag选择器($(‘head’)). 同理,因为它来自原生的getElementsByTagName() 方法.
    代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):
    代码如下:

    var active_light = $(‘#traffic_light input.on’);

    注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

    不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:
    代码如下:

    var content = $(‘div#content’);

    用ID修饰ID也是画蛇添足:
    代码如下:

    var traffic_light = $(‘#content #traffic_light’);

  • 3. 将jquery对象缓存起来

    要养成将jquery对象缓存进变量的习惯.

    永远不要这样做:
    代码如下:

    $(‘#traffic_light input.on).bind(‘click’, function(){…});
    $(‘#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);
    $(‘#traffic_light input.on).css(‘background-color’, ‘orange’);
    $(‘#traffic_light input.on).fadeIn(‘slow’);

    最好先将对象缓存进一个变量然后再操作:
    代码如下:

    var $active_light = $(‘#traffic_light input.on’);
    $active_light.bind(‘click’, function(){…});
    $active_light.css(‘border’, ‘3px dashed yellow’);
    $active_light.css(‘background-color’, ‘orange’);
    $active_light.fadeIn(‘slow’);

    为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.

    缓存jquery结果,备用

    如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

    定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:
    代码如下:

    // 在全局范围定义一个对象 (例如: window对象)
    window.$my =
    {
    // 初始化所有可能会不止一次要使用的查询
    head : $(‘head’),
    traffic_light : $(‘#traffic_light’),
    traffic_button : $(‘#traffic_button’)
    };

    function do_something()
    {
    // 现在你可以引用存储的结果并操作它们
    var script = document.createElement(‘script’);
    $my.head.append(script);

    // 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
    $my.cool_results = $(‘#some_ul li’);
    $my.other_results = $(‘#some_table td’);

    // 将全局函数作为一个普通的jquery对象去使用.
    $my.other_results.css(‘border-color’, ‘red’);
    $my.traffic_light.css(‘border-color’, ‘green’);
    }

  • 4. 掌握强大的链式操作

    上面的例子也可以写成这样:
    代码如下:

    var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
    .css(‘border’, ‘3px dashed yellow’)
    .css(‘background-color’, ‘orange’)
    .fadeIn(‘slow’);

    这样可以写更少的代码, 让我们的js更轻量.

  • 5. 使用子查询

    jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:
    代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.
    代码如下:

    var $traffic_light = $(‘#traffic_light’),
    $active_light = $traffic_light.find(‘input.on’),
    $inactive_lights = $traffic_light.find(‘input.off’);

    提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

  • 6. 对直接的DOM操作进行限制

    这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM 。这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

    例如,你想动态的创建一组列表元素, 千万不要这么做:
    代码如下:

    var top_100_list = […], // 假设这里是100个独一无二的字符串
    $mylist = $(‘#mylist’); // jQuery 选择到 <ul> 元素for (var i=0, l=top_100_list.length; i<l; i++)
    {
    $mylist.append(‘<li>’ + top_100_list[i] + ‘</li>’);
    }

    我们应该将整套元素字符串在插入进dom中之前全部创建好:
    代码如下:

    var top_100_list = […],
    $mylist = $(‘#mylist’),
    top_100_li = ""; // 这个变量将用来存储我们的列表元素for (var i=0, l=top_100_list.length; i<l; i++)
    {
    top_100_li += ‘<li>’ + top_100_list[i] + ‘</li>';
    }
    $mylist.html(top_100_li);

    我们在插入之前将多个元素包裹进一个单独的父级节点会更快:
    代码如下:

    var top_100_list = […],
    $mylist = $(‘#mylist’),
    top_100_ul = ‘<ul id="#mylist">';for (var i=0, l=top_100_list.length; i<l; i++)
    {
    top_100_ul += ‘<li>’ + top_100_list[i] + ‘</li>';
    }
    top_100_ul += ‘</ul>'; //关闭无序列表
    $mylist.replaceWith(top_100_ul);

    如果你做了以上几条还是担心有性能问题,那么:
    # 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以"离线"的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
    # 使用 DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

  • 7. 冒泡

    除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

    代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

    例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

    像这样绑定事件是低效的:
    代码如下:

    $(‘#entryform input).bind(‘focus’, function(){
    $(this).addClass(‘selected’);
    }).bind(‘blur’, function(){
    $(this).removeClass(‘selected’);
    });

    我们需要在父级监听获取焦点和失去焦点的事件:
    代码如下:

    $(‘#entryform’).bind(‘focus’, function(e){
    var cell = $(e.target); // e.target grabs the node that triggered the event.
    cell.addClass(‘selected’);
    }).bind(‘blur’, function(e){
    var cell = $(e.target);
    cell.removeClass(‘selected’);
    });

    父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

  • 8. 消除无效查询

    尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.
    只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.
    例如, 你的"文章"页面模板, 你可能会引用如下的代码在body结束处:
    代码如下:

    <script type="text/javascript>
    mylib.article.init();
    </script>
    </body>

    如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.
    代码如下:

    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <script type="text/javascript>
    mylib.traffic_light.init();
    </script>

    你的全局js库可能会是这样子的:
    代码如下:

    var mylib =
    {
    article_page :
    {
    init : function()
    {
    // Article 特有的jQuery函数.
    }
    },
    traffic_light :
    {
    init : function()
    {
    // Traffic light 特有的jQuery函数.
    }
    }
    }

  • 9. 推迟到 $(window).load

    jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

    尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

    你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括<iframe>)被下载完成后执行.
    代码如下:

    $(window).load(function(){
    // 页面完全载入后才初始化的jQuery函数.
    });

    多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.

  • 10. 压缩js

    推荐一个js在线压缩地址:
    http://dean.edwards.name/packer/
    http://www.jb51.net/tools/packer.htm

  • 11. 全面掌握jquery库

    知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个jQuery的速查手册, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.

文来自:jQuery Performance Rules ; 译文来自:Rlog.cn . 若转载请注明出处, 谢谢
详细出处参考:http://www.jb51.net/article/22221.htm