对JavaScript繁简字切换的小改进

简介: 繁简即时切换脚本属于比较普遍常见的脚本,多应用于港澳台的公司企业网站上,一些面向大陆服务的站点也提供正体、简体的页面切换(“正体”一词乃台湾方面的新说法)。在前人梳理的经验上,推荐这个 StranBody 方案。

繁简即时切换脚本属于比较普遍常见的脚本,多应用于港澳台的公司企业网站上,一些面向大陆服务的站点也提供正体、简体的页面切换(“正体”一词乃台湾方面的新说法)。在前人梳理的经验上,推荐这个 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 收集需要转换的内容。虽然说的比较简单,但是实际还有不少需要考虑的细节问题。先看看这个递归函数。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

 

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

目录
相关文章
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
45 5
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
108 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
70 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
88 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
80 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
60 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
52 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
62 2