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列表框操作函数集合汇总
Nov 28 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
详解vue中组件参数
2018/07/09 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
python生成器generator用法实例分析
2015/06/04 Python
python购物车程序简单代码
2018/04/18 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python如何使用代码运行助手
2020/07/03 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
2014高考励志标语
2014/06/05 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
JAVA API 实用类 String详解
2021/10/05 Java/Android
python基础之函数的定义和调用
2021/10/24 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android