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高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
jquery实现倒计时效果
Dec 14 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
使用 JavaScript 制作页面效果
Apr 21 Javascript
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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
使用php实现截取指定长度
2013/08/06 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php中error与exception的区别及应用
2014/07/28 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python logging模块原理解析及应用
2020/08/13 Python
python zip()函数的使用示例
2020/09/23 Python
python中round函数保留两位小数的方法
2020/12/04 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
红色旅游心得体会
2014/09/03 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python