作为行业标杆的淘宝前端放出自己的开源编辑器，当然要关注一下。

首先简要评价一下我用过的一些编辑器（比较八卦，技术牛人请自动跳过）：

1. CKEditor 以前的FCKEditor，最老牌的JavaScript RTE之一，换名字后的新网站很漂亮，但是皮肤比较丑，所以我自己做站肯定不会用他。目前在用CKEditor或FCKEditor的网站包括译言、cnBeta、百度空间等…
2. TinyMCE 界面很优雅，最出名的应用就是WordPress后台的文章编辑页面了… 文档完善，自定义插件也相当容易。这大概也是人人网选用TinyMCE的一大原因。
3. Google Docs的编辑器 岂可用“强大”二字形容。必须说“很好很强大”…. 不过我辈只有观瞻的分，人家没有开源，开了源你也用不上…
4. QQ邮箱的编辑器 小巧而强大，但用户体验欠佳。而且英文版的时候，在Firefox下是一塌糊涂……（不知道现在修正过来没有）
5. QQ空间的编辑器 一些交互细节值得称道，但可用性不敢恭维。
6. 搜狐白社会的编辑器 简单的功能造就了迅猛的加载速度。icon有点丑。=.=
7. Discuz的编辑器 完全就是一个怪物。

此外，还有NicEdit、openwysiwyg等独立js编辑器，和一些基于类库的编辑器。jQuery有jwysiwyg (读作/dʒei’wiziwig/)，YUI有YUI RTE，mootools也有wysiwyg插件，不过好像都缺少后续更新。还是TinyMCE和CKEditor比较活跃啊~

淘宝此次发布的编辑器，基于YUI构建，而且是YUI 2.x，诚如“摇滚肉包子”所言，这多多少少会给编辑器的推广带来一些阻碍。但到底好不好用呢？还是试过之后才知道：

1. 界面

现在这款皮肤，和Google Docs很接近，字体颜色拾取器也是借鉴了Google Docs，很好用。总体来说清新舒爽，不油不腻，简洁实用…  不过不太喜欢字体下拉菜单的蓝色：

这是绝对的链接色。这种菜单，用黑色就很好：

（弹出层和按钮左侧有两个像素的距离，我不知道作者是不是故意不对齐的。）

期待淘宝UED的视觉设计达人们能加入到后续版本的开发中，设计出一套更加漂亮的皮肤来。感觉淘宝整站的这种“外凸渐变”实在太多了，不够elegant…

据说插入链接/图片的浮动层样式参考了搜狐白社会，十分紧凑，适合这种小巧的社区发帖编辑器。

2. 功能

目前只实现了一些常用的编辑器功能，字体样式、图片和链接插入、缩进和对齐等。没有清除样式的按钮，直接添加标题（h1~h6）、引用（blockquote）等语义化标签的按钮也没有，从Word中复制内容得到的html源码也十分混乱。不过通过查看js源码，可以看出作者预留了很多接口，底层代码也算是博采众长，插件和皮肤和的自定义还算方便。

作者透露的开发计划是：

紧接着的二期里，将进一步完善基础架构和插件体系，并提供 Undo/Redo, 插入Flash, 表格编辑和预置模板等功能。

另外一些细节，比如说插入图片时URL没有基本的正则验证，当没有p标签包裹时按回车键只会出现br换行，字体的样式和颜色是使用的font标签来设置，等等…… 可能会让一些细节控/语义控觉得受不了。

更多bug和改进建议可以参考updates list。（话说淘宝影响力就是大啊，发布不过一周，提交的bug已经近80个了…）

3. 浏览器兼容

稍微测试了一下，发现的问题有：

1. ie和ff之外的浏览器不能使用图片大小重设
2. opera里缩进按钮失效
3. ie中把图片右对齐，会出现烦人的横向滚动条
4. …

更多兼容性问题，请继续参考updates list…..

4. 大小

KISSY以“小巧灵活，简洁实用”为开发理念，功能实现上遵循着实用主义，但是又保持了相当高的灵活性和可扩展性。

KISSY Editor依赖于YUI的yahoo-dom-event，两者压缩到一个文件后的大小为94k，而TinyMCE在同样的压缩规则下大小为162k。相比于TinyMCE强大的功能，KISSY的尺寸似乎略显臃肿… 对广大站长的号召力似乎不是很大。yahoo-dom-event占到总代码量的近2/3，不知道如果让KISSY独立起来，总代码量会减少多少？

很早以前我就想要一个jQuery版的TinyMCE，因为那得节省多少代码啊~  KISSY Editor还这么新，不知道有没有可能从一开始就整一系列基于多类库的版本？（哇… 类库，内裤，这个词好….）同步开发应该好维护些，不然以后代码庞大起来，要转移内裤就更难搞了。

5. 性能

把插件弹出层的HTML代码写到js里，真是一个好idea… 非常受不了WordPress后台那基于远程HTML文档的模态窗口，网速慢的时候，插入链接这么简单的操作，都要等十秒以上……

至于KISSY这个编辑器的内存占用、代码洁净程度等需要高强度测试的高科技问题，就还是等其他牛人来搞啦… 笔者没有这个水平。

报告完毕！———~—~–~–~-~–妖艳的分割线–~-~–~–~——–

即刻试用KISSY Editor |  在Google Code上的项目主页 在 GitHub 上的KISSY项目主页 |  开发者博客

©2009 笨活儿 | 永久链接 | 已经有9条评论了 | 推荐到豆瓣

1. 使用最新版本
2. 合并、最小化脚本
3. 用for替代each
4. 用ID替代class选择器
5. 给选择器指定前后文
6. 建立缓存
7. 避免DOM操作
8. 避免使用concat()，利用join()处理长字串
9. 返回false值
10. 利用小抄和参考文档

1. 使用最新版本

jQuery一直处于不断的开发和改进过程中。 John 和他的团队不断研究着提升程序性能的新方法。

一点题外话，几个月前他还发布了Sizzle，一个据说能在Firefox中把程序性能提升3倍的JS选择器库。

如果你不想时刻关注是否有新版本，然后再花时间下载上传，Google 就又能帮你一把了。他们的服务器上存储了大量Ajax库供您选择。

<!-- 利用一个简单的script标签调用API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* 加载 jQuery v1.3.2 */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* 加载完成后弹出消息 */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>

编辑按：另一个更为简单快速的方法是直接使用脚本链接。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面这句代码就够了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

笨活儿：特定版本的还可以这样加载：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2. 合并、最小化脚本

大部分浏览器都不能同时处理多个脚本文件，所以它们都是排队加载——加载时间也相应地延长了。

考虑到你网站的每个页面都会加载这些脚本，你应该考虑把它们放到单个文件中，然后利用压缩工具（比如 Dean Edwards 的这款）把它们最小化。更小的文件无疑将带来更快的加载速度。

JavaScript和CSS压缩的目的是在保持脚本的执行性能的同时，减少数据传递的字节数（可以通过减小原始文件，也可以利用gzip。大多数产品级的网络服务器都把gzip作为HTTP协议的一部分）。

— 引自 YUI compressor，一款 jQuery官方推荐的压缩脚本的工具。

3. 用for替代each

原生函数总是比辅助组件更快。

如果遇到需要遍历对象的情况（如从远程接收的JSON对象），你最好重写你的（JSON）对象为一个数组，数组的循环处理要容易些。

利用Firebug，我们能测定每个函数的执行时间。

var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');  //原生for函数
var l = array.length;
for (var i=0;i

上面的结果显示原生代码只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且这还只是我在本机上测试一个基本上啥也没做的函数的结果，当遇到更复杂的情况，例如设置css属性或DOM操作时，时间差异肯定更大。

4. 用ID替代class选择器

利用ID选择对象要好得多，因为这时jQuery会使用浏览器的原生函数getElementByID()来获取对象，查询速度很快。

因此，比起利用那些方便的css选择技巧，使用更为复杂的选择器也是值得的（jQuery也为我们提供了复杂选择器）。你也可以手工书写自己的选择器（其实比你想象中简单），或者为你想要选择的元素指定一个有ID的容器。

//下例创建一个列表并且填充条目内容
//然后每个条目都被选择一次
//首先使用class选择
console.time('class');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
//然后利用ID选择
console.time('id');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');

上面的例子很好地说明了不同选择方式之间的显著性能差异。请看下图，利用class来做选择，时间无限增大，甚至超过了五秒：

5. 给选择器指定前后文

jQuery的参考文档里说：

传递给jQuery() 原始DOM节点的前后文（如果没有东西被传递，则前后文为整个文档）。

目的是连同选择器一起，实现更为准确的查询。

所以，如果你一定要利用class来指定目标，至少为选择器指定上下文，以免jQuery费精力去遍历整个DOM文档：

与其这样写：

$('.class').css ('color' '#123456');

为选择器加上前后文比较好（expression: 目标选择器；context: 前后文）：

$(expression, context)

也就是说：

$('.class', '#class-container').css ('color', '#123456');

这样做要快得多，因为它不用遍历整个DOM。只要找到#class-container就好了。

6. 建立缓存

不要犯不断重新选择同一个东西的错误。你应该把你要处理的元素缓存为一个变量。

更不要在一个循环里重复选择同一个元素！这样做十分影响速度！

$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 这样写更好
$('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
// 甚至这样
var item = $('#item');
item.css('color', '#123456');
item.html('hello');
item.css('background-color', '#ffffff');
// 遇到循环,这样做非常不好
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append(i);
}
console.timeEnd('no cache');
// 下面这样要好得多
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');

如下图所示，即使是相对较短的迭代，缓存的效果还是很明显的。

7. 避免DOM操作

DOM操作应该越少越好，因为诸如prepend()，append()，after()的插入动作都很费时。

上面的例子如果用html()会更快：

var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);

8. 避免使用concat()，利用join()处理长字串

听起来可能挺奇怪，不过这样做真的能提升速度，尤其是当连接特别长的字串时。

先建立一个数组，放入你想要串联的东西。join()方法比字符串的concat()函数要快得多。

var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));

近期一项由Tom Trenka发起的测试中，得出了下表的结果：

“ += 操作符更快——比把字串片段放到数组中然后join起来还要快”，“作为字串缓冲（string buffer）的数组在大部分浏览器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。”

— Tom Trenka

9. 返回false值

您可能已经注意到，如果函数执行后不返回false，你就会被跳转到页面顶部。

如果页面较长，这种反应是很烦人的。

所以，与其这样：

$('#item').click (function () {
// stuff here
});

不如多加一句：

$('#item').click (function () {
// stuff here
return false;
});

10. 额外小贴士 – 小抄和参考文档

这条建议并不直接提升函数的执行速度，不过如果你肯花时间在这上面，研究研究这些小抄和参考文档，你将来定能节约很多时间。

请在手边随时放一张小抄以作快速参考。

英文原文来自NetTut+：10 Ways to Instantly Increase Your jQuery Performance

译文原文来自笨活儿：十种方式即刻提升您的jQuery代码性能[TUTS+]。

©请尊重作者和译者。若需转载，务必保留原文链接。

©2009 笨活儿 | 永久链接 | 已经有3条评论了 | 推荐到豆瓣

果冻恙 – Jelly Young

这是大一暑假，也就是整整两年前做的东西。当时抱着本台湾人编的CSS实例教程（没有系统化讲解，都是一些基本属性的实例应用，书名我忘了），还有一部《Ajax基础教程》，一个人在家里捣鼓，基本上是零基础，家里又没有联网，没办法看网上的教程，基本上就靠着这两本书了。嗯…. 以及Dreamweaver的帮助文档，呵呵。

果冻恙? 嗯哼？

当年的自我介绍是这样写的：

我在我的世界里轻轻的歌唱。果冻软滑的质感，明亮的色彩，丰富而甜蜜的口味，让人开心，不得不开心呵！我做那只年轻的让认人开心的果冻，我却无力诋毁我内心的忧伤。果冻有恙，无恙？无所依矣！

同学，不装逼你会死啊？！“我在我的世界里轻轻的歌唱”这句话到底是哪里看来的？好像非常具有代表性…… 嗯哼嗯哼…… 最后一句“无所依矣！”是个嘛东西？你认为大家都像你一样不懂古文吗？唉…… 所以呀，现在我虽然挺讨厌装逼的人，也没想鄙视他们。是的，大家都要经历这个阶段。

个篱小朋友要送我域名一个，让我自己选，我本着单纯而美好的愿望，挖空心思想了这么一个“果冻恙”。想起来，jellyyoung听起来也蛮悦耳的。可惜，后来我们才发现，搜索“果冻恙”会提示：你是不是要找“果冻样”——而这结果，可就不太雅观了…… 哈哈哈。Anyway，当年做这个站的时候，还是对这事儿毫无知觉……

外观

当年已经学过一点PS，所以你能看到主页的左边放了些我自己P的图。不过，我还不知道用Photoshop来做效果图，所以这个站整个外观都是直接用CSS写的，颜色什么的也是不断改代码试出来的，没有什么mockup之类的东东…  只有背景，是一条渐变图的平铺。因为那本CSS教程上就有讲背景图啦！但是好像现在看起来渐变不够明显？还不如用纯色呢！而且哟，当年我都不知道设置背景图片的同时还可以设背景色的……

也不知道是哪里学来的设计技巧，每个子页面都是高纯度色。这种做法我一直念念不忘，乃至到后来做学生会网站的时候，也用了四种高纯度色。现在看来，这些色彩，都好囧啊。不是说看着累，而是在某些显示器上看着累…… 显示器稍微有点色差就会受不了。适用范围不广。

首页那个Flash啊，好囧啊。转圈圈，转圈圈，关键词，关键词…… 多么纯真无邪呀～ 不过最囧的还是，里面用到的一个单词meditate，我居然想不起来是啥意思了…… 刚才有道了一下，是“冥思”的意思…… 是的，热情、冥思、自信、善良，就构成了这只让人开心却要自己忧伤的果冻……   嗯…. 严肃，大家都严肃！

还有那些ＰＳ的图片，唉，看了就让我伤感呀…… 想当年我还是凌厉的小正太一枚，如今就已蜕变成面向猥琐、胡子拉碴、双目无光、人人第一印象都是“你是宅男吧？”的幽怨大叔了……

技术

都说我基本上是零基础，手边有没有网上的系统教程，所以做的时候都是靠的我对软件的敏感，自己在Dreamweaver里摸索。“站点管理”、“网页模板” 些东西都是自己搞懂的…… 然后JavaScript，是几乎毫无基础，直接抱着《Ajax基础教程》啃，然后自己写出来的。说实话，显得我的JS也不咋地，没有google就写不下去的，连最基本的字符串操作函数都必须随时有参考文档才行…… 想成大事，是还是要费脑子去背才行。

虽说我看了《Ajax基础教程》，但看懂这本书还需要Java基础和servlet的环境实践，所以我也就看了些最基本的概念就没有深入研究了。果冻恙的Ajax用在了日志和友链页面里。

突然从当年的日志里发现，原来我一直都是一个workaholic，只要专心去做一件事了，完全可以废寝忘食。不过啊，要是自己不想做的事，打死也不会去做…… 即使早就过了deadline都还是要推…… 解决办法只有让自己爱上它，或者寄希望与通过一点责任心来控制自己，不然真的没办法强迫的……

一个下午都耗在Mod_rewrite上了…

由于我的虚拟主机不支持域名绑定子目录，所以我就需要通过rewrite来实现子网站的虚拟主机。前段时间换成了Linux主机，而Apache下的mod_rewrite又和IIS上的ISAPI Rewrite的作用机制有点不一样。我试了很久发现好像mod_rewrite的[L]（停止重修）这个flag没有起作用？不知道是哪里的全局设置出了问题，还是我自己对这一flag的理解没对？有没有高手解释一下？

最终我选定的方案是：

[php]RewriteCond $1 !(test|portfolio|pf|src|demo)/
RewriteCond %{HTTP_HOST} ^(test|portfolio|pf|src|demo)\.benhuoer\.com$
RewriteRule ^(.*) /%1/$1[/php]

核心是判断host name，然后rewrite到子目录下。之所以把HTTP_HOST这个condition放到第二句是需要在RewriteRule里调用那些host前缀，使用%1进行匹配。$1匹配的是前面的RewriteRule的Pattern。第一句是为了防止已经rewrite过的再被rewrite…

有谁能提供更好的写法吗？[L]到底是怎么回事呀？谁能告诉我！

©2009 笨活儿 | 永久链接 | 已经有2条评论了 | 推荐到豆瓣

本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者，刚刚写完自己的Hello World，那这里有很多对您的工作将十分有用的小贴士；也许有些技巧您已经知道，那就试试快速浏览一下，看能不能发现一点新东西吧！

注：本文多次用到Firebug的console对象，请参考Firebug Console API 。关于firebug的更详细介绍，请猛击这里。

1. 用 === 代替 ==

JavaScript里有两种不同的相等运算符：===|!== 和==|!=。相比之下，前者更值得推荐。请尽量使用前者。

“如果两个比较对象有着同样的类型和值，===返回true，!==返回false。”

- JavaScript: The Good Parts

不过，如果使用==和!=，在操作不同数据类型时, 你可能会遇到一些意想不到的问题。在进行相等判断前，JavaScript会试图将它们转换为字符串、数字或 Boolean量。

2. 避免使用Eval函数

Eval函数把一个字串作为参数，并把字串作为JavaScript语句执行，返回结果（参考）。

此函数不仅会降低你脚本的执行效率，而且还大大增加了安全风险，因为它赋予了作为文本的参数太大的权利。千万别用！

3. 不要使用快速写法

技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句：

if(someVariableExists)
 x = false

不过，如果是这样的呢：

if(someVariableExists)
 x = false
 anotherFunctionCall();

你可能会认为它和下面的语句相等：

if(someVariableExists) {
 x = false;
 anotherFunctionCall();
}

不幸的是，事实并非如此。现实情况是它等价于：

if(someVariableExists) {
 x = false;
}
anotherFunctionCall();

如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。在所有情况下都请写清楚花括号和句尾分号。在只有一行语句的时候能偶尔省略掉，虽然下这么做也是极度不被推荐的：

if(2 + 2 === 4) return 'nicely done';

多考虑下将来吧，孩子

假设，在将来的开发过程中，你需要为这个 if 语句添加更多的命令呢？到时候你还不是得把括号给加上？

4. 好好利用JS Lint

JSLint 是由 Douglas Crockford 编写的一个调试器。你只需要贴上你的代码，它就能快速为您扫描出任何明显的错误和问题。

“JSLint 扫描接收的代码。发现问题，描述问题，并给出其在源码中的大概位置。可发现的问题包括但不限于语法错误，虽然语法错误确实是最常见的。JSLint也会用约定俗成的习惯检查代码的格式化风格，以及结构错误。通过JSLint的扫描并不能保证你的程序就完全正确。它只是为您提供了额外一双发现错误的眼睛。”

- JSLint 文档

完成代码之前，把它放到JSLint里检查一下，快速消灭你的无心之过。

5. 在页面底部加载脚本

正如下图所示：

请记住—— 我们要千方百计保证客户端的页面载入速度尽可能的快。而脚本没载入完成，浏览器就没法加载页面的剩余部分。

如果你的JS文件只是添加一些额外功能——例如，为点击某链接绑定事件——那大可以等页面加载基本完成后再做。把JS文件放到页面最后，body的结束标签之前，这样做最好了。

更好的写法是

<p>超哥是世界上最帅的人。benhuoer.com是世界上最好看的博客。</p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 在 For 语句外部声明变量

当需要执行冗长的for语句时，不要让JavaScript引擎每次都重复那些没有必要的操作。例如：

这样不好

for(var i = 0; i < someArray.length; i++) {
 var container = document.getElementById('container');
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 —— 太傻了！

这样好多了

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len;  i++) {
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

我要给留言改进这段代码的人额外惊喜！欢迎大家留言讨论！

7. 快速构建字串

要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法：

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

“没那么多繁文缛节来烦你；你就信我一次好了（或者你也可以自己试一试）—— 这真的是迄今能找到的最快办法了！

用点土办法，也别管它背后究竟发生了什么抽象的东西，通常土办法都比那些优雅的办法要快捷得多！”

- James Padolsey, james.padolsey.com

8. 减少全局变量

“把你踩在全局的那些乱七八糟的脚印都归于一人名下，能显著降低与其他应用、小工具或JS库冲突的可能性。”

- Douglas Crockford

var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name

更好的写法

var DudeNameSpace = {
 name : 'Jeffrey',
 lastName : 'Way',
 doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

注意看，我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的。

9. 写好注释

可能一开始你会觉得并无必要，但相信我，你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时，结果却发现很难想起当时写某句东西时脑子在想的什么了，是不是很让人沮丧呢？或者，如果有同事要修订你的代码呢？一定，一定要为你代码里的重要部分加上注释。

// 遍历数组，输出各自名称
for(var i = 0, len = array.length; i < len; i++) {
 console.log(array[i]);
}

10. 试试渐进增强

一定要记得为未启用JavaScript的情况提供替代方案。大家可能会认为，“大部分我的访客都启用了JavaScript的，我才不用担心”。这样的话，你可就大错特错了！

你有没有试过看看禁用JavaScript后你那漂亮的滑动器都成啥样了？（你可以下载 Web Developer ToolBar 轻松完成这项任务。）禁用之后你的网站可能就彻底失去了可用性！经验之谈：开发初期总是按照没有JavaScript来设计你的网站，之后再进行渐进地功能增强，小心翼翼地改变你地布局。

11. 不要传递字串给 “setInterval” 或 “setTimeout”

看看下面的代码：

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

不仅执行不高效，而且和 eval 函数有着同样的高风险。千万不要把字串传递给 setInterval 和 setTimeout。恰当的做法是，传递一个函数名：

setInterval(someFunction, 3000);

12. 不要使用with语句

初识之下，“with”语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如：

with (being.person.man.bodyparts) {
 arms = true;
 legs = true;
}

– 等价于 —

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

不幸的是，测试表明，若你要为对象插入新成员，with的表现非常糟糕，它的执行速度非常缓慢。替代方案是声明一个变量：

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. 使用 {}，而不用New Object()

在JavaScript有多种方式能新建对象。最传统的方法是 new 语句，如下：

var o = new Object();
o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
 console.log(this.name);
}

不过，这一方法读起来却比较糟糕。我强烈建议你采用下面这种在文字样式上更为强健的写法：

更好的写法

var o = {
 name: 'Jeffrey',
 lastName = 'Way',
 someFunction : function() {
 console.log(this.name);
 }
};

注意，如果你想新建一个空对象，用 {} 就能行：

var o = {};

“对象字面符(Objects literals)帮助我们写出支持很多特性，同时又关联性强、简明直接的代码。没必要直接调用新建语句，然后再费心维护声明变量和传递变量的语句之间的正确顺序，等等。” – dyn-web.com

14. 使用[]，而不用New Array()

新建数组时的同类型运用。

行得通的写法

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

更好的写法

var a = ['Joe','Plumber'];

“在JavaScript编程中经常遇到的一个错误是，该用数组时却用了对象，该用对象时却用了数组。规则其实很简单：当属性名是小的连续整数时，你应该使用数组。其他情况，使用对象。” – Douglas Crockford

15. 一长列变量声明？别写那么多var，用逗号吧

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string',
 anotherItem = 'another string',
 oneMoreItem = 'one more string';

…不言自明。我不知道这样做能否提升代码执行速度，但是确实让你的代码干净许多。

17. 千万千万记得写分号

大部分浏览器都允许你不写句尾分号：

var someItem = 'some string'
function doSomething() {
 return 'something'
}

之前已经说过，这样做会造成潜在的更大、更难以发现的问题：

更好的写法

var someItem = 'some string';
function doSomething() {
 return 'something';
}

18. “For in” 语句

遍历对象时，你可能会发现你还需要获取方法函数。所以遇到这种情况时，请一定记得给你的代码包一层 if 语句，用以过滤信息。

for(key in object) {
 if(object.hasOwnProperty(key) {
 ...then do something...
 }
}

引自 Douglas Crockford 所作： JavaScript: The Good Parts

19. 使用Firebug的“Timer”功能优化你的代码

想要轻松地快速了解某项操作的用时吗？使用Firebug的timer功能来记录结果好了。

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

20. 读，读，读……Read, Read, Read…

虽然我是Web开发博客（就像这个！）的超级粉丝，但吃饭和睡觉前除了看书好像也别无选择~ 在你的床头柜上摆一本Web开发的好书吧！下列书单都是我的最爱：

• Object-Oriented JavaScript（暂无中文版）
• JavaScript: The Good Parts（中文版）
• Learning jQuery 1.3（暂无中文版，但你可以看看老版本的中文版）
• Learning JavaScript（中文版）

阅读他们…… 反复阅读很多次！我现在都还在读。

21. 自决的函数

相比于调用函数，让函数在页面载入或者某一父函数被调用时自动执行，是十分简单方便的做法。你只需要把你的函数包在父辈之内，然后添上一个额外的括号，本质上这括号就触发了你定义的函数（了解更多）。

(function doSomething() {
 return {
 name: 'jeff',
 lastName: 'way'
 };
})();

22. 原生 JavaScript 总是会比使用代码库来的快

诸如jQuery和Mootools这样的JavaScript库，能为你写代码的过程省下不少时间——尤其是当需要 AJAX 操作时。不过你可得记住，只要你的代码写得恰当，原生JavaScript总是会比利用代码库的写法执行得快一些。

jQuery的“each” 方法对于循环操作十分便利，但是使用原生态的for语句总归会快很多。

23. Crockford 的 JSON.Parse

尽管 JavaScript 2会内建JSON处理器，但写这篇文章之时，我们还是需要自己实现。Douglas Crockford，JSON的创建者，已经为我们创作出能直接使用的处理器了。您可以在这里下载。

导入这段代码，你就能新建 JSON 全局对象，然后处理你的 .json 文件。

var response = JSON.parse(xhr.responseText);
var container = document.getElementById('container');
for(var i = 0, len = response.length; i < len; i++) {
 container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}

关于JSON，请查看更多介绍。

24. 移去“Language”

很多年前，language还是每段script标签必备属性：

<script type="text/javascript" language="javascript">
...
</script>

不过现在，这属性已经没啥用很久了…… 所以，删掉算啦！

就这些了，朋友们~

就是这些了，这就是我给JavaScript初学者的24条小建议。各位亲爱的朋友，你们的看法呢？你们有什么快速小贴士吗？感谢你的耐心阅读。

英文原文：24-javascript-best-practices-for-beginners

译文原文：给JavaScript新手的24条建议

© 请尊重版权，若需转载，务必保留链接。

©2009 笨活儿 | 永久链接 | 已经有6条评论了 | 推荐到豆瓣

在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。

1. 滑动样式与传送带(Sliders and Carousels)

滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。

滑门样式的实例

导航区提供缩略图与图标
运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。

Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片， 或者只用数字也行。

用于展示产品的滑门样式
与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的），用唱片封面作为导航条目。

水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。

垂直滑动的内容以及超大的水平“点击条”
接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。

还有，这些按钮的:active和:focus效果也很漂亮。

滑门脚本

你可以参考下面的脚本、技巧和教程制作你自己的滑门：

• Slick Accessible Slideshow using jQuery
• Coda-Slider 1.1.1
• jquery.scrollable 1.0.2
• Create an Amazon Books Widget with jQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• iCarousel

2.标签卡导航元素

本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小的一个区块中。

标签卡的样式范例

出众的背景，大的可点击区域，明显的分割
第一个例子来自 Mac Pro网站 的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区块在其上有微弱的投影，这种做法加强了深度感和立体效果。十分简单而有效的技巧。

按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits 的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。

为整个标签集提供清晰的分割线
Fontcase 的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条边线。标签卡使用了图标与留白来突出文字，提高了易用性。

标签卡效果脚本

• Create a Slick Tabbed Content Area using CSS & jQuery
• JavaScript tabifier
• Yetii – A JavaScript Tab Interface
• Tabbed Page Interface
• Updated JQuery Nested Tab Set
• Scriptaculous Tabs
• Accordian Tabs

3. 模态窗口

模态窗口（Modal windows），或者称为浮窗，一般用于在空间紧张的页面中展示额外信息。在模态窗口中，你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时，记得要同时明确地提示用户如何关闭它。

同时，用于打开模态窗口的链接、缩略图、图标或者其他图形元素，一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。

模态窗口的例子

运用到登录和注册流程中的浮窗
模态窗口最典型的运用就是登录／注册窗口了（与诸如图像、音频、视频、Flash等“传统”媒体文件相比）。登录和注册表单不是用户每次浏览页面都要用到的必要部分，所占页面空间理所应当被节约下来。而使用浮窗，则又为用户省去了重开一个页面的时间，毕竟这只是一个很简单的非常用动作。他们能在网站的任何页面中登录/注册，而不用中断现有流程——只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。

Grooveshark 整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（ Lodin> ）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登陆表单（使用了手风琴效果）。非常方便，非常友好的用户界面。

消隐页面/使用投影
如果要使用模态窗口，让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或者为窗口添加投影，或者两者结合。这么做有两个作用：一是能让用户将注意力集中到浮窗上，然后暂时忽视掉背后的页面。另外，也能增加窗口和页面之间的深度感和区分度，让人在视觉上觉得这窗口确实是漂浮着的。注意看下面的例子(KissMetrics)，半透明的黑色背景让页面消隐，有助于登录浮窗暂时成为视觉重点。另外，取消和关闭窗口的按钮也设计得很好，够明显，够漂亮。

RealMacSoftware 的浮窗只做了投影，而没有让整个页面消隐。只要深度感和区分度做得足够，这样也很有效。

模态窗口的脚本

• Fancy Lightbox
• Lightbx 2
• Facebook Image/Content Viewer
• Woork Mootools Lightbox
• nyroModal JQuery Plugin
• JQuery Alert Dialog
• LightWindow
• ThickBox 3.1

4. 翻转元素 Rollover Elements

翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时，处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。

翻转实例

标签卡翻转
下图是 Miro主页 的截屏，他们设计了一个十分精妙的巨大翻转元素。这 本质上和滑门类似 —— 只不过内容切换时不需要点击罢了。

小地方的微妙翻转
TaoEffect 向我们完美展示了如何通过设计精巧漂亮的翻转元素来添加清爽整洁的额外信息（这种效果最早是应用于前文提到过的Coda网站，但我们选择了TaoEffect作为这一节的实例）。信息的展示十分友好，您只需要把鼠标移到按钮上即可。

访问网站你会发现，翻转时有非常轻柔的动画，垂直跳动 + 淡入淡出。你应该也能注意到它的背景是半透明的，跳出来的卡片边缘还有高光和投影，与背景很好的区分开来。

内容地图上的翻转元素
OneHub 则利用翻转元素实现了另一种效果。这个页面有点像地图，在不同区域做出了标注。鼠标移到标注上时，会显示该标注的额外信息。这种方法用在需要分区域详细解释的产品介绍页上将有特效。

与幻灯切换结合的翻转元素
另一个蛮有趣的设计来自 SquaredEye —— 他们在导航按钮上用翻转元素来展示下一页内容的预览图。

小提示/翻转元素的脚本

• Prototip 2
• Coda Popup Bubbles
• Build a Better Tooltip with jQuery Awesomeness
• jQuery plugin: Tooltip
• Create a Simple, Powerful Product Highlighter with MooTools
• Easiest Tooltip and Image Preview Using jQuery

5. 渐进布局Progressive Layouts

“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常，但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。

渐进布局的实例

整个站点都由渐进布局构成
Sursly.com（貌似被墙，请点击这里代理访问）的整个作品集站点都基于渐进布局。您应该能注意到，页面右上角有一个“GO”按钮，每一页面都是从上一页面中的GO按钮链接过来的。这种页面之间的渐进系统代替了传统的导航和菜单。当然，这样做也有一个很明显的缺点：导航的交互性下降了，用户只能按照网站建设者想要的顺序获取内容。（译注：还有一个缺点是，在不同分辨率屏幕上的显示差异太大，因为你必须考虑到页面内部各区块的位置问题）

尽管单个页面布局能被存为书签（使用# 锚记），但对于随机访问者来说，则无法通过一个明晰的导航对站点内容建立起直接的整体感知。而且，这种布局一般只有一个“航向”，从易用性的角度上来说，所谓“导航”的概念在这里几乎不能适用。

译注：这种水平布局的网站大都采用了渐进布局。和上面的站非常类似的一个网站是： peter-pearson.com 相对于简单的滚动，这个站还在背景里做了非常可爱的线条，十分漂亮。另外推荐 26个水平布局网站设计，在英文原文的留言里还有很多bonus可看。

垂直方向的渐进布局
Danny Blackman 的作品集也是仅通过一张渐进式布局页面来实现的。各块元素相互独立，在一张页面上垂直展示。相邻元素之间有滚动按钮，每个元素都有返回顶部的按钮。菜单或所谓导航还是没有被使用。

译注：推荐一个做得更好的例子：searchinsidevideo.com 他们使用了固定在顶端的导航，字体也非常大的，极富视觉冲击力，用起来也很方便。

ScrollTo 脚本

• ScrollTo – 使用这个jQuery插件，就能轻松建立渐进式布局。

6. 网格

讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时的必备武器。有时候单独使用网格就能很好的展示信息，甚至不需要其他技巧。好的网格能够将一个页面中的全部内容都整合进流动布局里，而内容的可读性，或者如果用户想快速浏览，都不会受到影响。

下面的网站使用了严格的网格布局。整个站点只有一张页面，需要融入大量信息。不过，全部信息被整合进这整洁的两栏布局网格中。整个布局严谨、强健、稳固，留白恰到好处。浏览或仔细研读内容都非常方便。

使用不同背景区分网格区域
使用网格一般是因为你需要在一个很紧凑的区域内放置大量内容。你想要创建整洁有序的网站布局，但是又不能随意添加很多留白来区分区块。如此的话，你就需要使用不同背景来区分网格区域。没了网格间的大量留白，只要网格内还有少量的内边距，也可以看起来很不错。Valleycreek.org 就用了这种战术，尽管已经有一条细线来分割网格区域，背景色的差异还是被用到，以提供更明显的区分。

网格生成器、模版和更多工具

• Grid System Generator
• Variable Grid Systems Generator
• 960 Grid System
• Grid Designer
• Grid Calculator
• 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)

7. 手风琴效果（折叠菜单）

折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。

手风琴效果的实例

功能性和大点击区域
Alex Cohaniuc 的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背景色。

水平内容滚动
Jason Reed 使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，这是一个水平方向推拉的手风琴（尽管标签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。

包含图像和信息的手风琴
Marius Roosendaal 使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。

手风琴脚本

• Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
• Apple.com Downoads Page Slide out and drawer effect
• UI/API/1.7.1/Accordion jQuery Plugin
• jQuery UI Accordion
• Simple JQuery Accordion menu
• jQuery Accordion Madness
• jQuery Examples – Horizontal Accordion

8. 超大下拉菜单

导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信息，而不需要用户额外的点击。

超大下拉菜单的实例

超大下拉菜单的一个经典例子是 Ruby On Rails Guide 的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。

译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）

下面的截图里的投影，我也看不到……

带更多信息的多级菜单
Porsche 对于上面说到的技巧来说，简直是一个完美的例子。Porsche 的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己去看看吧！

在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base 就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。

在下拉区块中显示额外信息
Gateway.com 继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。

菜单脚本

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 – JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery

更多资源

你应该也会喜欢（全是英文）：

• 5 Useful Coding Solutions For Designers and Developers（代码解决方案）
• Designing Drop-Down Menus: Examples and Best Practices（下拉菜单）
• Slideshows in Web Design: Where And How To Use Them（幻灯片）
• 40 Creative Design Layouts: Getting Out Of The Box（40个创新性布局）
• Web Design Trends For 2009（2009年网页设计趋势）
• Table Layouts vs. Div Layouts: From Hell To… Hell?（表格布局vsDiv布局：走出地狱，升入……地狱？ ）

关于作者

Matt Cronin 是一位富有激情的平面设计师，网页设计师/开发者，Cocoa程序员，摄影师，数字艺术家，等等。他也热爱写作，已经为Smashing Magazine写过很多好文。他现在正着手于一个叫做i VAEOU 的项目，不久之后就能面试。 Follow Matt on Twitter.

译文原文来自笨活儿，转载请保留本链接：提升设计品质的8个布局方案。

英文原文：8 Layout Solutions To Improve Your Designs

本文译自Smashing Magazine。从今以后，凡是译自Smashing Magazine的文章都在标题后加注SM，不再另行说明。

然 后，刚才发现译言上已经有本文的翻译了，不过是分上下篇发的。虽然有译文，我还是自己独立把本文给译完了。我想说的是，我这人比较耿直，绝对不会把 原文切割，分为几个部分来发。翻译的时候忠实原文也是我很看重的，所以我不会随意精简原作者的话，大家如何觉得罗嗦，还是多多包涵吧！

©2009 笨活儿 | 永久链接 | 已经有14条评论了 | 推荐到豆瓣

英文原文来自Smashing Magazine。由笨活儿翻译。转载请注明出处。

正则表达式(Regular Expression, abbr. regex) 功能强大，能够用于在一大串字符里找到所需信息。它利用约定俗成的字符结构表达式来发生作用。不幸的是，简单的正则表达式对于一些高级运用，功能远远不够。若要进行筛选的结构比较复杂，你可能就需要用到高级正则表达式。

本文为您介绍正则表达式的高级技巧。我们筛选出了八个常用的概念，并配上实例解析，每个例子都是满足某种复杂要求的简单写法。如果你对正则的基本概念尚缺乏了解，请先阅读这篇文章，或者这个教程，或者维基条目。

这里的正则语法适用于PHP，与Perl兼容。

1. 贪婪/懒惰

所有能多次限定的正则运算符都是贪婪的。他们尽可能多地匹配目标字符串，也就是说匹配结果会尽可能地长。不幸的是，这种做法并不总是我们想要的。因此，我们添加“懒惰”限定符来解决问题。在各个贪婪运算符后添加“?”能让表达式只匹配尽可能短的长度。另外，修改器“U”也能惰化能多次限定的运算符。理解贪婪与懒惰的区别是运用高级正则表达式的基础。

贪婪操作符

操作符 * 匹配之前的表达式零次或零次以上。它是一个贪婪操作符。请看下面的例子：

preg_match( '/<h1>.*< \/h1>/', '</h1><h1>这是一个标题。</h1>
<h1>这是另一个。</h1>', $matches );

句点(.)能代表除换行符外的任意字符。上面的正则表达式匹配 h1 标签以及标签内的所有内容。它用句点(.)和星号(*)来匹配标签内的所有内容。匹配结果如下：

这是一个标题。
这是另一个。

整个字串都被返回。* 操作符会连续匹配所有内容—— 甚至包括中间的 h1 闭合标签。因为它是贪婪的，匹配整个字串是符合其利益最大化原则。

懒惰操作符

把上面的式子稍作修改，加上一个问号(?)，能让表达式变懒惰：

/<h1>.*?< \/h1>/</h1>

这样它会觉得，只需匹配到第一个 h1 结尾标签就完成任务了。

另一个有着类似属性的贪婪操作符是 {n,} 。它代表之前的匹配模式重复n次或n次以上，如果没有加上问号，它会寻找尽可能多的重复次数，加上的话，则会尽可能少重复（当然也就是“重复n次”最少）。

# 建立字串
$str = 'hihihi oops hi';
# 使用贪婪的{n,}操作符进行匹配
preg_match( '/(hi){2,}/', $str, $matches );  # matches[0] 将是 'hihihi'
# 使用堕化了的 {n,}? 操作符匹配
preg_match( '/(hi){2,}?/', $str, $matches );  # matches[0] 将是 'hihi'

2. 回返引用(Back referencing)

有什么用？

回返引用(Back referencing)一般被翻译成“反向引用”、“后向引用”、“向后引用”，个人觉得“回返引用”更为贴切[笨活儿]。它是在正则表达式内部引用之前捕获到的内容的方法。例如，下面这个简单例子的目的是匹配出引号内部的内容：

# 建立匹配数组
$matches = array();
# 建立字串
$str = "\"This is a 'string'\"";
# 用正则表达式捕捉内容
preg_match( "/(\"|').*?(\"|')/", $str, $matches );
# 输出整个匹配字串
echo  $matches[0];

它会输出：

"This is a'

显然，这并不是我们想要的内容。

这个表达式从开头的双引号开始匹配，遭遇单引号之后就错误地结束了匹配。这是因为表达式里说：("|')，也就是双引号（"）和单引号（'）均可。要修正这个问题，你可以用到回返引用。表达式\1,\2,…,\9 是对前面已捕获到的各个子内容的编组序号，能作为对这些编组的“指针”而被引用。在此例中，第一个被匹配的引号就由1代表。

如何运用？

将上面的例子中，后面的闭合引号替换为1：

preg_match( '/("|\').*?\1/', $str, $matches );

这会正确地返回字串：

"This is a 'string'"

译注思考题：

如果是中文引号，前引号和后引号不是同一个字符，怎么办？

还记得PHP函数 preg_replace 吗？其中也有回返引用。只不过我们没有用 \1 … \9，而是用了 $1 … $9 … $n （此处任意数目均可）作为回返指针。例如，如果你想把所有的段落标签 <p> 都替换成文本：

$text = preg_replace( '/<p>(.*?)< \/p>/',
'&lt;p&gt;$1&lt;/p&gt;', $html );

参数$1是一个回返引用，代表段落标签

内部的文字，并插入到替换后的文本里。这种简便易用的表达式写法为我们提供了一个获取已匹配文字的简单方法，甚至在替换文本时也能使用。

3. 已命名捕获组(Named Groups)

当在一个表达式内多次用到回返引用时，很容易就会把自己弄糊涂，判断N个数字（\1 … \9）都到底代表哪一部分会比较困难。这是就可以用到带名字的捕获组（下文简称“有名组”）。有名组使用(?P<pattern>)来设定，name代表组名，pattern是配合该有名组的正则结构。请看下面的例子：

/(?P<quote>"|').*?(?P=quote)/

上式中，quote就是组名，"|'是改组匹配内容的正则。后面的(?P=quote)是在调用组名为quote的有名组。这个式子的效果和上面的回调引用实例一样，只不过是用了有名组来实现。是不是更加易读易懂了？

有名组也能用于处理已匹配内容之数组的内部数据。赋予特定正则的组名也能作为所匹配到的内容在数组内部的索引词。

preg_match( '/(?P<quote>"|\')/', "'String'", $matches );
# 下面的语句输出“'”(不包括双引号)
echo $matches[1];
# 使用组名调用，也会输出“'”
echo $matches['quote'];

所以，有名组并不只是让写代码更容易，它也能用于组织代码。

4. 字词边界(Word Boundaries)

字词边界是字串里的字词字符（包括字母、数字和下划线，自然也包括汉字）和非字词字符之间的位置。其特殊之处就在于，它并不匹配某个实在的字符。它的长度是零。 \b 匹配所有字词边界。

可惜，字词边界大多数情况下都被无视了，很多人并不知道如何实际运用。 下面举个例子。比如说你想要匹配单词“import”：

/import/

注意了！正则表达式有时候很调皮的。下面的字串也能和上面的式子匹配成功：

important

你或许觉得，只要在import前后加上空格，不就可以匹配 import 这个独立的单词了：

/ import /

那如果遇上这种情况呢：

The trader voted for the import

当 import 这个词在字串开头或者结尾时，修改后的表达式仍然不能用。因此，考虑各种情况是必须的：

/(^import | import | import$)/i

别慌，还没完呢。如果遇到标点符号呢？就为了满足这一个单词的匹配，你的正则可能就需要这样写：

/(^import(:|;|,)? | import(:|;|,)? | import(\.|\?|!)?$)/i

对于只匹配一个单词来说，这样做实在是有点大动干戈了。正因如此，字词边界才显得意义重大。要满足上述要求，以及很多其他情况，利用字符边界，只需如此写：

/\bimport\b/

上面所有情况都得到了解决。\ b 的灵活性就在于，它是一个没有长度的匹配。它只匹配两个实际字符之间想象出的位置。它检查两个相邻字符是否是一个为单字，另一个为非单字。情况符合，就返回匹配。如果遇到了单词的开头或结尾， \b 会把它当成是非单词字符对待。由于import里面的 i 仍然被看成是单词字符，import 就被匹配出来了。

注意，与\b相对，我们还有\B，此操作符匹配两个单字或者两个非单字之间的位置。因此，如果你想匹配在某个单词内部的‘hi’，可以使用：

\Bhi\B

“this”、“hight”，都会返回匹配，而“hi there”则不会返回匹配。

5. 最小组团(Atomic Groups)

最小组团是无捕捉的特殊正则表达式分组。通常用来提高正则表达式的效能，也能用于消除特定匹配。一个最小组团可以用(?>pattern) 来定义，其中pattern是匹配式。

/(?>his|this)/

当正则引擎针对最小组团进行匹配时，它会跳过组团内标记的回溯位置。以单词“smashing”为例，当用上面的正则表达式匹配时，正则引擎会先尝试在“smashing”里寻找“his”。显然，找不到任何匹配。此时，最小组团就发挥作用了：正则引擎会放弃所有回溯位置。也就是说，它不会尝试再从“smashing”里查找“this”。为什么要这样设置？因为“his”都没有返回匹配结果，包含有“his”的“this”当然就更匹配不了了！

上面的例子并没有什么实用性，我们用/t?his?/ 也能达到效果。再看看下面的例子：

/\b(engineer|engrave|end)\b/

如果把“engineering”拿去匹配，正则引擎会先匹配到“engineer”，但接下来就遇到了字词边界，\b，所以匹配不成功。然后，正则引擎又会尝试在字串里寻找下一个匹配内容：engrave。匹配到eng的时候，后面的又对不上了，匹配失败。最后，尝试“end”，结果同样是失败。仔细观察，你会发现，一旦engineer匹配失败，并且都抵达了字词边界，“engrave”和“end”这两个词就已经不可能匹配成功了。这两个词都比engineer短小，正则引擎不应该再多做无谓的尝试。

/\b(?>engineer|engrave|end)\b/

上面的替代写法更能节省正则引擎的匹配时间，提高代码的工作效率。

6. 递归(Recursion)

递归(Recursion)用于匹配嵌套结构，例如括弧嵌套， (this (that))，HTML标签嵌套

。我们使用(?R)来代表递归过程中的子模式。下面是一个匹配嵌套括弧的例子：

/\(((?>[^()]+)|(?R))*\)/

最外层使用了反义符的括号“(”匹配嵌套结构的开端。然后是一个多选项操作符( * | * )，可能匹配除括号外的所有字符 “(?>[^()]+)”，也可能是通过子模式“(?R)”来再次匹配整个表达式。请注意，这个操作符会尽量多地匹配所有嵌套。

递归的另一个实例如下：

/<([\w]+).*?>((?>[^<>]+)|((?R)))*<\/\1>/

以上表达式综合运用了字符分组，贪婪操作符、回溯，以及最小化组团来匹配嵌套标签。第一个括弧内分组([\w]+)匹配出标签名，用于接下来的应用。若找到这尖括号样式的标签，则尝试寻找标签内容的剩余部分。下一个括弧括起来的子表达式和上一个实例非常相似：要么匹配不包括尖括号的所有字符 ?>[^<>]+，要么递归匹配整个表达式(?R)。表达式最后的<\/1>代表闭合标签。

7. 回调(Callbacks)

匹配结果中的特定内容有时可能会需要某种特别的修改。要应用多重而复杂的修改，正则表达式的回调就有了用武之地。回调是用于函数preg_replace_callback中的动态修改字串的方式。你可以为preg_replace_callback指定某个函数为参数，此函数能接收匹配结果数组为参数，并将数组修改后返回，作为替换的结果。

例如，我们想将某字串中的单词全部转换为首字母大写。十分不巧，PHP没有直接转化字母大小写的正则操作符。要完成这项任务，就可以用到正则回调。首先，我们要匹配出所有需要被大写的字母：

/\b\w/

上式同时使用了字词边界和字符类。光有这个式子还不够，我们还需要一个回调函数：

function upper_case( $matches ) {
return strtoupper( $matches[0] );
}

函数upper_case接收匹配结果数组，并将整个匹配结果转化成大写。 在此例中，$matches[0]代表需要被大写的字母。然后，我们再利用preg_replace_callback完成这次回调：

preg_replace_callback( '/\b\w/', 'upper_case', $str );

一个简单的回调即有这般强大的力量。

8. 注释(Commenting)

注释不用来匹配字串，但确实是正则表达式中最重要的部分。当正则越写越深入，越写越复杂，要推译出究竟什么东西被匹配就会变得越来越困难。在正则表达式中间加上注释，是最小化将来的迷糊和困惑的最佳方式。

要在正则表达式内部加上注释，使用(?#comment)格式。把“comment”替换成你的注释语句：

/(?#数字)\d/

如果你打算把代码公之于众，为正则表达式加上注释就显得尤为重要。这样别人才能更容易看懂和修改你的代码。和其他场合的注释一样，这样做也能为你重访自己以前写的程序时提供方便。

考虑使用“x”或“(?x)”标记位来格式化注释。这个修改器让正则引擎忽略表达式参数之间的空格。“有用的”空格仍然能够通过[ ]或\s，或者\ （反义符加空格）来匹配。

/
\d    #digit
[ ]   #space
\w+   #word
/x

上面的代码与下面的式子作用一样：

/\d(?#digit)[ ](?#space)\w+(?#word)/

请时刻注意代码的可读性。

更多资源（英文）

• Regular-Expressions.info Comprehensive website on regular expressions
• Cheat SheetInformative regular expressions cheat sheet
• Regex GeneratorJavaScript regular expressions generator

关于作者

Karthik Viswanathan 是一个喜欢编程和做网站的高中生。你可以到他的博客上查看他的作品：Lateral Code。你也可以关注一下他的线上Twitter应用。

©2009 笨活儿 | 永久链接 | 已经有10条评论了 | 推荐到豆瓣

花了一个星期的时间做笨活儿的WordPress主题，现在终于算是基本成形了。 要不是因为和菜头的推荐给我带来的几千流量，我可能还会把这项工作继续拖下去。正如大家现在所看到的，这是一个色彩厚重的沉闷主题。我给它取的名字是Blue Homing。蓝色归家路。 Why? 因为logo被我不小心画成了面包车，然后页顶Branding就顺便做成了一条波浪……  虽然没有让人惊艳的美感，但好歹是我自己的东西了，所以还是赞自己一个！ 为了尽快完成，五一这三天，我成了完完全全的宅男。昨天最夸张，早上6点50起床，然后就坐到电脑前，到晚上六点才吃第一顿饭，然后又继续工作到晚上11点半…… 话说吃饭的时候由于饿得太厉害，血糖太低，几口饭下去就感到有点头晕…… 喘不过气来…… 厉害哇~ 哇咔咔~  昨天的样子十分糟糕。三天没洗头，连续在电脑前的工作又熬出了小痘痘，饿了大半天又让脸色苍白……  嗯哼，大家可以想象一下。

英国达人  萨克斯手  Julian Smith

话说昨天还做了一段英国达人的字幕，第二集的萨克斯手Julian Smith。一段能让人听哭的萨克斯风演奏（话说我第一次看的时候也被感动了……）。其实我相信，很多人都能吹到他的水平，只是想到他的梦想，想到这个节目可能带给他的转变，再加上他演奏的整个气场……  话说回来，这段音乐如此美妙。 然后有一个比较大的问题，这段音乐到底叫什么？我听着反正是很熟悉，觉得有点像Over The Rainbow，可惜好像又不是…… 会不会是Over The Rainbow的改编版？有请知道的朋友留言告知。 UPDATE: 根据网友logo715的考证，这段音乐出自音乐剧《西区故事》，叫做《Somewhere》。在谷歌音乐可以找到正版免费下载！。

优酷观看：http://v.youku.com/v_show/id_XODg2MzIwODg=.html

如果你RSS阅读器无法显示视频，请打开文章链接观看。

点击下载高清版！

土豆上我也传了有，如果优酷缓冲太慢，大家可以去土豆试一下。因为土豆狗日的把.com，.cn等链接关键词屏蔽掉了，我没法贴我的博客链接。So…… 我要抵制它！就不把他们的连接发上来了。 继续唠叨一下，昨天做字幕的时候明显感觉脑子反应变慢了。因为持续working on the template，累得要死…… 直接后果就是时间轴没法一步到位，必须费时间重新校正…… 已经又有新的一集《英国达人》了，我正在下载，遇到好节目我会第一时间放上来和大家共享~ !

关于这个主题：

完全自主开发。嗯哼。没有什么icon，只用了一个hand-drawing的RSS按钮和fam fam fam的bullet dot icon（自己换了颜色）。圆角是用《[译]40个实用的轻量级JavaScript库 》一文里介绍的DD_roundies实现的（因为我始终觉得纯CSS的圆角太麻烦，而且也会给破坏xhmtl的语义性）。除此之外，整个主题自身根本没有用到什么JavaScript。 说到语义性，为了实现博客的外观，我加了一个div#top-fucker以及很多wrapper，代价不可谓不大。由于要赶时间，很多CSS的实现方法，没有仔细推敲，欢迎大家反映bug，或者推荐代码优化方式。 页眉的topics现在展示的是最常用的几个tag，我的打算是等将来博客的文章多了，我写得也有点专攻了，再整理几个常用主题出来。

遭遇的瓶颈以及解决经验

由于我是第一次做WordPress的主题，也是第一次来了解WordPress主题的制作过程。所以做这个主题的过程中，遇到了很多难题。一些问题解决了，另一些则要么放弃了功能实现，或者要么另外找到了替代方案。等这段时间忙完，我会把我做主题的过程中，遇到的最费时的问题，以及到现在都还没解决的问题发出来，与大家共同探讨。

敬告IE6和Opera用户

本博客并没有针对IE6做过优化，所以你可能会遇到一些显示不正常。鉴于IE6用户占了本站访客的1/3强，所以专门提出来提醒一下。 强烈建议你改用Firefox或Google Chrome，或者至少升级你的浏览器。 不过很抱歉的是。在IE8下，页面的圆角样式显示也会有些异常。这是DD Roundies这个插件造成的。建议你用兼容性视图浏览。 由于我没有安装Opera，所以本博客在Opera的表现也没有经过调试。祝君好运！

©2009 笨活儿 | 永久链接 | 已经有3条评论了 | 推荐到豆瓣

JavaScript库的灵活性给我们的工作提供方便，但有利也有弊——比如说JavaScript文件过大的问题。尽管放弃这些著名的JavaScript库能显示你的聪明才智，但你可能还是会愿意采用一些体积小巧、专注于特定任务的JavaScript库。

以下是40个帮助你达到特定目的的独立JavaScript库。 网上能用的当然不只这些，但每位网页设计师和程序员应该都能在这里有所收获。

1. 表单

wForms
wForms 是一个开源的、 无入侵的(unobstrusive)^注*代码库，能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证，只需为表单元素添加一个特定的类即可使用。另外，wForms 还具有强大的表单同步（例如“全选/全不选”）和条件表单（如，当x被选择则显示y）功能。

注* 这个词也被译为“不唐突”，“有的放矢”等。意即JavaScript代码和HTML代码分离，同时也对不同版本浏览器选择性地做出反应，以提高用户体验。更多解释，请参照“为之漫笔”。译者认为“无入侵”贴合英文原文，作为术语更加简洁易懂，应该成为这个词的通用译法。

Validanguage
Validanguage 是一个无入侵的 JavaScript表单验证框架。 它有一个继承逻辑，可以全局定义，也可以对每个表单或每个元素分别定义。 利用作者提供的两个API，以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性，该框架可以提供强健的(robust)验证体验。两个API用以高级设置，分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。

LiveValidation
LiveValidation是一个轻量级的JavaScript库，提供一系列验证函数。除了经典验证法，此库还具有实时验证(live validation)特性，能根据你键入的文字实时控制特定区域。 Ruby on Rails的开发者会发现LiveValidation异常好用，因为二者的命名规范和参数设置非常相似。虽然它是独立库，不过也有一个Prototype版^注*。

注* 也就是依赖于Prototype库，但是本身代码更简洁的版本

yav
一个功能强大、可扩展、使用灵活的表单验证代码库。yav可处理多种情况，从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用，都得心应手。该库内建AJAX支持，并且可以轻易在每个对象层自定义错误显示信息。

qForms
处理表单的完全解决方案。为开发者提供诸如多样验证规则，阻止多次提交，锁定/禁用域等特性。

formreform
不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。

2. 动画

$fx()
$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库，你可以指定在一定时间内改变任何CSS属性。对于复杂动画，你可以合并效果，给各效果分组，让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作，进行更深入的自定义。

JSTweener
补间动画的JavaScript库。它的API和著名的ActionScript补间动画引擎 Tweener 相似。你可以调用动画时间，定义形状变换方式和延迟。在几乎任何时间点（如onStart – 开始时, onComplete -完成时, onUpdate – 更新时），你都可以引发新动作。

Facebook Animation
用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation，你就能改善用户界面。本代码库的语法遵循FBJS（在Facebook实用工具中使用的代码库），一旦学会，你也就具备了创建Facebook实用工具的能力！

FX
一个轻量级代码库，拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象，任意属性的起始值和结束值就够了。

3. 视觉化和图像特效

JS charts
JS charts 可以输出柱状图，饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据，它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。

Canvas 3D JS Library (C3DL)
C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类，对于想在浏览器里开发3D内容，但是对3D图像的深层算法不甚了了的程序员真是不小的福音。

Processing.js
这个JavaScript库指向 Processing 语言 （一个用于图像、动画和交互编程的语言）。它有丰富的特性用于创建2D输出，提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。

Rapha?l
一个极赞的代码库，简化在网页中使用矢量图形的工作。Rapha?l 利用SVG和VML来创建图像，并能为这些图像绑定动作处理器。该库功能强大，包括旋转、动画、缩放和绘制曲线、矩形、圆形等。

ImageFX
可以为图像添加特效，例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器（你可以在其页面看到兼容性列表）。此库简单易用，只需要在网页中插入.js文件然后用一行代码调用就够了。

Pixastic
Pixastic 使用HTML5的画布对象，此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新，各个浏览器对这一JavaScript库的支持程度不尽相同。

Reflection.js
自动创建倒影效果的无侵入JavaScript库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作，文件大小不过5 KB。

4. 数据库

Taffy DB
可以作为浏览器中的SQL数据库来使用的JavaScript，也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中，它可以工作在数据库层。你可以创建、读取、编辑和删除数据，也可以使用循环、归类以及各种高级查询方式。

ActiveRecord.js
此库支持Google Gears和Chrome，Aptana Jaxer，Adobe AIR ，以及任何支持W3C HTML5 SQL规范的平台（现在Webkit和iPhone也支持了）。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。

5. 字符串和数学函数

Date.js
和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期：“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。

译注：此函数很有用啊，哪位朋友来把它汉化成可以支持中文就好了。

Sylvester
此JavaScript库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类，从而可以计算无限直线的模数和3D空间里的平面。

译注：太高级了，直冒冷汗“` -_-||

Pretty Date
一个聪明的JavaScript解决方案，让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示，如“3天以前”，“昨天”。

XRegExp
正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大，它提供一些在将来的浏览器才会实现的特性（据 ECMAScript 4 – ES4 的开发愿景）。使用该库，RegExp对象可以被缓存和再利用，还能为已经存在的RegExp对象添加修改器等等。

JavaScript URL Library
一个用与方便处理URLs的JavaScript库。如果需要，它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久，但已能像刚才所提一样工作。

6. 字体

typeface.js
一个用以在网页上使用任意字体的代码库。与流行的解决方案（如sIFR 和 FLIR）不同，typeface.js 并不需要Flash，是100%的JavaScript应用。要使用任意字体，只需上传其字体文件到一个 基于网页的字体生成器，然后下载渲染过的JavaScript文件，把它添加到你的网页中即可。

Cufón
与typeface.js十分相似， Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样，它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件，你即可像使用普通字体一样使用你指定的字体。

译注：这两个工具对于中文网页不太实用…… (⊙_⊙)

7. 调试与记录

Blackbird
在JavaScript开发过程中，经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台，用以记录、查看和过滤JavaScript中的消息，如此即可消除在每个alert()的停顿，并且更好地分析它们，从而加快开发进程。

NitobiBug
基于浏览器的，跨浏览器 JavaScript 对象记录和检测组件。通过在你的代码中插入规则（和JavaScript对象的用法类似），你可以轻易区别简单类型，如字符串、布尔值和数值，以及复杂元素，如错误信息和JavaScript对象。

Firebug Lite
Firebug，大概是世界上最好的JavaScript调试工具，可惜只能在Firefox中使用。要在所有浏览器中拥有一个类似工具，向你的网页添加这个Firebug Lite .js文件吧，面对你的是你所熟悉的功能和界面。

8. 其他

swfobject
swfobject 是最流行的，扩展性最好的插入Flash影片的方式。此库符合Web标准，生成可以通过验证的标记，能够自动检测用户的Flash播放器版本，如果版本不匹配，它还允许你向用户显示代替内容。你可以看一看“为什么应该使用swfobject”这篇文章，写得不错。

sorttable and dragtable
不管你喜不喜欢，表格仍然是展示数据的最佳方式。不过表格还可以更好用： sorttable 让表格数据可以排序，升序降序均可。你指向为添加class=”sortable” 属性。你还可以排除某些特定的栏，让他们不自动排序，以及指定升序或者降序哪一个为默认值。dragtable 使表格的行列变得可拖动。在网页中插入此库后，同样，给表格添加一个class=”dragtable”即可。如果需要两个功能都用，只需在网页中包含同时两个库，然后添加class=”sortable dragtable” 。

DD_roundies and DD_belatedPNG
DD_roundies 是一个极佳的不利用图片创建圆角的JavaScript解决方案。它处理的重点在IE，通过使用VML来解决问题。其他浏览器被忽略，因为他们支持CSS的 border-radius 属性。(译注：Really?)

DD_belatedPNG为臭名昭著的IE6 PNG问题提供了一个可自定义的解决办法。不论PNG图像是用于“src”或是“background-image”中， DD_belatedPNG 都能把它解决掉。与其他解决方案不同， “background-position” 和 “background-repeat” 属性也能正常工作！

译注：这个太实用啦！O(∩_∩)O 哈哈~

Custom JavaScript Dialog Boxes
用于创建自定义对话框的轻量级（约 4.5 KB）代码库。四种对话框可用： alerts(出错), warnings(警告), prompts(提示), success(成功)。利用一个简单的函数，你可以自定义对话框的标题，内容和显示时间。

GameJS
GameJS 是一个JavaScript版本的 Microsoft’s XNA 游戏框架， 使用 “画布” 作为渲染机制。JavaScript不是编写游戏的最佳平台。不过如果是那些帧速要求较低的游戏，而你又是一个JavaScript开发者，何乐而不为？ 此库包含一些控制游戏元素、屏幕显示和键盘操作的方便好用的类。

Shortcuts.js
自从Google Reader和Gmail之后，Web应用里的键盘快捷键变得越来越流行，因为他们大大提升了易用性。Shorcuts.js提供更为方便地处理键盘快捷键的函数。 使用该库，创建快捷键，然后在按下键盘的同时就运行函数成为更易实现的可能。

Mapstraction
几个不同的地图供应商都提供了各自不同的API。如果你想在供应商之间转换（比如说从Google Map转到MapQuest），则需要重写一些代码。Mapstraction就是用来帮你解决这个问题的。它提供一个通用 API ，帮你在大多数流行的地图供应商之间转换。只需更新一行代码，即可转换完毕。

Amberjack
一个小巧的JavaScript库，为你的网站添加上漂亮的导游信息。 一旦启用，一个模式化的内容框就能像到导游一样介绍您的站点，框内可以添加任意你想要的内容。导游内容的代码可以手工编写，也可以用线上工具自动生成。当然，你可以通过编写css或者利用即刻可用的主题来使导游信息符合内容框的样式。

JsLoad
JavaScript库的远程载入API。JsLoad这个简单的API能够让你从Google的服务器上导入大体积JavaScript文件。JsLoad能自动载入任何版本代码库的依赖文件。

关于作者

Umut Muhaddisoglu是一位网页设计师，同时也是程序员。他维护网站WebResourcesDepot，一个每天提供免费网页设计和开发资源的网志。要联系作者，你可以在Twitter上关注他。

(完)

©原文 40 Useful JavaScript Libraries 来自Smashing Magazine ，作者为 Umut Muhaddisoglu。译者笨活儿保留译文版权，转载请保留出处和此版权信息。欢迎留言指正错误。

©2009 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

很久没有做过翻译了，在My Ink Blog看到一篇interview，觉得可以让自己受一点启发。Liam McKay应该是网站wefunciton的站长，自由设计师，才19岁啊，前途无量，厉害，厉害。现在本博客使用的主题就是他做的。自惭形秽地飘走～～

过去几个月，我被Function团队Liam McKay的作品深深打动。他是一个正持续成长和水平不断提高的设计师。他的每项设计看起来都像是相关项目的最优设计。非常令人印象深刻；我多希望我自己的作品也能这样！

以下是访谈内容。

谈一谈你的背景，你来自哪里，是如何开始做设计的

我来自英格兰中部的小城Coventry。我从小就对所有设计相关的东西感兴趣。在学校里艺术一直是我最喜欢的科目，因为在这个科目上我们需要更多的亲自动手实践。很小的时候我就知道我会从事艺术相关的事业。

我爸电脑上有Photoshop，所以打小我对这个工具就很熟悉。我会到处捣鼓，用它来做各种各样的东西。直到我开始做网站（有些做得相当糟糕）。中学毕业后我决定到大学学两年多媒体技术。在大学里我才正式决定我要成为一名网页设计师。

你最近的大部分作品都是WordPress的主题。这个平台吸引你的地方是什么？和其他选择比起来，你觉得它有什么优点和缺点？

WordPress现在已经成为我的第一选择。我用过的第一个CMS是Mambo（曼波） (现在的 Joomla) ，我用它来做我自己网站的主题，但后来我不断见到别人用WordPress构建的站点，都给我很深印象。在当今的web世代，你不可能不注意到越来越多多人正在使用WordPress。 所以当建立function博客的时候我就想，也许是时候试试WordPress了。现在看来，这个决定是正确的，我喜欢这个系统。

你的设计总是充满原创性和智慧，你的灵感来自哪里？

让我产生设计灵感的方法是不确定的。我一直都很关注其他形式的设计。我喜欢看动画，浏览一些数字艺术方面的东西。其中有很多很成功的作品，艺术家们都很有试验精神，探求着各种不同的设计风格。有时候这方法管用，有些时候不管用。但你总是会从试验中得到一些东西，所以即使不管用，你仍然没有浪费时间。另外一种比较传统的方式就是通过看其他高水准站点。一直以来我最喜欢的两个地方就是 Best Web Gallery和Pattern Tap，在这里你总能看到顶尖的高水平设计。

作为设计师，要平衡你需要同时完成的工作几乎是不可能的任务。在这方面你是怎么做的？给我们谈一谈你典型的一天吧。

还是那句话，我做事情的方式并不是固定不变的。但我会尽量把事情及早处理掉，以保持对事务的控制能力。比如说读完email就立刻写回信，收到账单或者客户付款就立马记录下来。这样你就不用老是问自己——“那东西我寄了没？”——有点像在当天晚上就完成老师布置的作业，而不是将它推到最后一天

至于说典型的一天，我一般会工作到很晚——早上起床给自己冲一马克杯咖啡，消化掉RSS订阅， twitter 和电邮。然后我得送我妹妹去上学，回来之前我不会做任何设计的工作。但一旦我回家了，一般就会从中午一直工作到午夜。当然了，休息和吃饭也是必须的！看看电视啊，玩玩Xbox 360啊，偶尔会有的。大部分我的时间还是在工作桌前，为客户工作或者做一些个人项目和试验。

除了Adobe的系列产品和互联网，什么软件、硬件、书籍或者其他东西让你的工作完成得更加轻松？

FreshBooks（一个客户跟踪服务软件）是我使用的唯一一个应用。 其他东西我一般写下来，需要做成数据表的我就用OpenOffice。我不是那种喜欢读书的人。老实说，出生以来就没有一本书是我完完整整读完过的。我没有那种耐心。但我还是很喜欢读博客的。读别人的博文能让我充满灵感，然后专心于我的工作。我学了很多东西，特别是过去几个月，都是从各式各样的网站和博客上学到的。我有一个电子绘图板，我非常喜欢这东西，但并不常用，虽然我确实想多用用它。用这东西的时候的确能节约很多时间。

什么技术你不是特别精通，而你又想在其上有所提高的？

这么说吧，上个工作我深深的陷入了XHTML和CSS的汪洋中，对此我并不奇怪，但我觉得用不了多久我就能在这上面变得非常完美。从我在function的程序员Spencer那里，我也学到了很多。但真的，我很愿意能在开发方面做更多工作，因为现在我完全只关注了设计方面的东西。而且虽然我现在对WordPress比较熟悉，但还是不能做了设计后然后完全靠自己写一套完整的主题代码出来。希望年前我能挑战一下这个任务！

你接受过的最好的建议是什么？

我还记得在我决定做一个自由设计师前读过的一篇文章。主要是讲如果你清楚你自己有多有能力，就不要管别人说什么。决定是否要当自由工作者时我挣扎很大。当时我有一份不错的工作，薪金也蛮高，但我就是觉得自己做的不是一项能够让自己引以为傲的工作。获得自由身好像有很多副作用，也让人不得不担心自己的将来，所以当时很多人都劝我不要那样做。这是很令人沮丧的，因为我知道自己的能力，我有如此多的想法，结果推迟了很久都不能实现。但读了那篇文章之后，我知道我可以全身心地开创我自己的奇迹。我希望我还能记得那篇文章的地址，这会对本次访谈很有帮助，但记不得了，抱歉！

Mac还是PC，为什么？

Mac！我已经渐渐地厌烦了我的PC。 一直以来我都是用的PC，结果就总是遇到各种问题，特别是病毒。你最不需要的就是你正专心做设计，结果你的PC死机了！3天前我换成了Mac，然后对她是一见倾心啊，用起来得心应手，我觉得这钱花得很值。

现在还只是刚开始体验，所以我不想把话说得太早，但我能看出来为什么Mac的用户在不断增长。以前我有一点不喜欢苹果公司的产品，结果现在我给自己买了iPhone和iMac。这个转变实在是有点大的，以前我都用的Zune和PC。我想现在我对苹果产品的喜欢程度大于以前对其的厌恶吧！

当你不在电脑前做设计或者写博客的时候，你做什么来完全远离这些事情？

这个么，我才19岁（苍天啊～～天地良心哪～～～同样的19岁，差别咋个这么大勒～～），所以我还是很喜欢做点娱乐活动的。我会尽量让周末空出来，不做设计，不工作。我有一帮好朋友，和他们一起的时候很开心，所以我会花尽量多的时间和他们在一起。我很喜欢开车和公路旅行。在大学里结交的全国各地的朋友，让我有机会可以在周末开车到各个地方旅行。我都想不出我自己到底有多喜欢旅行！我还喜欢玩一些纪实类游戏，我不喜欢那些有怪兽和魔鬼的，我更喜欢现实的场景，GTA4和一些运动类游戏比较合我的口味。是啊，这爱好有一点奇怪的。（-_-||）

为客户设计时你最大的挣扎是什么？

我觉得在寄出你的设计，然后等客户反馈信息的时候是最恼火的。那种情况下我都会变得非常焦躁，每4秒中就查一下邮箱。谢天谢地，大家一般都会满意。

你最近最常阅读的网站/博客上什么？

Usability Post Dmitry关于函数指针和可用性的研究我很喜欢

Design Shard. 我喜欢看Max建造他网上小家的过程，每每都能带来惊艳的改进设计。 读他的文章真是一件乐事。强烈建议大家订阅他的RSS。

We Are Not Freelancers. 我对这些伙计们现在做的事情非常感兴趣，所以我经常逛他们的博客。我发现他们的项目，From The Couch，非常有趣。厉害的家伙，希望能看到他们的更多东西。

还有很多非常棒的博客，你可以到这里看看我的强推，当然，MyInkBlog也在其中！

你现在的主要工作是什么项目？其中为function做的是什么？

我们正在试图建立一个站点网络。但并没有到完全投入地做任何相关工作的地步。我们有了一些想法，甚至会有一个帅呆了的程序/应用。希望未来几周之内能够发布。但现在我们还是专注于为一些客户干活，同时也尽量多更新我们的博客。

谢谢你花时间和我聊天，非常高兴能接受你的采访。我一直都很喜欢和你聊天，看你写的东西。所以，继续努力哇，希望你的读者能够喜欢这一点对我的内心透视～

原文来自My Ink Blog：An Interview with Liam McKay

这个博客也是我最喜欢的设计类博客之一。很多很有用的教程。

©2008 笨活儿 | 永久链接 | 等你来抢沙发呢 | 推荐到豆瓣

“机器” 可读的主题的[内部名]来源于这个文件。例如，如果这个文件的被命名为”drop.info”, 那么Drupal就好认为相应的主题名为”drop”。请注意不要用特殊字符，因为Drupal会在很多PHP函数中用到这个名字因此在PHP语言中命名字符串的限制也适用于这个内部名的命名。必须以字母开头，不可带空格和标点。可以使用下划线(_)但不可以使用连字号(-)。数字也是被允许的，只是不能用作首字符。

注意：

• 警告! 和你的主题内部名相同的模块可能会造成站点无法工作。因为这可能引起函数的重复定义，而这是不被PHP允许的。你安装的所有外部组件都必须有唯一的名字。
• .info文件的内容被换成在数据库中，所有替换或者修改这个文件并不会引起Drupal的注意。（不要将这种情况和主题注册表的缓存好混淆。）要清楚缓存，执行以下步骤：
  1. 点击位于”管理(Administer) > 站点设置(Site configuration) > 性能(Performance)”的”清除缓存数据(clear)” 按钮。
  2. 如果开启了devel区块(由模块devel提供) ，点击链接 “清空缓存(Empty cache)” 。
  3. 再次访问位于”管理(Administer) > 站点构建(Site building) > 主题(Themes)”的主题选择页面。

语法与 INI 文件类似。.info文件本质上就是一个配置主题的文本文档。该文本文档的每一行都是一个键-值对，左边是键名，右边是值。 中间再加个等号。(例如: key = value) 分号用以在行外面添加注释。某些键需要特殊的语法。添加方括号组合一系列关联的值，相当于一个“数组”。如果你并不熟悉数组，使用这种键值对时就应该保持足够的简单易懂。你可以参考Drupal中默认的.info文档，仔细阅读其中的注释信息

Drupal只懂得下列的键名（带!号的为必须设定的键值)。Drupal会为没有在.info文件中指定的键使用默认值。看看核心主题的示例。

• name !
• description *
• screenshot
• version *
• core !
• engine *
• base theme
• regions
• features
• stylesheets
• scripts
• php

name (必须)

人类易读的名字可以在这里设定，相对于”机读”内部名而言。这里对可用字符的限制更少。

name = Un tema nombre de fantasía


description (必须)

主题的简短描述。 这个名字会被显示在管理界面的主题选择页面。”Administer > Site building > themes”.

description = Tableless multi-column theme designed for blogs.


screenshot

这个可选的键值告诉Drupal哪里去找寻该主题的截屏缩略图，用于在主题选择页面显示(admin/build/themes)。如果跳过不设定，Drupal会查找改主题根目录下名为”screenshot.png”的文件。所以请当你的缩略图不是”screenshot.png”时或者你想要把缩略图放在主题根目录以外的文件夹中(如 screenshot = images/screenshot.png)，才设定此项。 screenshot = screenshot.png


version (建议)

The version string will automatically be added by drupal.org when a release is created and a tarball packaged. So you may omit this value for contributed themes. However, if your theme is not being hosted on the drupal.org infrastructure, you can give your theme whatever version string makes sense. 设置你开发的主题的版本。

version = 1.0


core (必须)

指定主题使用的核心。Drupal 6之后的版本会检测组件的版本匹配指定，如果不相符或者不知道，该组件都会被禁用。DRUPAL_CORE_COMPATIBILITY常量。

core = 6.x


The drupal.org packaging script automatically sets this value based on the Drupal core compatibility setting on each release node. So people downloading packaged themes from drupal.org will always get the right thing. However, for sites that deploy Drupal directly from CVS, it helps if you commit this change to the .info file for your theme. This is also a good way to indicate to users of each theme what version of core the HEAD of CVS is compatibile with at any given time.

engine (建议)

一般情况下直接设置为phptemplate就可以了。The theme engine, which is used by the theme. If none is provided, the theme is assumed to be stand alone, i.e., implemented with a “.theme” file. Most themes should use “phptemplate” as the default engine.PHPTemplate’s job is to discover theme functions and templates for the behavior of the theme. Omit this entry only if you know what you are doing.

engine = phptemplate


base theme

当你的主题需要作为子主题来使用时，给他指定一个基础主题。Sub-themes can declare a base theme. This allows for theme inheritance, meaning the resources from the “base theme” will cascade and be reused inside the sub-theme. Sub-themes can declare other sub-themes as their base, allowing multiple levels of inheritance. Use the internal “machine” readable name of the base theme. The following is used in Minnelli, the sub-theme of Garland.

base theme = garland


More details are available on the page Sub-themes, their structure and inheritance.

regions

主题的可用“块域”。定义方法为在’regions‘后面添加方括号括起来的“机读”内部名作为键名，然后将方便人类阅读的名字作为键值。如regions[theRegion] = The region name。如果没有块域被定义，Drupal会假定下列块域可用。如果需要，你可以覆写这些值。

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer


更多细节：Blocks, content and their regions

features

在主题设定页面可以选择开关的主题特性。”features” 键控制在主题设置页面哪些特性可以设定。当你的主题没有定义某些元素的时候你就可以使用这个键值来关闭这些元素显示与否的可设置性。要停用某项设置的复选框，略过这个条目不写即可。但是，如果所有条目都不写，由于系统的默认假定，所有的复选框都会被显示出来。下面的例子显示了所有可用的设定项。.通过注释掉primary_links和secondary_links元素，相应的复选框就被禁止显示，不会被站点管理员看到。

features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
; These last two disabled by redefining the
; above defaults with only the needed features.
; features[] = primary_links
; features[] = secondary_links


更多细节： Custom theme settings

stylesheets

以前，默认地，主题是通过自动查找style.css文件，然后调用template.php文件中 drupal_add_css() 函数来添加额外的样式表。 从Drupal 6开始，.info文件也可以为主题添加样式表。

stylesheets[all][] = theStyle.css


更多细节在样式表一节

Example .info files from core themes

Garland:

; Information added by drupal.org packaging script on 2008-02-13
version = “6.0″
project = “drupal”
datestamp = “1202913006″

; Information added by drupal.org packaging script on 2008-02-13
version = “6.0″
project = “drupal”
datestamp = “1202913006″

©2008 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

想象一下从设计一个基本主题(base theme)作为模型开始， 然后添加一些子主题，在子主题上完善你的网页样式。再然后，依据这同一个模型，试试分支出一些其他样式的子主题。需要同时建立多个站点，但是需要有共性的外观感觉？ 有了子主题功能，一系列设计资源都可以共享. 特定站点外观可以组织到特定的子主题中，但是一旦需要改变某个共同特性，只需要编辑一次共有资源中的某项，即可应用到所有主题。只要规划得当，此功能可以给你带来无限可能。

要声明一个父主题，或成为“基本主题”，将下列语句添加到子主题的.info文件中，“themeName”替换为您的父主题的内部名字。

下列资源会被继承:

• 父主题中定义的所有样式表，但是这也是可以通过某些选项来控制的。
• 父主题中定义的所有JavaScripts。
• 所有的模板文件(.tpl.php)。
• 文件”template.php”中定义的所有内容。包括主题函数重写, 预处理器和其他所有东西。所有子主题把它自己的template.php文件和父主题的该文件包含在一起。
• 父主题的截图，只要.info文件使用了和他的父主题一样的设置。

下列资源不会被继承：

• 为父主题制定的logo.png文件。不包括用户上传的logo，因为他们总是会被使用。
• .info文件定义的某些设置。 This includes regions. If you are not using the default regions, then make sure your “page.tpl.php” file for the sub-theme matches what is set for regions in the .info file. Each base and sub-theme can have their own region settings.
• Anything set within the “theme-settings.php” file for the 主题高级设置.
• Anything set within the “color” directory for color模块支持.

Note that sub-themes can be placed outside of the base theme’s directory or within it. Before version 6, they had to be in the sub-directory of the parent theme.

©2008 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

一个常规的Drupal主题的文件树

.info (必需)

要Drupal看懂你的主题所需的所有东西就是这个 ”.info” 文件. Meta数据, 样式表, JavaScripts, 块区域 以及更多的东西都是定义在这里。其他文件都是可选的。主题的内部名字也在这个文件中定义。 例如，如果此文件被命名为”drop.info”，那么Drupal就会认为这个主题的名字是”drop”。 Drupal 5 以及更低版本用文件夹的名字作为主题名。主题的信息文件是在Drupal 6中才出现。Drupal5中， 只有模块才会使用.info文件。

模板文件 (.tpl.php)

这些模板文件用以产生xHTML 标签和php变量。 有时也可用于输出其他类型的数据——例如xml rss 。每一个.tpl.php文件处理一类特定的可以主题化的数据输出，某些情况下，它也可以通过模板建议来处理多个.tpl.php文件。这些文件是可选的，如果你的主题不包括任何这类文件，内容就会以默认样式输出。请尽量避免在这些文件中添加过多处理逻辑。大多数情况下，应该只包括xHTML 标签和纯粹而直接的PHP变量。在Drupal核心与模块的文件夹里也有很多这样的文件。 把它们复制到你的主题文件夹里会强制Drupal使用你的版本。注意：所谓主题注册表缓存了可用的主题数据的信息。要在你的主题中添加或删除模板文件或者主题函数，你需要重设主题注册表。

template.php

所以的有条件的逻辑和内容输出的数据处理过程，都有一个template.php文件。 它并不是必须的, 但是为了保持.tpl.php文件的整洁，它可以作为 变量合并到.tpl.php文件的标记语言中之前 产生变量的预处理器 。自定义函数， 重写主题函数或者其他任何对原始输出的自定义都应该在这里完成。此文件必须以PHP的开始标记（<?php）打头，但是结束标记并非必需，并且我们建议您不要添加它。

子主题(sub-theme)

表面上，子主题的表现和其他主题一样。唯一的区别就在于它能够继承“父主题”的资源。要创建子主题,需要在.info文件里添加一个”base theme”(基础主题)条目。子主题就是从那儿继承父主题的资源。可以使用多重继承。也就是说，一个子主题可以声明为另一个主题的基础主题(base theme)。对于多重继承没有硬性限制。Drupal 5及更低版本要求子主题必须在父主题的子文件夹里。现在已经没有这样的限制了。

其他

• logo和截屏(screeshot)并非主题工作所必须，但我们建议你提供这两个文件，特别是当你想与他人分享这个主题时。Screenshots will show inside the theme administration page and the user account settings for selecting themes when the appropriate permissions are set. See the screenshot guidelines for more information.
• 要提供自定义的主题管理界面和设置，或者logo、搜索、站点宗旨(mission)之外的“特性”设置，可以添加一个”theme-settings.php” 文件。 这是一个高级功能。 更改相关信息请参考Advanced settings。
• 要启用色彩模块支持，包含”color.inc”的名为”color“的文件夹以及相应的css文档和图像文件就是必须的。

• 如果你打算以某个核心主题为基础开始工作，请使用子主题功能或者复制后重命名为你自己的文件夹。强烈建议你不要直接修改默认主题Garland或者Minnelli，因为这两个主题在系统安装和升级时会用到。
• 所以主题都应该安装在”sites/all/themes” 文件夹，与核心文件分开。阅读关于多站点支持的内容来了解在其他文件夹安装主题的情况。

©2008 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣