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实现支持Ajax验证的表单插件
Mar 24 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js星星评分效果
2014/07/24 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
超市促销实习自我鉴定
2013/09/23 职场文书
优秀教师主要事迹
2014/02/01 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
社区党支部承诺书
2015/04/29 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android