JS实现多语言方式

页面导航:首页 > 网络编程 > JavaScript > JS实现多语言方式

JS实现多语言方式

来源: 作者: 时间:2016-02-02 09:59 【

应用场景:在不同移动平台(IOS,Android)上,建立一套与HTML页面通讯框架;主要业务逻辑使用HTML开发;想支持多语言开发。动机:通过主动发消息的方式,在页面完成初始化前,获取

应用场景:

在不同移动平台(IOS,Android)上,建立一套与HTML页面通讯框架;主要业务逻辑使用HTML开发;想支持多语言开发。

动机:

通过主动发消息的方式,在页面完成初始化前,获取当前语言选项,并且根据该语言选项,调用对应的JS文件(每种语言对应一个JS文件)解析页面。

实现细节:

向本地语言框架发请求获取语言种类;
$(document).on("pageinit",function(){
               /*Kaiwii 向本地代码发请求获取当前语言种类*/
               });

本地语言框架触发回调函数(JS方法):根据语言选项,动态将对应语言的JS文件嵌入HTML并且触发其执行;
/*Kaiwii 本地语言框架回调本方法*/
function GetLanguageCodeCallBack(Jstring,ERROR){
    var i18File = $("script[name='i18']");
    if(i18File.length==0){//没有成功加载js文件
        var i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
        switch (Jstring){
            case "EN":
                i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
                break;
            case "CN":
                i18FileLink = "<script name='i18' src='../../js/i18_CN.js'></script>";
                break;
        }
        $("head").append(i18FileLink);
    }else{//成功加载js文件
        switch (Jstring){
            case "EN":
                $(i18File).attr("src","../../js/i18.js");
                break;
            case "CN":
                $(i18File).attr("src","../../js/i18_CN.js");
                break;
        }
        /*主动触发更新HTML*/
        updatei18Spans();
    }
}

不同语言对应的JS文件(如i18.js): 1、使用JSON对象存储KEY-VALUE[不同语言版本的JS文件仅仅是VALUE不同(VALUE为对应语言版本中的值)]; 2、HTML中的静态部分需要调用JS方法修改DOM对象的属性方式完成多语言动态化(通过调用updatei18spans()触发);动态部分直接调用即可;
/*用于国际化*/
/*Kaiwii*/
/*对应关系表(key为元素的ID,value为国际化下的显示内容*//*span 部分*/var spans = {"DemandDepositAccountTitle":"CCB Current Account"};//本地代码交互的部分var locale_vars = {"enquiryTitle":"Account Info Inquiry"};var i18placeholder = {"请输入单位名称或账号":"Organization's Name/Account"," 开始日期":"Start Date"," 截止日期":"End Date"};function updatei18Spans(){ for(index in spans){ $("span[i18Id='"+index+"']").(spans[index]); } for(index in i18placeholder){ $("input[placeholder='"+index+"']").attr("placeholder",i18placeholder[index]); }}$(function(){//加载显示内容方法 updatei18Spans(); });


调用多语言动态框架修改: 1、静态部分: HTML上:
2、动态部分: JS代码中:
liElement += ""+locale_vars.enquiryTitle+"";




Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<