JS实现多语言方式

应用场景:

在不同移动平台(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()触发);动态部分直接调用即可;

/*用于国际化*/
<pre name="code" class="javascript">/*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+"‘]").html(spans[index]); } for(index in i18placeholder){ $("input[placeholder=‘"+index+"‘]").attr("placeholder",i18placeholder[index]); }}$(function(){//加载显示内容方法
updatei18Spans(); });


  • 调用多语言动态框架修改:

1、静态部分:

HTML上:

<span i18Id="DemandDepositAccountTitle"></span>

2、动态部分:

JS代码中:

liElement += "<span ACC_NO='"+ACC_NO+"' CshEx_Cd='"+CshEx_Cd+"' CcyCd='"+CcyCd+"' onclick='renderBAL(this)' class='font14' style='color:#306ed2'>"+locale_vars.enquiryTitle+"</span>";
时间: 2024-08-26 20:27:54

JS实现多语言方式的相关文章

JS的脚本语言

js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="text/javascript"></script>代表这是一个脚本:二.注释语法样式表的注释:单行注释用//表示:多行注释/**/可以注释多行文字: <!---->是在网页里面的注释:三.数据类型的分类:1.整型(存放整数的数据)用int来表示整型:2.flioat(单精

JS继承的实现方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

js几种继承方式(六种)

JS实现继承的几种方式前言:大多数语言都支持两种继承方式: 接口继承和实现继承 ,而javaScript中无法实现接口继承,javaScript只支持实现继承,而且其实现继承主要是依靠原型链来实现.主要继承方式如下:1.原型链继承2.构造函数继承3.实例继承4.拷贝继承5.组合继承(原型链继承+构造函数继承)6.寄生组合式继承 JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类function Animal (name) { // 属性 this.nam

cocos-html5 JS 写法基础 语言核心

转载:http://blog.csdn.net/leasystu/article/details/18735797 cocos2dx 3.0 js继承:John Resiq的继承写法解析 CCClass.js cocos2d-html5/cocos2d/core/platform/CCClass.js ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

Ubuntu14.04 搭建 node.js 环境(Binaries方式)

从官网下载 http://nodejs.org/download/ Linux Binaries (.tar.gz)  下载下来的是node-v0.10.29-linux-x64.tar.gz文件 解压 $ tar zxvf node-v0.10.29-linux-x64.tar.gz /etc/profile.d/下建立 node.sh文件 export NODEHOME=/home/username/Software/node #指定你的解压后Binaries文件路径 export PATH

js与jQuery实现方式对比汇总

CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" style="border:1px solid red;height:100px;width:100px;"></div> 1.控制元素的显示与隐藏 javascript方式 /*控制div隐藏*/ document.getElementById("ListCo

js对象的创建方式

js对象的创建方式: js也具有OOP编程思想,了解js对象,可以进一步了解js是如何面向对象编程的. js的创建对象方式: 1.   Object var a=new Object();a.name="jack";a.age=20;a.sayName=function () { console.log(this.name);} a.sayName();//打印jack 2.  字面量 var b={name:"rose",age:20,sayName:functi

JS对象创建常用方式及原理分析

====此文章是稍早前写的,本次属于文章迁移@2017.06.27==== 前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 1 var person = new Object(); 2 person.name = "jack"; 3 person.sayName = function () { 4 ale

js之对象创建方式

js中对象创建方式有多种,最常见的就是调用Object构造函数,下面我们来列举对象的创建的方式 一.Object构造 var Dog = new Object(); Dog.name = "peter"; Dog.bark =function(){ console.log(" my name is "+Dog.name); } Dog.bark();//输出my name is peter 此方法是最常见的生成方式,但不能指定想要的对象类型 二.字面量构造 var