jQuery Exposure插件的中文翻译问题
Exposure是一个jQuery的相册插件,有多种模式可选,简单易用,而且自带十几种语言的本地化文件(其实也就6个字符串,非常容易翻译),对我这种前端小白非常友好,但是当我把中文资源文件引入,却发现事情并不简单:
这明显是HTML实体没有被正确转换,那么这个过程中究竟发生了什么?
首先打开text_zh-cn.js
,来看看汉化人员是怎么写的:
/**
* Exposure plugin texts translated to Simplified Chinsese.
*/
jQuery.extend(jQuery.exposure.texts, {
first : "第一张",
previous : "上一张",
next : "下一张",
last : "最后一张",
play : "幻灯片放映",
pause : "暂停放映"
});
确实,是使用HTML实体而不是中文。我们再转到源码jquery.exposure.js
,可以搜索到汉化文本只在此处使用:
if (gallery.controls.firstLast) { $(this).append(ex.createLink(txt.first, gallery.first, ex.firstPageClass)); }
if (gallery.controls.prevNext) { $(this).append(ex.createLink(txt.previous, gallery.prev, ex.prevPageClass)); }
if (gallery.controls.pageNumbers) { $(this).append($('<div class="' + ex.pagingClass + '"></div>')); }
if (gallery.controls.prevNext) { $(this).append(ex.createLink(txt.next, gallery.next, ex.nextPageClass)); }
if (gallery.controls.firstLast) { $(this).append(ex.createLink(txt.last, gallery.last, ex.lastPageClass)); }
那么关键函数,createLink
又是什么呢?
createLink : function(text, onClick, linkClass) {
var a = $('<a href="javascript:void(0);"></a>').text(text).click(onClick);
if (linkClass) {
a.addClass(linkClass);
}
return a;
},
心明眼亮的同学应该一眼就看出来毛病了,问题出在text()
上,原作者没有使用html()
而是text()
,导致所有翻译都直接按照文本被处理了,&
变成了&bnsp;
,又被转义了一次,最后当然出现了原始的HTML实体而不是我们想要的汉字。解决办法也很直接,要么把那6个字符串自己翻译一遍,要么改代码,将text改为html,我选择方案一,毕竟改了代码又可能引入未知的安全问题,得不偿失。
使用中文的本地化文件完美解决了问题,我之后翻看了全部17个汉化文件,不管是俄语、阿拉伯语还是捷克语,所有本地化文件全部是直接翻译为当地文字,唯独简体中文被做成了HTML实体,结果还导致了被按照文本处理再次转义的问题。这不由得让我感到悲哀,难道中国人的文化自信还不如一个弹丸小国,一定要把自己的文字“转换”成西文才觉得舒服?