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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
JS重要知识点小结
Nov 06 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python的Tqdm模块的使用
2018/01/10 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
浅析NumPy 切片和索引
2020/09/02 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
C++面试题目
2013/06/25 面试题
外贸专业求职信
2014/03/09 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis