javascript的消息资源国际化

不知道大家对于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标签。

 

 

 

 

 

 

 

 

 

 

 

 

评论

5 楼 longleg 2008-07-11  

我的做法是在产品初次启动的时候去过滤JS文件，然后使用Spring标签国际化。不知道这样是否欠妥？

4 楼 wucc1986 2008-07-11  

navigator.userLanguage 
这个只能获取 浏览器 设置的 Locale 需要做切换的 话 就不能这么做了吧

3 楼 xxpniu 2008-02-20  

我觉得FCK里面就做的很好 国际话的可以参考FCK的做法
不过是ANSC 还是UTF-8 都认得EN的 所以把JS的代码和数据分开编写 这样方便以后做国际化

2 楼 hax 2008-02-14  

方法有很多种，偶没什么意见。

偶只提一点，自动判断语言固然好，但是也要考虑到提供给用户自主选择的权利，比如UI上加上语言的选择。

1 楼 xiaoyu 2008-02-13  

最简单的方法是利用已经做好的资源文件.

首先拼出来要使用哪个资源文件(用上面的函数来判断).

再用Ajax加载进来, 然后用eval来加载表达式(因为资源文件刚好是key = value这种表达式).

再自己定义一个函数message(key, args)返回key的值(主要是因为要替参数).

如果做得好的话, 这个资源文件可能只需要加载一次就行了.

或者放到一个JS文件里:

<script>
@include<fileName.properties>;
</script>

当然或许这个不是最好的方法. 不过觉得还算简单(不用维护两套)