jQuery Exposure插件的中文翻译问题

2018-05-04 分类 [Web 开发]

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实体,结果还导致了被按照文本处理再次转义的问题。这不由得让我感到悲哀,难道中国人的文化自信还不如一个弹丸小国,一定要把自己的文字“转换”成西文才觉得舒服?