it-swarm-tr.com

Dizeleri Javascript'te yerelleştirmek

Şu anda .NET için sunucu tarafı kaynaklarımı yönetmek için .resx dosyalarını kullanıyorum.

bununla uğraştığım uygulama aynı zamanda geliştiricilerin istemci tarafı doğrulaması vb. için çeşitli etkinlik işleyicileri için JavaScript'i eklemelerine izin veriyor. JavaScript iletilerimi ve dizelerimi yerelleştirmenin en iyi yolu nedir? 

İdeal olarak, yerelleştirilmiş kaynakların geri kalanını korumak için dizeleri .resx dosyalarında saklamak istiyorum.

Önerilere açığım.

38
SaaS Developer

Temel bir JavaScript nesnesi ilişkisel bir dizidir, bu nedenle anahtar/değer çiftlerini saklamak için kolayca kullanılabilir. Böylece JSON kullanarak, her dize için bu şekilde yerelleştirilecek bir nesne oluşturabilirsiniz:

var localizedStrings={
    confirmMessage:{
        'en/US':'Are you sure?',
        'fr/FR':'Est-ce que vous êtes certain?',
        ...
    },

    ...
}

Sonra her dizenin yerel sürümünü bu şekilde alabilirsiniz:

var locale='en/US';
var confirm=localizedStrings['confirmMessage'][locale];
25
Joel Anair

Esinlenerek SproutCore Karakter dizilerinin özelliklerini ayarlayabilirsiniz:

'Hello'.fr = 'Bonjour';
'Hello'.es = 'Hola';

ve ardından yerel ayarınıza göre uygun yerelleştirmeyi tüketin:

var locale = 'en';
alert( message[locale] );
13
Ryan

Googling’ten sonra sunulan çözümlerin çoğundan memnun değilken, T4 templates kullanan bir şaşırtıcı/genel çözüm buldum. Yazının tamamı Jochen van Wylick tarafından buradan okuyabilirsiniz:

.resx dosyalarına dayalı JavaScript kaynaklarını yerelleştirmek için T4'ü kullanma

Başlıca avantajları:

  1. Kaynakların yönetildiği tek bir yere sahip olmak (yani .resx Dosyaları)
  2. Çoklu kültür desteği
  3. IntelliSense’ten yararlanın - kodun tamamlanmasına izin verin

Dezavantajları:

Bu çözümün eksiklikleri elbette .Js dosyasının boyutunun oldukça büyük olabileceği yönündedir. Ancak, Tarayıcısı tarafından önbellekte saklandığından, bunu uygulamamız için bir problem olarak görmüyoruz. Ancak - bu önbellekleme, tarayıcının koddan çağrılan kaynağı bulamamasına neden olabilir.


Bu nasıl çalışır?

Temelde .resx dosyalarınızı gösteren bir T4 şablonu tanımladı. Bazı C # kodlarıyla, her kaynak dizginin her birinden geçer ve daha sonra Resources.js adlı tek bir JavaScript dosyasında çıkarılan JavaScript saf anahtar değer özelliklerine ekler (eğer isterseniz isimleri Tweak yapabilirsiniz).


T4 template [.resx dosya konumunuzu gösterecek şekilde değiştirin]

<#@ template language="C#" debug="false" hostspecific="true"#>
<#@ Assembly name="System.Windows.Forms" #>
<#@ import namespace="System.Resources" #>
<#@ import namespace="System.Collections" #>
<#@ import namespace="System.IO" #>
<#@ output extension=".js"#>
<#
 var path = Path.GetDirectoryName(Host.TemplateFile) + "/../App_GlobalResources/";
 var resourceNames = new string[1]
 {
  "Common"
 };

#>
/**
* Resources
* ---------
* This file is auto-generated by a tool
* 2012 Jochen van Wylick
**/
var Resources = {
 <# foreach (var name in resourceNames) { #>
 <#=name #>: {},
 <# } #>
};
<# foreach (var name in resourceNames) {
 var nlFile = Host.ResolvePath(path + name + ".nl.resx" );
 var enFile = Host.ResolvePath(path + name + ".resx" );
 ResXResourceSet nlResxSet = new ResXResourceSet(nlFile);
 ResXResourceSet enResxSet = new ResXResourceSet(enFile);
#>

<# foreach (DictionaryEntry item in nlResxSet) { #>
Resources.<#=name#>.<#=item.Key.ToString()#> = {
 'nl-NL': '<#= ("" + item.Value).Replace("\r\n", string.Empty).Replace("'","\\'")#>',
 'en-GB': '<#= ("" + enResxSet.GetString(item.Key.ToString())).Replace("\r\n", string.Empty).Replace("'","\\'")#>'
 };
<# } #>
<# } #>

Form/Görünüm tarafında

Doğru çeviriyi almak için WebForms kullanıyorsanız bunu master'ınıza ekleyin:

<script type="text/javascript">

    var locale = '<%= System.Threading.Thread.CurrentThread.CurrentCulture.Name %>';

</script>

<script type="text/javascript" src="/Scripts/Resources.js"></script>

ASP.NET MVC (benim gibi) kullanıyorsanız, bunu yapabilirsiniz:

<script type="text/javascript">

    // Setting Locale that will be used by JavaScript translations
    var locale = $("meta[name='accept-language']").attr("content");

</script>

<script type="text/javascript" src="/Scripts/Resources.js"></script>

MetaAcceptLanguage yardımcısı Scott Hanselman'ın bu harika gönderisinden aldım:

ASP.NET MVC 3'te Küreselleşme, Uluslararasılaşma ve Yerelleşme, JavaScript ve jQuery - Bölüm 1

public static IHtmlString MetaAcceptLanguage<T>(this HtmlHelper<T> html)
{
     var acceptLanguage =
         HttpUtility.HtmlAttributeEncode(
                     Thread.CurrentThread.CurrentUICulture.ToString());

      return new HtmlString(
      String.Format("<meta name=\"{0}\" content=\"{1}\">", "accept-language",
                    acceptLanguage));
 }

Kullanın

var msg = Resources.Common.Greeting[locale];
alert(msg);
10

JSGettext mükemmel bir iş yapar - arka uçta hemen hemen her dili kullanarak GNU Gettext .po dosyalarının dinamik olarak yüklenmesi. "Gettext ve PHP ile Dinamik Javascript yerelleştirmesi" için Google, PHP ile JSGettext için bir yol bulmak için (bağlantıyı gönderirdim, ama bu aptal site bana izin vermez ...)

Düzenle : bu bağlantı olmalı

4
Jani Patokallio

Bir nesne/dizi gösterimi kullanırdım:

var phrases={};
phrases['fatalError'] ='On no!';

Sonra JS dosyasını değiştirebilir veya öbek listenizi yeniden tanımlamak için bir Ajax çağrısı kullanabilirsiniz.

Bir uydu Düzeneğinde (bir resx dosyası yerine), dili bildiğiniz sunucudaki tüm dizeleri numaralandırabilir, böylece yalnızca doğru dil için yalnızca dizeleri olan bir Javascript nesnesi oluşturabilirsiniz. 

Bunun gibi bir şey bizim için çalışıyor (VB.NET kodu):

Dim rm As New ResourceManager([resource name], [your Assembly])
Dim rs As ResourceSet = 
    rm.GetResourceSet(Thread.CurrentThread.CurrentCulture, True, True)
For Each kvp As DictionaryEntry In rs
    [Write out kvp.Key and kvp.Value]
Next

Ancak, bunu henüz .resx dosyaları için yapmanın bir yolunu bulamadık ne yazık ki henüz bulamadık.

4
Erik Hesselink

JavaScript uygulamalarını yerelleştirmek için bir kütüphane var: https://github.com/wikimedia/jquery.i18n

Parametre değiştirme yapabilir, cinsiyetleri (akıllıca kullanır), sayıyı (birden fazla çoğulda bulunan diller dahil akıllı çoğullarla) ve bazı dillerin ihtiyaç duyduğu özel dilbilgisi kurallarını destekler.

Dizeler JSON dosyalarında saklanır.

Tek gereksinim jQuery.

3
Amir E. Aharoni

HTML5 çalıştıran bir mobil uygulamanın JavaScript'ini yerelleştirmek için aşağıdakileri yaptım:

1. Her dil için İngilizce için "en.js" gibi çağırılan bir dizi kaynak dosyası oluşturuldu. Her biri aşağıdaki gibi uygulamayı farklı dizeler içeriyordu:


        var localString = {
        appName: "your app name",
        message1: "blah blah"
      };

2. Uygulamanın yerel diline göre uygun kaynak dosyasını yüklemek için Lazyload kullanıldı: https://github.com/rgrove/lazyload

3. Sorgu String'i kullanarak dil kodunu girin (PhoneGap kullanarak Android'den html dosyasını başlatıyorum gibi)

4. Sonra dinamik olarak uygun kaynak dosyasını yüklemek için aşağıdaki kodu yazdım:


var lang = getQueryString("language");
localization(lang);
function localization(languageCode) {
    try {
        var defaultLang = "en";
        var resourcesFolder = "values/";
        if(!languageCode || languageCode.length == 0)
            languageCode = defaultLang;
        // var LOCALIZATION = null;
        LazyLoad.js(resourcesFolder + languageCode + ".js", function() {
            if( typeof LOCALIZATION == 'undefined') {
                LazyLoad.js(resourcesFolder + defaultLang + ".js", function() {
                    for(var propertyName in LOCALIZATION) {
                        $("#" + propertyName).html(LOCALIZATION[propertyName]);
                    }
                });
            } else {
                for(var propertyName in LOCALIZATION) {
                    $("#" + propertyName).html(LOCALIZATION[propertyName]);
                }
            }
        });
    } catch (e) {
        errorEvent(e);
    }
}
function getQueryString(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

5. html dosyasından, dizgilere şu şekilde bakın:


    span id="appName"
2
Jaime Botero

Bence bunu düşünebilirsin. İngilizce-İspanyolca örnek:

Bunun gibi 2 Js Scripts yazın:

en-GB.js
lang = {
    date_message: 'The start date is incorrect',
    ...
};
es-ES.js
lang = {
    date_message: 'Fecha de inicio incorrecta',
    ...
};

Sunucu tarafı - arkasındaki kod: 

Protected Overrides Sub InitializeCulture()
    Dim sLang As String 
    sLang = "es-ES" 

    Me.Culture = sLang
    Me.UICulture = sLang
    Page.ClientScript.RegisterClientScriptInclude(sLang & ".js", "../Scripts/" & sLang & ".js")

    MyBase.InitializeCulture()
End Sub

SLang'ın "en-GB" olabileceği yerde, mevcut kullanıcının seçimine bağlı olarak ...

Javascript çağrıları:

alert (lang.date_message);

Ve işe yarıyor, çok kolay sanırım.

1
Caveman

Diodeus.myopenid.com sitesinin cevabını genişleterek: Kodunuzda, gerekli tüm dizelerin bulunduğu bir JS dizisi içeren bir dosya yazın, ardından diğer JS kodundan önce uygun dosyayı/betiği yükleyin. 

0
Lasar