JS如何在不同平台实现多语言方式


Posted in Javascript onJuly 16, 2020

应用场景:

在不同移动平台(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>";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue实现购物车小案例
Sep 27 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
vue实现div单选多选功能
Jul 16 #Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python实现机器人行走效果
2018/01/29 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python request使用方法及问题总结
2020/04/26 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
数控专业推荐信范文
2013/12/02 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
写景作文评语集锦
2014/12/25 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js