具有不同語言選項的數據對象。 Javascript實現

當我必須根據頁面語言使用javascript管理一些小文本時，我有這種奇怪的情況。試想你需要根據html lang屬性來替換模板的某些部分。於是我創建了多維數據對象，並決定圍繞它進行下列操作。一切工作正常，但我覺得這是不是最好的做法，也許我會避免使用開關：具有不同語言選項的數據對象。 Javascript實現

jsbin版本：http://jsbin.com/EvEciVa/2/

$(function(){ 

var lang = $('html').attr('lang'), 
    text; 

var obj = { 
    'en' : { 
    'title' : 'Title english', 
    'url' : 'en.html' 
    }, 
    'fr' : { 
    'title' : 'Title french', 
    'url' : 'fr.html', 
    }    
}; 

switch(lang){    
    case'fr': 
    text = [obj.fr.title,obj.fr.url]; 
    break;    
    default: 
    text = [obj.en.title,obj.en.url]; 
} 

    $('body').prepend('<a href="'+text[1]+'">'+text[0]+'</a>'); 

});

的問題是：至於我有lang屬性值（語言），也許我可以避免使用開關和重複的情況下，而是我可以實現lang值作爲變量來訪問數據對象，像這樣[obj.lang.title,obj.lang.url];當然，它不會在我的情況下工作。

我將不勝感激。謝謝。

來源

2013-08-28 devjs11

非常感謝你 – devjs11

爲了避免具有switch聲明，您可以設置默認值是這樣的：

var lang = $('html').attr('lang') || 'en';

這意味着en是默認的，如果有一個lang組被覆蓋。然後你可以使用括號表示來訪問這樣的對象：

$('body').prepend('<a href="' + obj[lang].url + '">' + obj[lang].title + '</a>');

來源

2013-08-28 14:08:58

謝謝羅裏，雖然我不能使用默認en。例如，如果我將lang =「fr」更改爲不存在的lang，例如lang =「dfgdfg」，它不會採用en文本。只是未定義。 – devjs11

@ devjs11這很奇怪。嘗試使用'var lang = $（'html'）。prop（'lang'）|| 'en';'而是。 –

看，只是爲你做了一個例子http://jsbin.com/EvEciVa/3/ – devjs11

使用括號標記

text = [obj[lang].title,obj[lang].url];

我將放棄陣列，並且只是把標題/ URL中的字符串中。

var data = obj[lang]; 
$('body').prepend('<a href="' + data.url + '">' + data.text + '</a>');

來源

2013-08-28 14:08:15 epascarello

我會將本地化對象分配給另一個變量並從那裏開始工作。這樣，所有本地化代碼都可以引用同一個對象，而無需處理語言邏輯，並且在以後您可以根據需要切換到外部本地化文件。

$(function(){ 

    var lang = $('html').attr('lang') || 'en', 
     text; 


    var obj = { 
    'en' : { 
     'title' : 'Title english', 
     'url' : 'en.html' 
    }, 
    'fr' : { 
     'title' : 'Title french', 
     'url' : 'fr.html', 
    }    
    }; 


    var translations = obj[lang]; 


    $('body').prepend('<a href="'+translations.url+'">'+translations.text+'</a>'); 

});

而且，正如Rory提到的那樣，設置默認值是一個非常好的主意。

來源

2013-08-28 14:09:10 quoo

你並不真的需要一個數組在這種情況下：

$('body').prepend('<a href="'+obj[lang].url+'">'+obj[lang].title+'</a>');

來源

2013-08-28 14:09:28

-1

爲了避免switch語句，您可以只檢查歸咎於語言是否在你的對象是顯而易見的，而其他選擇英語：

var lang = $('html').attr('lang'); 
if (! (lang in obj)) 
    lang = "en"; 

// then: 
'<a href="' + obj[lang].url + '">' + obj[lang].title + '</a>'

或者，也許更容易，使用更短的

var localisation = obj[ $('html').attr('lang') ] || obj.en; 

'<a href="' + localisation.url + '">' + localisation.title + '</a>'

來源

2013-08-28 14:22:41 Bergi

@downvoter，請解釋以下代碼。 – Bergi

具有不同語言選項的數據對象。 Javascript實現

回答

相關問題