zoukankan      html  css  js  c++  java
  • JS实现多语言方式

    应用场景:

    在不同移动平台(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>";  
  • 相关阅读:
    Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. ......
    UVA 1597 Searching the Web
    UVA 1596 Bug Hunt
    UVA 230 Borrowers
    UVA 221 Urban Elevations
    UVA 814 The Letter Carrier's Rounds
    UVA 207 PGA Tour Prize Money
    UVA 1592 Database
    UVA 540 Team Queue
    UVA 12096 The SetStack Computer
  • 原文地址:https://www.cnblogs.com/wangluochong/p/8438093.html
Copyright © 2011-2022 走看看