学步园

繁简即时切换脚本属于比较普遍常见的脚本，多应用于港澳台的公司企业网站上，一些面向大陆服务的站点也提供正体、简体的页面切换（“正体”一词乃台湾方面的新说法）。在前人梳理的经验上，推荐这个 StranBody 方案。此方案是从客户端出发而考虑，是直接基于 JavaScript 对浏览器 DOM 内容修改的纯客户端方案，因此具有不依赖服务端转换，减轻服务端运算符合等的好处。当然，如果用户关闭掉 JavaScript 脚本，就无法使用正体、简体切换的功能了。直接使用该脚本毫无问题，亦兼容 IE & FireFox
浏览器，但美中不足的是，笔者个人感觉代码写得比较乱，当然这乃是较早期的实现，对JS认识不如今天的应用是可以理解的。现在恰好客户需求，笔者正好可将此代码派上项目用场，加上笔者自身亦一时技痒，就打算重构一番这个早期的繁简切换脚本，多练练手。

观察 在线演示地址代码IE6 & FF 3.0/Ext Core 3.2下通过，。
edit：2012.12.27 该文链接已失效

代码约定，true 的话表示正体中文（繁体中文），反之 false 就是简体中文。并且需要说明的是，当然脚本以默认“简体中文”的网站为假设，如果本来是正体中文的，就需要按如下修改脚本的原始值：

$$.big5.language = true; // true表示正体中文，反之false就是简体中文

经过重构，该模块的命名空间是 $$.big5.*（请注意命名空间的设置：if(typeof $$ == 'undefined')$$={};）。使用方法很简单，执行 init() 对其送入元素 id 或元素对象即可。该元素就是用来切换的按钮。

$$.big5.init('StranLink'); // 修改StranLink为你的元素标识

繁、简切换的原理在是，先准备一“繁、简”对照表，如私有成员“ var 简化中文 = '啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺……”和“var 正体中文 = '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安……”，他们之间是一一对应的，知道任意一种字符的索引即可查得另一种字符的编码；然后，字符串的索引如何怎么查得呢？可通过字符串的indeOf()。charAt()方法返回指定索引位置处的字符。这样，凭借此对照表，按照顺序逐一替换为他种语言。以上的实现编码在 $$.big5.traditionalized()
及 $$.big5.simplized()方法中。

如何得到那些要的翻译文本？遍历 DOM 是前台开发中经常使用的一点，一般而言通过递归遍历 DOM。这一次，我们又是从 document.body 收集需要转换的内容。虽然说的比较简单，但是实际还有不少需要考虑的细节问题。先看看这个递归函数。

/**<br /> * 转换对象，使用递归，逐层剥到文本<br /> * @param {HTMLElement} obj 从document.body开始，<br /> */<br /> function StranBody(obj){<br /> var obj = obj.childNodes<br /> ,node;<br /> for (var i = 0, j = obj.length; i < j; i++) {<br /> node = obj.item(i);<br /> if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0 || (node == $$.big5.el.dom)){<br /> continue;<br /> }<br /> if(node.title){<br /> node.title = $$.big5.fn(node.title);<br /> }else if(node.alt){<br /> node.alt = $$.big5.fn(node.alt);<br /> }else if(node.tagName == "INPUT" && node.value != "" && node.type != "text" && node.type != "hidden"){<br /> node.value = $$.big5.fn(node.value);<br /> }else if(node.nodeType == 3){<br /> node.data = $$.big5.fn(node.data);<br /> } else{<br /> arguments.callee(node);<br /> }<br /> }<br /> }

不知看官有没有稍加注意，我们采用 arguments.callee(node);的技巧实现匿名递归。

控制切换的UI是$$.big5.el，类型是 Ext.Element。我是为了避免烦恼的跨浏览器问题，使用上了 Ext Core 库。如果需要通用，用户可以很快的修改通过的 w3c 方案，不算太困难。Ext Core 方案如下：

$$.big5.el = Ext.get(el).on('click', function(e, el){<br /> $$.big5.language = !$$.big5.language;// 反相器<br /> toggle($$.big5.language);<br /> StranBody(document.body);<br /> });<br />

cookie 是记录在客户端的可控对象，可以透过 JavaScript 编程来创建和取回 cookie 的值。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。在本脚本中我们使用 Cookie 来记录用户选择了那一种语言，那么下一次客户离开页面再访问的时候，仍然可以转换到上一次选择的结果，无须用户手动设置。

设置Cookie，当按钮选择后发生。

// Sys.Big5.js 第53行<br /> setCookie("ft" + window.location.hostname.replace(//./g, ""), b, 7);

每一次运行该脚本时都会执行下一行语句。如果用户从未选择过“繁体/简体”，那么这个方法总是返回 null 值。

// Sys.Big5.js 第96行<br /> var c = getCookie("ft" + window.location.hostname.replace(//./g, ""));

至此，我们就对 StranBody 基本问题介绍了一遍。如果是原本的 StranBody 方案，那么到这儿就算结束了，——可如果马上结束就失去了本文的意义，尚有后面改进内容的介绍——

首先是重构后焕然一新的代码，从原来的全局变量重构为 JS 单例模式。表面上是这样，但其中最大变化的一点，可以说集中在 toggle() 函数中，从而避免源码混乱的状态管理。

/**<br /> * @param {Boolean} b True正体中文，false，简化中文<br /> */<br /> function toggle(b){<br /> $$.big5.fn = b === true ? $$.big5.traditionalized : $$.big5.simplized;<br /> $$.big5.el.update(b === true ? "-》简体中文" : "-》繁体中文");<br /> setCookie("ft" + window.location.hostname.replace(//./g, ""), b, 7);<br /> // 触发事件<br /> if(b === true){<br /> $$.big5.onBig5();<br /> }else{<br /> $$.big5.onSimpleChinese();<br /> }<br /> }<br />

JS的函数是第一要员，可灵活控制之。我们的$$.big5.fn正是这一种体现，无论是繁转简抑或是简转繁，反正调用$$.big5.fn即可！

其次，加入了事件$$.big5.onBig5、$$.big5.onSimpleChinese，那么等于增加了对图片和动画处理的手段了。我们重写这个两个方法就可以加入自定义的事件；还有依据浏览器的userLanguage自动选择繁体：

/**<br /> * 默认是否正体中文：true为正体；false简体。<br /> * ASP版本：Request.ServerVariables("http_accept_language")<br /> * @return {Boolean}<br /> */<br /> function getClientLanguage(){<br /> var s = navigator.userLanguage||navigator.language;<br /> switch(s.toLowerCase()){<br /> case 'zh-cn':<br /> return false;<br /> case 'zh-tw':<br /> return true;<br /> default:<br /> return null;<br /> }<br /> }

有人不免要问，为什么不写成属性而是方法。因为方法的写法可避免在服务端下JS的报错。

最后，就是一个对 StranBody 的小 Patch 修正了，虽然属于别人的劳动成果，但既然公开了，应该不碍事吧！？还是可以借用一下的^_^，原文如下：

对上面的程序进行测试，可以发现，对于有行内框架(IFRMIE)内的内容没有转换，对脚本输出文本即alert. confirrmn和prompt函数输出的内容也末作转换，还有网页标题也末作转换，这显然是很不完美的事。于是，经过一番探索，终于找到很好的办法解决了这两个问题。

在此基础我修改了一下，就是函数hijackFn()：

function hackjackFn(){<br /> var _alert = window.alert;<br /> window.alert = function(s){<br /> _alert($$.big5.fn(s));<br /> }<br /> var _confirm = window.confirm;<br /> window.confirm = function(s){<br /> _confirm($$.big5.fn(s));<br /> }<br /> var _prompt = window.prompt;<br /> window.prompt = function(s){<br /> _prompt($$.big5.fn(s));<br /> }<br /> }

总结今次学习过程，可以明白繁简翻译、Cookie 控制、RegExp.exec()等等的细节问题，从中收获不少。

在线例子：http://playen.ajaxjs.com/playen/blog/big5/

edit：2011-05-29 14:35:32重新上传，修正了例子的链接。

参见：  唐乾林，牟向宇，《JavaScript在网站中繁简字体转换的应用》。