93

Sono un membro di un team con più di 20 sviluppatori. Ogni sviluppatore lavora su un modulo separato (qualcosa vicino a 10 moduli). In ogni modulo che potremmo avere almeno 50 forme CRUD, il che significa che abbiamo attualmente nei pressi di 500 aggiungere pulsanti, Salva pulsanti, modificare pulsanti, eccBest practice per la localizzazione e la globalizzazione di stringhe ed etichette

Tuttavia, perché vogliamo globalizzata nostra applicazione , dobbiamo essere in grado di tradurre testi nella nostra applicazione. Ad esempio, ovunque, la parola aggiungi dovrebbe diventare ajouter per gli utenti francesi.

Quello che abbiamo fatto fino ad ora, è che per ogni vista nell'interfaccia utente o nel Presentation Layer, abbiamo un dizionario di coppie chiave/valore di traduzioni. Quindi durante il rendering della vista, traduciamo testi e stringhe richiesti usando questo dizionario. Tuttavia, questo approccio, siamo arrivati ​​ad avere qualcosa vicino a 500 aggiungere in 500 dizionari. Ciò significa che abbiamo violato il principal di DRY.

D'altra parte, se centralizziamo stringhe comuni, come mettere aggiungere in un unico luogo, e chiedere agli sviluppatori di utilizzare ovunque, incontriamo il problema di non essere sicuro se una stringa è già definito nel dizionario centralizzato o no.

One altre opzioni potrebbero essere quello di avere nessun dizionario di traduzione e utilizzare i servizi di traduzione online come Google Translate, Bing Translator, ecc

Un altro problema che abbiamo incontrato è che alcuni sviluppatori sotto lo stress di realizzazione del progetto la puntualità non può ricordare le chiavi di traduzione . Ad esempio, per il testo del pulsante Aggiungi, uno sviluppatore ha utilizzato aggiungere mentre un altro sviluppatore ha utilizzato nuova, ecc

Qual è la migliore pratica, o un metodo più conosciuto per la globalizzazione e localizzazione di risorse stringa di un'applicazione?

+1

La [parlare] (http://www.youtube. com/watch? v = uXS_-JRsB8M) di [Alex Sexton] (http://alexsexton.com/) sul tema [Client Side Internationalization] (http://www.youtube.com/watch?v=uXS_-JRsB8M) dalla conferenza JS dell'UE è un buon inizio. –

risposta

44

Per quanto ne so, c'è una buona libreria chiamata localeplanet per localizzazione e internazionalizzazione in JavaScript. Inoltre, penso che sia nativo e non abbia dipendenze da altre librerie (ad es.jQuery)

Ecco il sito della biblioteca: http://www.localeplanet.com/

Anche guardare questo articolo di Mozilla, è possibile trovare ottimo metodo e gli algoritmi per la traduzione lato client: http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your-javascript-with-a-little-help-from-json-and-the-server/

La parte comune di tutti coloro articoli/librerie è che utilizzano una classe i18n e un metodo get (in alcuni modi anche definendo un nome di funzione più piccolo come _) per il recupero/conversione di key su value. Nella mia spiegazione, lo key indica la stringa che si desidera tradurre e lo value significa stringa tradotta.
Quindi, è sufficiente un documento JSON per memorizzare key e value.

Ad esempio:

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

E qui il JSON:

{ test: "blah blah" } 

Credo usando attuali soluzioni biblioteche popolari è un buon approccio.

+1

Senza offesa ma non è questo che Afshin ha già provato? Il problema è che diversi sviluppatori hanno difficoltà a ricordare quali chiavi usare. Sono d'accordo con che il tuo metodo descritto è la strada da percorrere. Non vedo come possa essere altrimenti. Grazie per gli ottimi collegamenti btw. – Spock

12

jQuery.i18n è un leggero plug-in jQuery per consentire l'internazionalizzazione nelle tue pagine web. Ti consente di impacchettare le stringhe di risorse personalizzate nei file '.properties', proprio come nei pacchetti di risorse Java. Carica e analizza i pacchetti di risorse (.properties) in base alla lingua o alla lingua fornita dal browser.

sapere di più su questo dare un'occhiata al How to internationalize your pages using JQuery?

36

Quando sei di fronte a un problema da risolvere (e, francamente, che non è questi giorni?), La strategia di base di solito presa dal informatici noi gente si chiama “divide et impera”. Va così:

  • Concettualizzare il problema specifico come un insieme di piccoli sotto-problemi.
  • Risolvi ogni piccolo problema.
  • Combina i risultati in una soluzione del problema specifico.

Ma "divide et impera" non è l'unica strategia possibile. Possiamo anche adottare un approccio più generalista:

  • Concettualizzare il problema specifico come caso speciale di un problema più generale.
  • In qualche modo risolvere il problema generale.
  • Adattare la soluzione del problema generale al problema specifico.

- Eric Lippert

credo esistono molte soluzioni già per questo problema in lingue lato server, come ASP.Net/C#.

ho delineato alcuni dei principali aspetti del problema

  • Problema: Abbiamo bisogno di caricare i dati solo per la lingua desiderata

    Soluzione: A questo scopo risparmiamo dati in un file separato per ogni lingua

ex. res.de.js, res.fr.js, res.en.js, res.js (per la lingua predefinita)

  • Problema: i file di risorse per ogni pagina devono essere separate in modo abbiamo solo l'abbiamo dati bisogno

    Soluzione: Siamo in grado di utilizzare alcuni strumenti che già esistono come https://github.com/rgrove/lazyload

  • Problema: Abbiamo bisogno di una struttura di coppia chiave/valore per salvare i nostri dati

    Soluzione: Suggerisco un oggetto javascript invece di string/string air. Siamo in grado di beneficiare della intellisense da un IDE

  • Problema: i membri generali devono essere conservati in un file pubblico e tutte le pagine dovrebbero accedervi

    Soluzione: A tal fine faccio una cartella nella directory principale di applicazioni web chiamato Global_Resources e una cartella per memorizzare file globale per ogni sottocartelle abbiamo chiamato '' Local_Resources

  • Problema: Ogni membro sottosistemi/sottocartelle/moduli dovrebbero ignorare i membri Global_Resources sul loro campo di applicazione

    012.

    Soluzione: ho considerato un file per ogni

struttura dell'applicazione

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

Il codice corrispondente per i file:

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

Il file di risorse per la lingua desiderata deve essere caricato sulla pagina selezionata da Global_Resource - Questo dovrebbe essere il primo file che viene caricato su tutti le pagine.

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 il file (questo file dovrebbe essere carico ultimo)

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

Speranza che aiuta :)

+5

L'unica cosa che non mi piace di questo approccio è che la localizzazione e lo sviluppo sono strettamente accoppiati ... Quindi quando viene aggiunta una stringa inglese (qualunque sia il valore predefinito), il resto delle lingue deve essere aggiornato attraverso il codice. Preferirei creare JSON con uno strumento da un certo tipo di file di traduzione. Ancora una buona rappresentazione! –

+0

qualcuno mi può spiegare per downvote? –