应用场景:

在不同移动平台(IOS,Android)上,建立一套与HTML页面通讯框架;主要业务逻辑使用HTML开发;想支持多语言开发。

动机:

通过主动发消息的方式,在页面完成初始化前,获取当前语言选项,并且根据该语言选项,调用对应的JS文件(每种语言对应一个JS文件)解析页面。

实现细节:

  • 向本地语言框架发请求获取语言种类;
  1. $(document).on("pageinit",function(){
  2. /*Kaiwii 向本地代码发请求获取当前语言种类*/
  3. });
 
  • 本地语言框架触发回调函数(JS方法):根据语言选项,动态将对应语言的JS文件嵌入HTML并且触发其执行;
  1. /*Kaiwii 本地语言框架回调本方法*/
  2. function GetLanguageCodeCallBack(Jstring,ERROR){
  3. var i18File = $("script[name='i18']");
  4. if(i18File.length==0){//没有成功加载js文件
  5. var i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
  6. switch (Jstring){
  7. case "EN":
  8. i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
  9. break;
  10. case "CN":
  11. i18FileLink = "<script name='i18' src='../../js/i18_CN.js'></script>";
  12. break;
  13. }
  14. $("head").append(i18FileLink);
  15. }else{//成功加载js文件
  16. switch (Jstring){
  17. case "EN":
  18. $(i18File).attr("src","../../js/i18.js");
  19. break;
  20. case "CN":
  21. $(i18File).attr("src","../../js/i18_CN.js");
  22. break;
  23. }
  24. /*主动触发更新HTML*/
  25. updatei18Spans();
  26. }
  27. }
 
  • 不同语言对应的JS文件(如i18.js):
1、使用JSON对象存储KEY-VALUE[不同语言版本的JS文件仅仅是VALUE不同(VALUE为对应语言版本中的值)];
2、HTML中的静态部分需要调用JS方法修改DOM对象的属性方式完成多语言动态化(通过调用updatei18spans()触发);动态部分直接调用即可;
  1. /*用于国际化*/
  2. <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上:
  1. <span i18Id="DemandDepositAccountTitle"></span>
2、动态部分:

JS代码中:

  1. liElement += "<span ACC_NO='"+ACC_NO+"' CshEx_Cd='"+CshEx_Cd+"' CcyCd='"+CcyCd+"' onclick='renderBAL(this)' class='font14' style='color:#306ed2'>"+locale_vars.enquiryTitle+"</span>";

JS实现多语言方式的更多相关文章

  1. JS的脚本语言

    js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="te ...

  2. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  3. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  4. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. Atitit。Js调用后台语言 java c#  php swing android  swt的方法大总结

    Atitit.Js调用后台语言 java c#  php swing android  swt的方法大总结 1. Js调用后台语言有三种方法1 2. Swt  BrowserFunction 绑定方法 ...

  6. js实现继承的方式

    [原文] 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // ...

  7. JS继承的实现方式

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 ...

  8. js获取浏览器语言(ie、ff、chrome)、contextpath

    /js获取浏览器语言(ie.ff.chrome) var language_en_us = "en-us"; var language_zh_cn = "zh-cn&qu ...

  9. JS对象创建常用方式及原理分析

    ====此文章是稍早前写的,本次属于文章迁移@2017.06.27==== 前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的 ...

随机推荐

  1. java 调用 python 脚本

    有时候在java项目里,需要执行Python脚本以下几种方式: 1.直接执行Python脚本代码 引用 org.python包 创建一个 python解释器,貌似这种方式不可以导入第三方库,模块... ...

  2. solr插件导入数据库中的数据

    solr插件导入数据库中的数据 1:自定义与数据库对应的域: 1.1. 设置业务系统Field 如果不使用Solr提供的Field可以针对具体的业务需要自定义一套Field. 例如:如下是商品信息Fi ...

  3. windows server 禁用智能卡服务的步骤

    许多用户对于系统中的很多功能都不太了解,其中智能卡服务更是少有人知.智能卡服务就是对插入的智能卡进行管理和访问控制,大多数用户都无需使用此项功能.那么在Win7系统中要怎么取消智能卡服务呢? 1.首先 ...

  4. vue常用的路由对象

    官网上解释:一个路由对象表示当前激活的路由的状态信息 路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新 //如果要在刷新页面时候通过路由的信息来操作 ...

  5. 2017CCPC秦皇岛 G题Numbers&&ZOJ3987【大数】

    题意: 给出一个数n,现在要将它分为m个数,这m个数相加起来必须等于n,并且要使得这m个数的或值最小. 思路: 从二进制的角度分析,如果这m个数中有一个数某一位为1,那么最后或起来这一位肯定是为1的, ...

  6. Linux下NAT模式和桥接模式的网络配置

        Linux下NAT模式和桥接模式的网络配置 最近在配置linux虚拟机的时候发现有很多坑,现在记录下来以防日后又跳到坑里. 我的运行环境是:主机 windows 7  虚拟机 Virtualb ...

  7. Spring基础3

    一.AOP 1)AOP简介: Aspect Oriented Programming,面向切面编程 通过预编译方式和动态代理实现程序功能的一种技术,AOP是OOP的延续,是函数式编程的一种衍生范例.利 ...

  8. Django REST framework 第三章 CBV

    从介绍Django快开始,我们就一直在使用FBV的方式来撰写代码,二者本质上并没有太大的区别,然而到了REST framework,更会倾向于用CBV来写API的视图,后面会看到这个方式的强大,它允许 ...

  9. ieda 运行web--导入其它jar包

    == 配置 或选择tomcat 1.打开IntelliJ IDEA,点击菜单的“Run”->“Edit Configurations...”,然后会打开运行设置弹框.2.在弹框中,点击左上角的“ ...

  10. Mybatis-利用resultMap 输出复杂pojo

    个:复杂的sql语句查询的数据集的字段和 pojo的字段不相同,需要用到resultMap做一个对应. ---------------- mybatis中使用resultMap完成高级输出结果映射. ...