Dizelerin ve etiketlerin yerelleştirilmesi ve küreselleştirilmesi için en iyi uygulama [kapalı]


124

20'den fazla geliştiriciye sahip bir ekibin üyesiyim. Her geliştirici ayrı bir modül üzerinde çalışır (10 modülün yakınında). Her modülde en az 50 CRUD formumuz olabilir, yani şu anda 500'e yakın ekleme düğmesi , kaydetme düğmesi , düzenleme düğmesi vb. Var .

Ancak, uygulamamızı küreselleştirmek istediğimiz için, uygulamamızdaki metinleri çevirebilmeliyiz. Örneğin, her yerde Fransız kullanıcılar için add kelimesi bir kelime haline gelmelidir .

Şimdiye kadar yaptığımız şey, UI veya Sunum Katmanındaki her görünüm için, anahtar / değer çiftleri sözlüğümüzün olmasıdır. Ardından görünümü oluştururken gerekli metinleri ve dizeleri bu sözlüğü kullanarak çeviririz. Ancak, bu yaklaşım, biz 500 yakın bir şey var geldiniz eklenti 500 sözlüklerde. Bu, KURU prensibini ihlal ettiğimiz anlamına gelir.

Biz koyarak gibi ortak dizeleri, merkezileştirme Öte yandan, eklenti tek bir yerde ve her yerde kullanmak için geliştiriciler isteyin, biz bir dize zaten merkezi sözlükte tanımlanmış veya olmadığından emin eğer olmama sorunla karşılaşırsanız.

Diğer seçeneklerden biri de çeviri sözlüğüne sahip olmamak ve Google Translate, Bing Translator vb. Çevrimiçi çeviri hizmetlerini kullanmak olabilir.

Karşılaştığımız bir başka sorun da, projeyi zamanında teslim etme stresi altındaki bazı geliştiricilerin çeviri anahtarlarını hatırlayamamasıdır . Örneğin, eklenti düğmesinin metin için, bir geliştirici kullanılan sahiptir eklenti başka bir geliştirici kullandı ederken yeni vb

Bir uygulamanın dize kaynaklarının küreselleşmesi ve yerelleştirilmesi için en iyi uygulama veya en iyi bilinen yöntem nedir?


2
Konuşma tarafından Alex Sexton konu üzerinde İstemci Tarafı Uluslararasılaşma JS AB konferansından iyi bir başlangıçtır.
Minko Gechev

Yanıtlar:


51

Bildiğim kadarıyla localeplanetJavaScript'te Yerelleştirme ve Uluslararasılaştırma adında iyi bir kitaplık var . Ayrıca, yerel olduğunu ve diğer kitaplıklara bağımlılığı olmadığını düşünüyorum (örn. JQuery)

İşte kütüphanenin web sitesi: http://www.localeplanet.com/

Ayrıca Mozilla'nın bu makalesine bakın, istemci tarafı çeviri için çok iyi yöntem ve algoritmalar bulabilirsiniz: http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your-javascript-with- a-küçük-help-den-json-ve-sunucu /

Tüm bu eşyalar / kütüphanelerin ortak bir parçası bir kullanmasıdır i18nsınıfı ve bir get(aynı zamanda böyle bir daha küçük işlevsel adı tanımlayan bazı açılardan yöntem _/ alma dönüştürülmesi için) keyiçin value. Açıklamamda key, çevirmek istediğiniz dizgenin ve valueçevrilmiş dize anlamına gelir.
Ardından, key've value' leri depolamak için bir JSON belgesine ihtiyacınız var .

Örneğin:

var _ = document.webL10n.get;
alert(_('test'));

Ve işte JSON:

{ test: "blah blah" }

Mevcut popüler kütüphane çözümlerini kullanmanın iyi bir yaklaşım olduğuna inanıyorum.


1
Alınma ama bu Afshin'in denediği şey değil mi? Onun sorunu, farklı geliştiricilerin hangi anahtarları kullanacaklarını hatırlamakta güçlük çekmeleridir. Tarif ettiğiniz yöntemin gidecek yol olduğuna katılıyorum. Aksi halde nasıl olabileceğini anlamıyorum. Harika bağlantılar btw için teşekkürler.
Spock

47

Çözmeniz gereken bir sorunla karşı karşıya kaldığınızda (ve açıkçası bu günlerde kim değil?), Biz bilgisayar çalışanlarının genellikle kullandığı temel stratejiye "böl ve fethet" denir. Bu böyle devam ediyor:

  • Spesifik problemi daha küçük alt problemler olarak kavramsallaştırın.
  • Her küçük sorunu çözün.
  • Sonuçları, belirli bir problemin çözümünde birleştirin.

Ancak "böl ve yönet" tek olası strateji değildir. Ayrıca daha genel bir yaklaşım benimseyebiliriz:

  • Belirli bir sorunu daha genel bir sorunun özel bir durumu olarak kavramsallaştırın.
  • Bir şekilde genel sorunu çöz.
  • Genel problemin çözümünü spesifik probleme uyarlayın.

- Eric Lippert

ASP.Net/C# gibi sunucu tarafı dillerinde bu sorun için birçok çözümün zaten mevcut olduğuna inanıyorum.

Sorunun bazı önemli yönlerini özetledim

  • Sorun : Verileri yalnızca istenen dil için yüklememiz gerekiyor

    Çözüm : Bu amaçla verileri her dil için ayrı bir dosyaya kaydediyoruz

ex. res.de.js, res.fr.js, res.en.js, res.js (varsayılan dil için)

  • Sorun: Her sayfa için kaynak dosyaları ayrılmalıdır, bu nedenle yalnızca ihtiyacımız olan verileri alıyoruz

    Çözüm : https://github.com/rgrove/lazyload gibi zaten var olan bazı araçları kullanabiliriz

  • Sorun: Verilerimizi kaydetmek için bir anahtar / değer çifti yapısına ihtiyacımız var

    Çözüm : string / string air yerine bir javascript nesnesi öneririm. Bir IDE'den intellisense'den yararlanabiliriz

  • Sorun: Genel üyeler herkese açık bir dosyada saklanmalı ve tüm sayfalar onlara erişmelidir

    Çözüm : Bu amaçla web uygulamasının kökünde Global_Resources adında bir klasör ve onu 'Local_Resources' olarak adlandırdığımız her alt klasör için global dosyayı depolamak için bir klasör oluşturuyorum.

  • Sorun: Her alt sistem / alt klasör / modül üyesi, kapsamlarında Global_Resources üyelerini geçersiz kılmalıdır

    Çözüm : Her biri için bir dosya düşündüm

Uygulama Yapısı

root/
    Global_Resources/
        default.js
        default.fr.js
    UserManagementSystem/
        Local_Resources/
            default.js
            default.fr.js
            createUser.js
        Login.htm
        CreateUser.htm

Dosyalar için ilgili kod:

Global_Resources / Default.js

var res = {
    Create : "Create",
    Update : "Save Changes",
    Delete : "Delete"
};

Global_Resources / default.fr.js

var res = {
    Create : "créer",
    Update : "Enregistrer les modifications",
    Delete : "effacer"
};

İstenen dil için kaynak dosyası Global_Resource'dan seçilen sayfaya yüklenmelidir - Bu, tüm sayfalara yüklenen ilk dosya olmalıdır.

UserManagementSystem / Local_Resources / Default.js

res.Name = "Name";
res.UserName = "UserName";
res.Password = "Password";

UserManagementSystem / Local_Resources / default.fr.js

res.Name = "nom";
res.UserName = "Nom d'utilisateur";
res.Password = "Mot de passe";

UserManagementSystem / Local_Resources / createUser.js

// Override res.Create on Global_Resources/default.js
res.Create = "Create User"; 

UserManagementSystem / Local_Resources / createUser.fr.js

// Override Global_Resources/default.fr.js
res.Create = "Créer un utilisateur";

manager.js dosyası (bu dosya en son yüklenmelidir)

res.lang = "fr";

var globalResourcePath = "Global_Resources";
var resourceFiles = [];

var currentFile = globalResourcePath + "\\default" + res.lang + ".js" ;

if(!IsFileExist(currentFile))
    currentFile = globalResourcePath + "\\default.js" ;
if(!IsFileExist(currentFile)) throw new Exception("File Not Found");

resourceFiles.push(currentFile);

// Push parent folder on folder into folder
foreach(var folder in parent folder of current page)
{
    currentFile = folder + "\\Local_Resource\\default." + res.lang + ".js";

    if(!IsExist(currentFile))
        currentFile = folder + "\\Local_Resource\\default.js";
    if(!IsExist(currentFile)) throw new Exception("File Not Found");

    resourceFiles.push(currentFile);
}

for(int i = 0; i < resourceFiles.length; i++) { Load.js(resourceFiles[i]); }

// Get current page name
var pageNameWithoutExtension = "SomePage";

currentFile = currentPageFolderPath + pageNameWithoutExtension + res.lang + ".js" ;

if(!IsExist(currentFile))
    currentFile = currentPageFolderPath + pageNameWithoutExtension + ".js" ;
if(!IsExist(currentFile)) throw new Exception("File Not Found");

Umarım yardımcı olur :)


7
Bu yaklaşımla ilgili hoşlanmadığım tek şey, yerelleştirme ve geliştirmenin birbirine sıkı sıkıya bağlı olmasıdır ... Bu nedenle, bir İngilizce (varsayılan ne olursa olsun) dizesi eklendiğinde, Dillerin geri kalanı kod aracılığıyla güncellenmelidir. JSON'un bir tür çeviri dosyasından bir araçla oluşturulmasını tercih ederim. Yine de iyi bir temsil!
Nate-Wilkins 13

yerelleştirme için yaptığınız gibi yaptıysanız, bunu şu sorguda görebilirsiniz: stackoverflow.com/q/53864279/4061006 . Tek sorun, Global_Resources / default.js'yi Global_Resources / default.fr.js'ye nasıl çevireceğinizdir? Bu dosyaları istenen dillere dönüştürmek için hangi aracı / kiti kullanıyorsunuz. Buna benim de ihtiyacım olduğu için
Jayavel

Dizenin nereye gittiğini ve ne anlama geldiğini açıklayan her bir anahtarın yanında insan tarafından okunabilir bir yorum saklamalısınız, böylece çevirmene (veya kendinize) yeni bir dil eklemeye gittiğinizde ve bazılarını unuttuğunuzda daha fazla bağlam sağlayabilirsiniz. dizelerin anlamı. Örneğin, Chrome uzantılarını yerelleştirmek"Create" : {"message": "Create", "description": "text on the button that opens the editor with a blank Foo"} için yaptıkları gibi bir şey yapın . Veya bu yorumları içeren ayrı bir dosya oluşturun.
Boris

13

jQuery.i18n , web sayfalarınızda uluslararasılaştırmayı etkinleştirmek için hafif bir jQuery eklentisidir. Java Kaynak Paketlerinde olduğu gibi, '.properties' dosyalarında özel kaynak dizelerini paketlemenize olanak tanır. Tarayıcı tarafından bildirilen sağlanan dile veya dile göre kaynak paketlerini (.properties) yükler ve ayrıştırır.

bu konuda daha fazla bilgi edinmek için JQuery kullanarak sayfalarınızı nasıl uluslararası hale getirebilirsiniz?


Bağlantı gitti
Alexander Farber
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.