javascript的消息资源国际化

转自：http://rainlife.iteye.com/blog/161713

不知道大家对于javascript中的消息资源是如何做国际化的，对于页面文件来说，可以使用一些国际化的开源东东，像struts的〈bean:message〉，或者使用JSTL的fmt，但在js文件中，却无法使用这类的东西，一种变通的办法，就是在jsp中定义一些javascript的常量，这些常量的值为国际化资源文件中定义的信息，然后在js代码中去使用定义好的这些常量。

另一个方法，像FCKEditor这样，直接使用javascript来实现javascript的国际化。而这样的实现方法，也并不困难。

javascrip中的一个navigator的内置对象，包含了正在使用的 Navigator 的版本信息。

属性概览

appCodeName	指定浏览器的代码名称。
appName	指定浏览器的名称。
appVersion	指定 Navigator 的版本信息。
language	标明正在使用的 Navigator 的翻译语种。
mimeTypes	客户端支持的所有 MIME 类型数组。
platform	标明了 Navigator 编译适合的机器类型。
plugins	客户端已安装的所有插件数组。
userAgent	指定了用户代理头。

这里的appName应该都比较熟悉，可以用它来判断不同的浏览器，像ie ,firefox等。

navigator还有一个language的属性，

IE代码：

navigator.userLanguage

非IE代码： 

navigator.language

它的返回值为用户所在的语言环境，与java中的Locale类似，比如说我在中文环境下，则返回"zh-CN"。

这样，就可以根据返回的language的不同，来定位到不同的message_XXX.js资源文件中。

比如说定义两个js资源文件：

message_en.js

var Lang = {
   hello : "Hello World!"
}

message_zh-CN.js

var Lang = {
   hello : "你好，世界!"
}

 

我们就可以在js代码中直接使用Lang[key](这里的key为hello)实现资源信息的国际化。

另外，像FCKEditor，在HTML页面中，也使用javascript来做国际化，像下面的代码：

<span fckLang="PlaceholderDlgName">Placeholder Name</span><br>

 

 通过为span这个标签增加一个fckLang="XXX"的属性，这里的"XXX"，就是定义在资源js文件中的(像上面的"hello")。

这是如何实现的呢？

先定义一个TranslatePage(A)的方法，参数A为一个DOM对象：

function TranslatePage(A) {
            this.TranslateElements(A, 'SPAN', 'innerHTML', false);
}

 在TranslatePage方法内部，又调用了TranslateElements的方法：

/**
         * @param A   DOM对象
         * @param B   国际化的HTML标签
         * @param C   国际化标签的innerHTML或innerText
         * @param D   是否转换HTML的标签
         */
        var TranslateElements = function(A, B, C, D) {
            var e = A.getElementsByTagName(B);//实际上就是根据标签名取到这个标签的数据集合
            var E,s;
            for (var i = 0; i < e.length; i++) {
                if (E = e[i].getAttribute('fckLang')) { //如果这个标签中有'fckLang'的属性的，说明它是要实现国际化的
                    if (s = Lang[E]) {
                        if (D) s = HTMLEncode(s);//是否处理HTML标签
                        eval('e[i].' + C + ' = s');//这个实际上就是执行XXX.innerHTML='XXXX'
                    }
                }
            }
        }

 下面这个是HTMLEncode方法的实现：

var HTMLEncode = function(A) {
            if (!A) return '';
            A = A.replace(/&/g, '&');
            A = A.replace(/</g, '<');
            A = A.replace(/>/g, '>');
            return A;
}

 

实际上就是将"〈"和“〉”这样的标签转换一下。

这样的实现，不禁让我想到了Tapestry，通过在HTML标签中增加一个“jwcid”的属性，这标识这个HTML标签是一个Tapestry的组件，通过Tapestry的处理，再将结果返回重新渲染由jwcid这个属性标识的HTML标签。

评论

1 楼 xwq18 2010-05-26  

谢谢