快捷導(dǎo)航

JS如何在不同平臺(tái)實(shí)現(xiàn)多語(yǔ)言方式

更新時(shí)間：2020年07月16日 14:30:14 作者：網(wǎng)絡(luò)蟲(chóng)

這篇文章主要介紹了JS如何在不同平臺(tái)實(shí)現(xiàn)多語(yǔ)言方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

應(yīng)用場(chǎng)景：

在不同移動(dòng)平臺(tái)（IOS，Android）上，建立一套與HTML頁(yè)面通訊框架；主要業(yè)務(wù)邏輯使用HTML開(kāi)發(fā)；想支持多語(yǔ)言開(kāi)發(fā)。

動(dòng)機(jī)：

通過(guò)主動(dòng)發(fā)消息的方式，在頁(yè)面完成初始化前，獲取當(dāng)前語(yǔ)言選項(xiàng)，并且根據(jù)該語(yǔ)言選項(xiàng)，調(diào)用對(duì)應(yīng)的JS文件（每種語(yǔ)言對(duì)應(yīng)一個(gè)JS文件）解析頁(yè)面。

實(shí)現(xiàn)細(xì)節(jié)：

向本地語(yǔ)言框架發(fā)請(qǐng)求獲取語(yǔ)言種類；

$(document).on("pageinit",function(){
/*Kaiwii 向本地代碼發(fā)請(qǐng)求獲取當(dāng)前語(yǔ)言種類*/
});

本地語(yǔ)言框架觸發(fā)回調(diào)函數(shù)（JS方法）：根據(jù)語(yǔ)言選項(xiàng)，動(dòng)態(tài)將對(duì)應(yīng)語(yǔ)言的JS文件嵌入HTML并且觸發(fā)其執(zhí)行；

/*Kaiwii 本地語(yǔ)言框架回調(diào)本方法*/ 
function GetLanguageCodeCallBack(Jstring,ERROR){ 
  var i18File = $("script[name='i18']"); 
  if(i18File.length==0){//沒(méi)有成功加載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; 
    } 
    /*主動(dòng)觸發(fā)更新HTML*/ 
    updatei18Spans(); 
  } 
}

不同語(yǔ)言對(duì)應(yīng)的JS文件（如i18.js）：

1、使用JSON對(duì)象存儲(chǔ)KEY－VALUE［不同語(yǔ)言版本的JS文件僅僅是VALUE不同（VALUE為對(duì)應(yīng)語(yǔ)言版本中的值）］；

2、HTML中的靜態(tài)部分需要調(diào)用JS方法修改DOM對(duì)象的屬性方式完成多語(yǔ)言動(dòng)態(tài)化（通過(guò)調(diào)用updatei18spans()觸發(fā)）；動(dòng)態(tài)部分直接調(diào)用即可；

/*用于國(guó)際化*/
<pre name="code" class="javascript">/*Kaiwii*/

/*對(duì)應(yīng)關(guān)系表（key為元素的ID，value為國(guó)際化下的顯示內(nèi)容*//*span 部分*/var spans = {"DemandDepositAccountTitle":"CCB Current Account"};//本地代碼交互的部分var locale_vars = {"enquiryTitle":"Account Info Inquiry"};var i18placeholder = {"請(qǐng)輸入單位名稱或賬號(hào)":"Organization's Name/Account"," 開(kāi)始日期":"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(){//加載顯示內(nèi)容方法 updatei18Spans(); });

調(diào)用多語(yǔ)言動(dòng)態(tài)框架修改：

1、靜態(tài)部分：

HTML上：

<span i18Id="DemandDepositAccountTitle"></span>

2、動(dòng)態(tài)部分：

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>";

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: