注意，这不需要任何 JavaScript，是浏览器内部实现的功能。很遗憾的是到目前为止只有 Opera 9+ 有部分实现，作为前端开发者，每天都在为表单验证、自动完成等提升表单用户体验的事情上拼了老命，重复发明轮子。好消息是，基本上这些都可以通过 JavaScript 来模拟实现，项目当然有人在做了：webforms2，不妨下载一试。

当然，它们是根据表单的字段名称进行猜测与匹配的。如何给表单字段起个好名字，以方便自动填写工具的匹配，就变得有必要起来。

既然说“标准”，那名字肯定不是乱取的。RFC3106 据此而生。比方说，用户 ID 使用 Ecom_User_ID, 密码使用 Ecom_User_Password 等等，你可以访问该页面查看更多的对应实例。虽然商业气息比较浓重，但不妨碍我们的使用，以及给用户带来的便利。

皆因我不知道“重构”(refactoring)。

或许你第一次看到这个词，会欢呼雀跃，耶，“重构”，网站重构，一切重新再来？很明显，不是。相反，它的过程是逐步的，有时甚至是很微小的。作为一门在编程中的高级技术，重构是指“在不改变代码外在行为的前提下，对代码作出修改，以改进程序的内部结构”（《重构：改善既有代码的设计》，2003，中国电力出版社）。对于 HTML 来说，就是不改变 HTML 所表达意义的基础上，对 HTML 作出修改，以改进 HTML 的内部结构。是不是很简单？

读者都知道 web 标准的意义所在，很明显，重构的目的是改善既有的 HTML，向 web 标准进军。重点在于改善，而不是取代。在很多情况下，取代的代价远比改善大得多。如果才能做到最大化的投入产出比，很明显，答案是重构。

啰嗦这么多，到底怎么重构？特别是 HTML, 怎么重构啊，看着堆垃圾我就头痛，是不？很多公司的网站，我们可以看到，比如腾讯，雅虎的新推出的页面，都是基于 web 标准的了，但还是存在大量的旧页面，就算访问量巨大，也是纹丝不动。我相信，这很大程度上不是由于不想改，而是除了全盘推翻重头再来之外，实在找不到好的解决办法。重构是你的解药，宝贝。

由世界知名的 XML 专家 Elliotte Rusty Harold 所著的 Refactoring HTML: Improving the Design of Existing Web Applications 是你解药的配方。书中大谈特谈的章节不多，就第一章说说who, what, why, when, where，其他章节都是说 how. how, yeah, 就是到底怎么重构的锦囊妙计。书中从编程世界中“窃取”被证明是可行的、成熟的技术，很多可能是 web 标准实践者闻所未闻的技术，结合到 HTML 来，创造行之有效的新技术，解决 HTML 特有的难题。比方说，你关心过 GET 和 POST 是什么吗？知道为何 Google 爬虫爬一爬，很多页面消失殆尽吗？（嗯嗯，老油条们，我知道你知道（绕吧？），我在这里问的是“页面仔”）。关心过自动化测试吗？什么，你还刀耕火种，写一行就在浏览器刷一下看效果？知道怎么样批量校验你的页面吗？不要告诉我你一页又一页的把上千个页面轮番轰炸 W3C Validator…

不知道？那怎么还浪费时间看什么书评，赶紧的打开书来看啊！噢哦，没有书？google 一下，有得下。英文看不懂？很吃力？噢哦，明年中文版就会上市，嗯嗯，译者就是我……（终于露出狰狞面目）……

本书是探讨 HTML 领域的重构，是对重构这门技术的又一创造性运行。它从工具入手（我们知道，工具是重构的重要辅助），然后逐一分析良构（well-formness）、合法性、布局、无障碍、web 应用程序和内容等等需要重构的方面，提出问题，讨论理据（motivation）并提供行之有效的解决方案（mechanics）。对于接触 web 标准较少的人来说，提供了一个百科全书式的的参考，而对于我的同行们，sure, 亲爱的页面仔们，不仅可以查漏补缺，亦可学习程序工业中的先进经验，提升自己的“工业”素养。总之，这不是一本束之高阁的书。

编写 HTML 不仅是一门技术，更是一门艺术。你会了解的，在读了本书之后。在此我很严肃地说。仅以此献给中国所有的页面仔，共勉。

在很多开发者看来，富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话，确实如此。但是它的基本原理并不复杂，入门也不难。今天我们的主题是讲述基本原理，并逐步演示一个简单富文本编辑器的产生。这是我在 D2 上的一个分享内容，在台上的演讲效果不佳，固写下来，希望能够对感兴趣的读者有所帮助。

富文本编辑器的基本原理

这个原理实在是太简单了！对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand('commandName'[, UIFlag[, value]]) 即可。commandName 和 value 可以在 MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execCommand('bold', false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。

为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentWindow.document 获得）进行操作。

十分简单，是吧？下面我们来动手做一个。

编写一个简单的富文本编辑器

这个例子使用了 YUI. 即使你对它不是很熟悉也没有关系，我在这里只使用了它的 DOM 和 Event 的一些跨平台基本方法。

搭架

在此强调一下很久未曾提及的 unobtrusive. 我们的编辑器是对 textarea 元素的一个增强（enhencement），就是说，即使 JavaScript 被禁用了，用户还可以通过 textarea 编辑内容。

在这个例子中，我们将使用 YAHOO.realazy 的命名空间，在之下实现一个 RTE 的类。我们今天的编辑器很简单，因此构造器(constructor) 的参数也只有 textarea 一个。我们使用一个实例变量来保存工具条的各个项目。实例初始化放到一个叫 render 的方法中。这一步的页面和代码见第 1 步。

创建 iframe 并替换 textarea

搭好架子，正如我在前面所说，建立一个 iframe, 编辑器的所有操作都在 iframe 的 document 内执行。并且把 textarea 隐藏起来。从第 2 步中可以看到，我们已经有了一个 iframe, 但不能输入任何东西，很正常，我们没有打开它的 designMode 嘛。

开启 designMode

这一步涉及的东西挺多，也是关键。我们会创建获取 iframe 的 document 的方法，并通过程序的方式向 iframe 写入空页而非使用一个外接的 blank.html. 我们使用一个类属性 YAHOO.realazy.RTE.htmlContent 来保存空页的 html. 在准备好一切后，就可以开启 designMode 了。页面和代码详见第 3 步。看，我们已经可以在 iframe 里输入东西了。

构建工具条

我们需要操作的工具条！这样才可以控制 iframe 里的内容，才能称之为编辑器。在此我并不打算实现太多的功能，只是选择字形、字号、加粗、斜体、下划线、居左、居中、居右、超链接和插图作为示例。对于跨平台，Mozilla Midas Specification 是不错的参考。ok, 请看第 4 步，我们的工具条出来了，虽然很丑。我同时用 CSS 对 iframe 的宽度做出了一些调整。

给工具条加上事件

嗯，工具条出来了，编辑器看起来也“人模狗样”了，你兴奋的点啊点，没什么效果……意料中嘛。我们接着给工具条绑定一些事件，让编辑器内容能够响应工具条。在这一步，我们把 execCommand 再封一层，前面说过，我们用不上 UIFlag，让它永远是 false 好了。好，有代码就有真相，请看第 5 步。如果是正使用 IE, 请先暂时转移到其它浏览器。看到了吧，工具条生效了！

解决 IE 的问题

well, 如果你没有听我的劝告，依然使用 IE, 你会发现除了字型和字号其它的都不能用。为什么呢？你观察一下，有没有发现，其它浏览器选择文本后，再点击工具条上的项目，被选中的文本是否依然选中的？而 IE 呢，在点击工具条时，选中的文本马上失去选中的状态，所以它们就失败了。所以，如果我们能够保证点击工具条文本保持选中状态，就可以解决 IE 的问题了。

Microsoft 给 HTML 标签一个很奇怪的属性 unselectable, 只要设置为 on, 焦点不会转移到点击的元素上，从而保证文本的选中状态。

请看第 6 步。这也是解决 IE 头痛问题的关键所在。我曾经在这上面费了很大脑筋。

高级主题展望

good, 看看我们现在的代码，224 行。相比其它动辄上万行的编辑器，你可能会觉得不可思议。因为我们这个最基本的编辑器，连 selection 都没有用到。很多很酷的效果，比如 Google Doc 里能够动态改变链接文本，使用页内层而非弹出的 prompt 来操作等高级功能，基本上都要用到 TextRange(IE) 或者 Range(W3C). 要命的是这两个东西互补兼容，只是相似而已。入门推荐看PPK 的 Introduction to Range.

在此我们就不深入了，等我有时间我会总结一些奇技淫巧（呜呼，前端开发需要的奇技淫巧太多了，这不是好事情）出来。

Memoization 原理非常简单，就是把函数的每次执行结果都放入一个散列表中，在接下来的执行中，在散列表中查找是否已经有相应执行过的值，如果有，直接返回该值，没有才真正执行函数体的求值部分。很明显，找值，尤其是在散列中找值，比执行函数快多了。现代 JavaScript 的开发也已经大量使用这种技术。

我通过 Google 寻找了好几种 JavaScript Memoization 的实现，都不太如人愿，有的实现不能缓存递归函数，有的需要修改函数的 prototype，于是自己实现一个：

/**
 * JavaScript Momoization
 * @param {string} func name of function / method
 * @param {object} [obj] mothed’s object or scope correction object
 *
 * MIT / BSD license
 */

function Memoize(func, obj){
    var obj = obj || window,
        func = obj[func],
        cache = {};
    return function(){
        var key = Array.prototype.join.call(arguments, "");
        var key = Array.prototype.join.call(arguments, "_")
        if (!(key in cache))
            cache[key] = func.apply(obj, arguments);
        return cache[key];
    }
}

并写了一个测试案例，空口无凭，让大家亲自看看 Memoization 的威力。

见：http://realazy.org/lab/memoization.html

另，例子中的 fibonacci 函数有很多更有效率的实现方法，在此我使用最无效率的递归实现，只是为了更直达地演示 memoization.

又，longwosion 留言所提到的 key 唯一性问题，我略作修正，但应该还有更好的办法，欢迎您留言探讨。

废话太多了……这个测试 demo 叫 chatlazy, 位于 http://chatlazy.appspot.com. 是一个简易聊天室，后台部分，就是 Python 了，具体一点，是 webpy 0.3 (开发版，未发布)。机制十分简单，就是前端使用 JavaScript 隔 5 秒去提取后台的最新消息。有几个小细节还是值得总结一下的：

1. 由于 GAE 的数据 ID 使不能用在 Gql 中的，我只能通过时间戳来比对消息状态。把 datetime 和秒数 ＋ 毫秒数的互转，还是比较繁琐的。Python 技术手册帮了我很大忙。解决方案大致如此：

   str(time.mktime(d.timetuple()))[:-1] + str(d.microsecond)

   反过来则是：

   p = str(t).split('.')
   tp = time.localtime(float(p[0]))
   dt = datetime(tp[0], tp[1], tp[2], tp[3], tp[4], tp[5]+1, int(p[1]))

2. 对于 iterable 的对象, 先要 list 它转成列表，才可以使用 reversed 等相关方法。
3. 需要取最新的 n 条信息，即数据库末尾的 n 条，但是又要顺序，可以先按逆序取 n 条，再反向排序（由此引发上条启示）。
4. 对于任何用户输入的东西都要做过滤，一开始我在用户名那块忽略了，结果马上有人 XSS 了。这应该是基本常识，应铭记于心。
5. 一定要处理异常。

由于 GAE 这个天上掉的馅饼，我想我近期的精力会放到 Python 上了，有计划地把 blog 迁徙到 GAE 上，并开发一些有趣地程序。GAE rocks. 老实说，这是搜索、Gmail 后，对我而言可以排到第三的 Google 服务了。

让我们看看我之前的文章：JavaScript的9个陷阱及评点，在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差，其实不只是 IE 的问题，而是现有 JavaScript 引擎对于线程实现的问题（关于线程，我的概念其实不多，如果不对，希望读者多多指教）。我们通过一个例子来说明，请访问 http://realazy.org/lab/settimeout.html. 我们来看 1 和 2。如果你能看看源代码，会发现我们的任务很简单，就是给文档增加一个 input 文本框，并聚焦和选中。请现在分别点击一下，可以看到，1 并没有能够聚焦和选中，而 2 可以。它们之间的区别在于，在执行

input.focus();
input.select();

时， 2 多了一个延迟时间为 0 的 setTimeout 的外围函数，即：

setTimeout(function(){
	input.focus();
	input.select();
}, 0);

按照 JavaScript: The Definitive Guide 5th 的 14.1 所说：

在实践中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。

其实，这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子，JavaScript 引擎在执行 onkeypress 时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 事件，由于这两个事件都不在队列中，在完成 onkeypress 后，JavaScript 引擎已经丢弃了这两个事件，正如你看到的例子 1 的情况。而在例子 2 中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此，你可以看看例子 3，它的任务是实时更新输入的文本，现在请试试，你会发现预览区域总是落后一拍，比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时， a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地，在此我没有给出答案，因为上面所说的，就是解决思路，try it yourself!

这是一本没有 “hello world” 的书，在未翻译前我已经推荐过。希望窥探 JavaScript 高级应用的读者可以一读。推荐大家从网上购买，这样折扣多些。

如果你有任何想法，可以致信 projsch@gmail.com, 欢迎交流。

p.s. 最近更新不勤，一则工作忙，二则积蓄待发。自学 C 语言几月有余，略有小成。新近在看 Objective-C 和 Cocoa, 希望能开发些客户端程序。数据结构和算法依然在门外，一步一步来吧。God bless you, also me.

工作职责：

• 使用 HTML/CSS/Javascript 开发符合 W3C 标准的网站前端页面；
• 使用AJAX，Flash等技术丰富网站功能，增强用户体验；
• 和后台工程师一起研讨技术实现方案，制定服务接口等；
• 积累并完善自己的前端WEB开发框架，Javascript开发框架；
• 积极探索并积累前端开发模式和规范。

职位要求：

• 本科以上学历，能熟练阅读英文技术文档；
• 具备良好的团队合作精神和积极主动的沟通意识；
• 具有强烈的进取心和求知欲，勇于挑战；
• 精通HTML/CSS/Javascript等前端技术，习惯于手写符合W3C标准、兼容多种浏览器的前端页面代码，而不是依赖IDE；
• 有Flash，ActionScript开发经验者优先；
• 有设计经验，熟悉Photoshop、Illustrator者优先；
• 计算机相关专业毕业者优先。

有意者请致信 job(a)hainei.com.

另外还招聘产品经理、研发工程师和高级研发工程师/架构师。详情见 http://hainei.com/job.

那么，从技术角度来说，bookmarklet 有什么需要注意的呢？我个人意见如下：

首先，因为它是一段 JavaScript, 所以应该遵循普世的 JavaScript 编程原则。最重要的一点是，不要污染当前网页的命名空间，否则可能会破坏当前网页的 JavaScript. 通常，可以使用闭包来隐藏你所有的变量。同样，如果您的 bookmarklet 的 CSS 可能会入侵当前网页（很遗憾，CSS 没有命名空间，也没有类似闭包的东西，很容易就会冲突），那么请考虑将 bookmarklet 的内容放到 iframe 中去。

其次，防止函数执行后不经意的副作用，一个比较好用的贴士是，使用不返回值始终返回 undefined 的 void, 它可以接受任何参数，因此，把你的闭包放到 void 中是个不错的主意：

javascript:void((function(){...})());

最后，有一个比较恼火的问题也需要加以注意。目前世界上最流行的浏览器，IE6, 它对 bookmarklet 所能容忍的长度仅为 508!

由于 Mac OS 身上淌着 Unix 的血液，要找到一些不用花钱的生产力工具还是很容易的。最近习惯了 GNU Emacs (以下简称 Emacs), 所以不管三七二十一，找一个来安装上再说。

才发现 Mac OS 下的 Emacs 版本如此之多。我分别尝试了 Emacs.app, Carbon Emacs 和 Aquamacs.

首先，Emacs.app 基于还在开发中的 Emacs 23，这个版本最大的改动之一就是字体的处理方式，无疑，在 Mac OS 下，三者中也是它的字体支持最好。Carbon Emacs 和 Aquamacs 都是基于 Emacs 22 的，对字体的支持不足（比如中英混排，或者对字型的选择都比较奇怪）。我对Carbon Emacs 没有什么印象，倒是因为 Aquamacs 解决一个至关重要的问题，我才不得不选择它。

如果你用过 Emacs, 你就知道它是多么依赖于各种快捷键。问题在于，MacBook 键盘右边没有 control 键。当然可以通过设置来让 command 或者 option 来充当 control 键来解决问题，但是为了一个 Emacs 而改变整个系统的键盘布局方式，有点得不偿失。而 Aquamacs 可以使得这样的设置只在 Emacs 内生效而不影响系统：

(setq mac-command-modifier 'control)
(setq mac-control-modifier 'alt)
(setq mac-option-modifier 'meta)

p.s. 至于 Textmate, 先慢慢尝试一下吧。我的工作环境不可能不处理中文，Textmate 不支持中文严重降低了我去使用它的频度。

更新：后来又折腾一下 Emacs.app, 发现它其实也可以 remap 键位的。无疑，我马上把 Aquamacs 抛弃了。

For some reasons we have to execute the JavaScript function in the img tag’s attribute onload, e.g.

<img onload="javascript:jsFunction();" ...

开启 Opera, CPU 狂窜到 100%……

When using Opera browser, the CPU usage is up to 100%…

原来丫会重复执行 jsFunction……只好加个变量来记录是否已经执行。

Because Opera execute jsFunction repeatedly. The solution is adding an flag variable to track the function be executed or not.

Google 一下并没有发现这方面的资料，所以记下来，希望能帮助碰到这个问题的人。为了表现我的国际主义精神，特翻译了一下（至于这句，就不翻了……）。

2006末，在不懂MySQL, Ruby的情况下，用RoR折腾出一个十分简单的jobz board, 向世界宣布我“会”编程了。侥幸进入中国雅虎（已在8月份离职），虽大部分时间还是折腾HTML和CSS, 但也有了练习JavaScript的机会，怎么说，以前玩linux积累一些非编程但有助于了解编程的经验，在练习过程中得以入门编程，还写得真像那么回事了。

记得2007的展望是精通JavaScript，这个完成得有60%吧，对PHP和MySQL也有一定的了解。至于Ruby，没地方用，所以顶多掌握了一些概念和语法，倒是Python，用得还多点，年末用webpy和SQLite3写了一个blog程序，算是对Python入了点门。

还好，不经意间踏上了编程之路。

但一提到“编程”二字，常常让我觉得汗颜。程序者，经典公式为程序＝算法+数据结构。但是我既不懂算法，也不懂数据结构。我说我在编程（programming），实在是跟全天下的程序员（programmer）过不去，我顶多是个编码者（coder）而已。

因此，2008, 北京要举办奥运会，我要学习算法和数据结构。从而需要自补高等数学（不好意思，我是文科生 :D），也从而需要学好C语言。高数、C语言、算法和数据结构，用我党的话说，这是2008的主旋律。

如果时间充足的话，还计划使用Python做些GUI应用。计算机的精彩决不仅仅局限于web.

回顾一下年初，有些话说过了头，但基本上都履行了。虽然没法攒够钱给支持家庭，但也算是最有力度的一年了。

2007年10月，我奶奶安详辞世，享86岁。愿往者安息，生者健康，以奋斗来慰藉往者的关怀与爱护！

请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。这是我的答案：

新解

Array.prototype.uniq = function(){
    var resultArr = [],
        returnArr = [],
        i = 1,
        origLen = this.length,
        resultLen;
    function include(arr, value){
        for (var i=0, n=arr.length; i<n; ++i){
            if (arr[i] === value){
                return true;
            }
        }
        return false;
    }
    resultArr.push(this[0]);
    for (i; i<origLen; ++i){
        if (include(resultArr, this[i])){
            returnArr.push(this[i]);
        } else {
            resultArr.push(this[i]);
        }
    }
    resultLen = resultArr.length;
    this.length = resultLen;
    for (i=0; i<resultLen; ++i){
        this[i] = resultArr[i];
    }
    return returnArr;
}

这种解法在整个过程对原有数组的改变只有两次，效率比其他两种高了2个数量级左右！可在此测试三种解法的性能。

旧解

以下至“关于测试案例”之间皆为旧文，若阅读不顺，忽略之。

Array.prototype.uniq_slow = function(){
    var ret = [],
        i = 0,
        j = 0;
    while (undefined !== this[i]){
        j = i + 1;
        while(undefined !== this[j]){
            if (this[i] === this[j]){
                ret.push(this.splice(j, 1)[0]);
            } else {
                ++j;
            }
        }
        ++i;
    }
    return ret;
}

感谢猫仔提示，这道题目很容易让人产生误读。看清了题目后更新了。

为何用 while 而不是 for? 因为这个数组总是在变化，每次循环都得重新计算 length. 按理说，使用 while 效率会更高，尤其数组很大的时候。

欢迎大家交流讨论。

感谢 fdcn 提示，更新之。这里确实是容易犯错。

猜想由于强类型判断导致性能不高（可在此测试），因此此种做法未见有性能的提升（还稍微慢了一些），而且还不能传递类似 [1,,,2,,] 这样的数组。所以还是淘宝UED上的解法比较科学（当然不是没有改进之处，比如不应该在 for 循环中声明变量）。

其实，这篇blog的意义在探讨如何避免无意义的消耗（比如计算 length）。但是鱼和熊掌不能兼得是自古之理，顾此失彼。当然，办法不是没有，比如数组的 forEach, map 方法等，可惜只有 gecko 浏览器才支持。

关于测试案例

数组是随机产生的1-100之间的整数，长度为5000，每个相同的大约重复5次。三个测试数组的元素构成是一致的。

总结

对数组的改变开销巨大，如果可能，尽量在不改变原有数组的情况下进行操作，如最终需要改变数组自身，可将结果赋予原有数组来操作。另外，对于 length 的计算，似乎效率并未受其影响。

啥时候我也该进补算法了，唉。软肋啊。

推荐阅读： 王元涛同学的 JavaScript 数组的 uniq 方法。

问题

假设我们有一个 Form 节点（node）的引用，姑且名之为 elForm，现在需要克隆一份，可以这么做：var elFormClone = elForm.cloneNode(true).

在插入这份克隆到 DOM 树中后，IE, Firefox 均未发现问题。Opera会产生这样的问题：表单内的字段无法引用。比如，假设刚才我们的elForm 有一个 <input name="title" ... />, 此时你无法通过 elFormClone.title 或者 elFormClone['title'] 获取它。

解决方案

使用 document.createElement 创建 form 元素，然后设置该元素的 innerHTML(感谢 MS 发明了它) 为elForm 的 innerHTML 即可：

var elFormClone = document.createElement('form');
// 设置一些elForm的原属性，有必要的话
...
elFormClone.innerHTML = elForm.innerHTML;
// 处理这个clone, 该咋办就咋办了
...