javascript - tag - Mejores prácticas para la localización y globalización de cadenas y etiquetas

title of page html

Question

Soy miembro de un equipo con más de 20 desarrolladores. Cada desarrollador trabaja en un módulo separado (algo cerca de 10 módulos). En cada módulo, podríamos tener al menos 50 formularios CRUD, lo que significa que actualmente tenemos cerca de 500 botones de agregar , guardar botones , editar botones , etc.

Sin embargo, como queremos globalizar nuestra aplicación, debemos ser capaces de traducir textos en nuestra aplicación. Por ejemplo, en todas partes, la palabra " agregar" debería convertirse en ajouter para los usuarios franceses.

Lo que hemos hecho hasta ahora es que para cada vista en UI o Presentation Layer, tenemos un diccionario de pares clave / valor de traducciones. Luego, mientras renderizamos la vista, traducimos los textos y cadenas requeridos usando este diccionario. Sin embargo, este enfoque, hemos llegado a tener algo cerca de 500 agregar en 500 diccionarios. Esto significa que hemos violado el principio DRY.

Por otro lado, si centralizamos cadenas comunes, como poner agregar en un lugar, y pedimos a los desarrolladores que lo usen en todas partes, nos encontramos con el problema de no estar seguros de si una cadena ya está definida en el diccionario centralizado o no.

Otra opción podría ser no tener un diccionario de traducción y usar servicios de traducción en línea como Google Translate, Bing Translator, etc.

Otro problema que hemos encontrado es que algunos desarrolladores bajo el estrés de entregar el proyecto a tiempo no pueden recordar las claves de traducción . Por ejemplo, para el texto del botón Agregar, un desarrollador ha usado agregar mientras que otro desarrollador ha usado nuevo , etc.

¿Cuál es la mejor práctica, o el método más conocido para la globalización y localización de recursos de cadena de una aplicación?

Answer 1

Cuando te enfrentas a un problema para resolver (y, francamente, ¿quién no lo es en estos días?), La estrategia básica que usualmente tomamos los informáticos se llama "divide y vencerás". Y dice así:

• Conceptualice el problema específico como un conjunto de sub-problemas más pequeños.
• Resuelve cada problema más pequeño.
• Combine los resultados en una solución del problema específico.

Pero "dividir y conquistar" no es la única estrategia posible. También podemos adoptar un enfoque más generalista:

• Conceptualice el problema específico como un caso especial de un problema más general.
• De alguna manera resolver el problema general.
• Adapte la solución del problema general al problema específico.

- Eric Lippert

Creo que ya existen muchas soluciones para este problema en lenguajes del lado del servidor, como ASP.Net/C#.

He delineado algunos de los principales aspectos del problema

• Problema : necesitamos cargar datos solo para el idioma deseado

  Solución : para este propósito guardamos datos en archivos separados para cada idioma

ex. res.de.js, res.fr.js, res.en.js, res.js (para el idioma predeterminado)

• Problema: los archivos de recursos para cada página deben separarse para que solo obtengamos los datos que necesitamos

  Solución : podemos usar algunas herramientas que ya existen, como https://github.com/rgrove/lazyload

• Problema: necesitamos una estructura de pares clave / valor para guardar nuestros datos

  Solución : Sugiero un objeto javascript en lugar de string / string air. Podemos beneficiarnos del intellisense de un IDE

• Problema: los miembros generales deben almacenarse en un archivo público y todas las páginas deben acceder a ellos

  Solución : para este propósito, hago una carpeta en la raíz de la aplicación web llamada Global_Resources y una carpeta para almacenar el archivo global para cada subcarpeta, lo llamamos ''Local_Resources''

• Problema: cada miembro de subsistemas / subcarpetas / módulos debe anular los miembros Global_Resources en su alcance

  Solución : consideré un archivo para cada

Estructura de la aplicación

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

El código correspondiente para los archivos:

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

El archivo de recursos para el idioma deseado debe cargarse en la página seleccionada desde Global_Resource: este debe ser el primer archivo que se carga en todas las páginas.

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

archivo manager.js (este archivo debe cargarse al último)

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

Espero eso ayude :)

Answer 2

jQuery.i18n es un plugin jQuery liviano para permitir la internacionalización en sus páginas web. Le permite empacar cadenas de recursos personalizadas en archivos ''.properties'', al igual que en los paquetes de recursos de Java. Carga y analiza paquetes de recursos (.properties) en función del idioma o idioma proporcionado por el navegador.

Para saber más sobre esto, eche un vistazo a Cómo internacionalizar sus páginas usando JQuery.

Answer 3

Por lo que sé, hay una buena biblioteca llamada localeplanet para localización e internacionalización en JavaScript. Además, creo que es nativo y no tiene dependencias con otras bibliotecas (por ejemplo, jQuery)

Aquí está el sitio web de la biblioteca: http://www.localeplanet.com/

También mire este artículo de Mozilla, puede encontrar muy buenos métodos y algoritmos para la traducción del lado del cliente: http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your-javascript-with-a-little-help-from-json-and-the-server/

La parte común de todos esos artículos / bibliotecas es que usan una clase i18n y un método get (de alguna manera también definen un nombre de función más pequeño como _ ) para recuperar / convertir la key al value . En mi explicación, la key significa que la cadena que desea traducir y el value significa cadena traducida.
Entonces, solo necesitas un documento JSON para almacenar key y value .

Por ejemplo:

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

Y aquí el JSON:

{ test: "blah blah" }

Creo que el uso de soluciones actuales de bibliotecas populares es un buen enfoque.