码迷,mamicode.com
首页 > 编程语言 > 详细

JS实现多语言方式

时间:2018-02-10 11:20:02      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:gpo   业务逻辑   osi   copyto   get   对应关系   对象   直接   不同   

应用场景:

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

动机:

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

实现细节:

  • 向本地语言框架发请求获取语言种类;
[javascript] view plain copy
 
  1. $(document).on("pageinit",function(){  
  2.                /*Kaiwii 向本地代码发请求获取当前语言种类*/  
  3.                });  
 
  • 本地语言框架触发回调函数(JS方法):根据语言选项,动态将对应语言的JS文件嵌入HTML并且触发其执行;
[javascript] view plain copy
 
  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()触发);动态部分直接调用即可;
[javascript] view plain copy
 
  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上:
[javascript] view plain copy
 
  1. <span i18Id="DemandDepositAccountTitle"></span>  
2、动态部分:
JS代码中:
[javascript] view plain copy
 
  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实现多语言方式

标签:gpo   业务逻辑   osi   copyto   get   对应关系   对象   直接   不同   

原文地址:https://www.cnblogs.com/wangluochong/p/8438093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!