Meilleures pratiques javascript et multilanguage

il y a certaines choses que vous devez garder à l'esprit lors de la conception d'un support en plusieurs langues:

1-séparer le code des données (c'est-à-dire ne pas forcer les chaînes de code dans vos fonctions)

2-Créer une fonction de crochet de formatage pour traiter les différences de localisation. Possibilité de chaînes formatables ( "{0}" ) est mieux que concaténer ( "Bienvenue à" + valeur ), pour beaucoup de raisons:

• dans certaines langues, un nombre est formaté comme 1.234.678,00 au lieu de 1.234.567.00
• la pluralisation est souvent pas aussi simple que l'ajout d'un "s" à la fin du singulier
• les règles de grammaire sont différentes et peuvent affecter l'ordre des choses de sorte que vous devez permettre aux données dynamiques d'être ajoutées après le crochet de traduction: par exemple, "Bienvenue à {0} " se transforme en "{0} he youkoso " en Japonais (cela se produit à peu près dans toutes les langues, pensez-vous).

3 - Assurez-vous que vous pouvez réellement formater des chaînes de caractères après le crochet de traduction fonctionne, de sorte que vous pouvez réutiliser des clés.

4 - Ne sauraient, en aucun circunstance, crochet de base de données de sorties pour le traducteur de l'utilitaire . Si vous avez des données multilingues, créez des tableaux / lignes séparés dans votre base de données. J'ai vu des gens obtenir cette évidence faux assez souvent (généralement pour les pays et les états/provinces sous forme).

5-Créer des règles de pratiques de codage explicites pour la création de clés. La fonction utilitaire formatter (qui ressemblera à quelque chose comme traduire("hello world") prendra une clé comme paramètre, et les clés avec de légères variations rendent la maintenance très ennuyeuse. Par exemple, vous pourriez vous retrouver avec trois clés dans l'exemple suivant: "entrez votre nom", "entrez votre nom:", "entrez votre nom." : Choisissez un format (p. ex. pas de deux points, Paré) et relevez les écarts dans les revues de code. Ne pas faire ce filtrage programmatique, car il peut déclencher des faux positifs.

6-soyez conscient que le balisage HTML pourrait être nécessaire dans le tableau de traduction (par exemple, si vous devez mettre en gras un mot dans une phrase, ou avoir des références médicales de note de bas de page). Test pour cette profondeur.

7-Il y a plusieurs façons d'importer des chaînes de langage. Idéalement, vous doit avoir plusieurs versions d'une langue.lang.fichier js, basculer entre eux avec du code côté serveur, et la référence du fichier à partir du bas du fichier HTML. Tirer le fichier via AJAX est également une alternative, mais pourrait introduire des retards. Le langage de la fusion.js dans votre fichier de code principal n'est pas conseillé, puisque vous perdez les avantages de la mise en cache de fichiers.

8 - Test avec vos langues cibles. cela semble stupide, mais j'ai vu un bug grave une fois parce que le le programmeur n'a pas pris la peine de vérifier l'existence de "é" dans la clé.

function Language(lang)
{
    var __construct = function() {
        if (eval('typeof ' + lang) == 'undefined')
        {
            lang = "en";
        }
        return;
    }()

    this.getStr = function(str, defaultStr) {
        var retStr = eval('eval(lang).' + str);
        if (typeof retStr != 'undefined')
        {
            return retStr;
        } else {
            if (typeof defaultStr != 'undefined')
            {
                return defaultStr;
            } else {
                return eval('en.' + str);
            }
        }
    }
}

après avoir ajouté ceci à votre page, vous pouvez travailler avec lui comme ceci:

var en = {
    SelPlace:"Select this place?",
    Save:"Saved."
};

var tr = {
    SelPlace:"Burayı seçmek istiyor musunuz?"
};

var translator = new Language("en");
alert(translator.getStr("SelPlace")); // result: Select this place?
alert(translator.getStr("Save")); // result: Saved.
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string

var translator = new Language("tr");
alert(translator.getStr("SelPlace")); // result: Burayı seçmek istiyor musunuz?
alert(translator.getStr("Save")); // result: Saved. (because it doesn't exist in this language, borrowed from english as default)
alert(translator.getStr("DFKASFASDFJK", "Default string for non-existent string")); // result: Default string for non-existent string

si vous appelez la classe avec une langue que vous n'avez pas définie, l'anglais ( en ) sera sélectionné.

vient de trouver un bel article sur i18n en javascript:

http://24ways.org/2007/javascript-internationalisation

bien qu'une simple recherche google avec i18n + javascript révèle beaucoup d'alternatives.

à la fin, cela dépend de comment deep vous voulez qu'il soit. Pour quelques langues, un seul fichier suffit.

vous pourriez utiliser un cadre comme Jquery , utiliser un span pour identifier le texte (avec une classe), puis utiliser l'id de chaque travée de trouver le texte correspondant dans la langue choisie.

1 Ligne de Jquery, fait.

après avoir lu les grandes réponses de nickf et Leo, j'ai créé le langage de style CommonJS suivant.js pour gérer toutes mes chaînes (et optionnellement, Moustache pour les formater):

var Mustache = require('mustache');

var LANGUAGE = {
    general: {
        welcome: "Welcome {{name}}!"
    }
};

function _get_string(key) {
    var parts = key.split('.');
    var result = LANGUAGE, i;
    for (i = 0; i < parts.length; ++i) {
        result = result[parts[i]];
    }
    return result;
}

module.exports = function(key, params) {
    var str = _get_string(key);
    if (!params || _.isEmpty(params)) {
        return str;
    }
    return Mustache.render(str, params);
};

Et voici comment j'obtiens une chaîne de caractères:

var L = require('language');
var the_string = L('general.welcome', {name='Joe'});

vous devriez examiner ce qui a été fait dans les composants js classiques - prendre des choses comme Dojo, Ext, FCKEditor, TinyMCE, etc. Vous trouverez beaucoup de bonnes idées.

Habituellement, il finit par être une sorte d'attributs que vous mettez sur les étiquettes, puis vous remplacez le contenu de l'étiquette par la traduction trouvée dans votre fichier de traduction, basé sur la valeur de l'attribut.

Une chose à garder à l'esprit, est l'évolution de la langue (quand votre code évolue, aurez-vous besoin de retraduire l'ensemble de la chose ou pas). Nous conservons les traductions dans des fichiers PO (Gnu Gettext), et nous avons un script qui transforme le fichier PO en fichiers JS prêts à l'emploi.

en outre:

• Utilisez toujours UTF-8 - cela semble stupide, mais si vous n'êtes pas dans utf-8 dès le début (HTML head + js encoding), vous serez rapidement buste.
• utilisez la chaîne de caractères anglaise comme clé pour vos traductions - de cette façon tu ne finiras pas avec des choses comme: Salut = 'Bonjour le monde' - mais lang['Hello world'] = 'Hello world';

pour les paquets de ressorts et JavaScript il y a une solution simple: générer i18n tableau dans le modèle (par exemple JSP) et l'utiliser dans JavaScript:

JSP:

<html>
<script type="text/javascript">
    var i18n = [];
    <c:forEach var='key' items='<%=new String[]{"common.deleted","common.saved","common.enabled","common.disabled","...}%>'>
        i18n['${key}'] = '<spring:message code="${key}"/>';
    </c:forEach>
</script>
</html>

et dans JS:

alert(i18n["common.deleted"]);

Voir aussi la Résolution de printemps:les messages en javascript pour l'internationalisation i18n