Meilleures pratiques en matière de javascript et de multilinguisme

Question

Quelle est la meilleure pratique pour un site web multilingue utilisant la manipulation du DOM avec javascript ? Je construis certaines parties dynamiques du site web en utilisant javascript. Ma première idée était d'utiliser un tableau avec les chaînes de texte et le code de langue comme index. Est-ce une bonne idée ?

Answer 1

Lorsque j'ai construit des sites multilingues auparavant (pas de très grands sites, donc cela pourrait ne pas s'adapter trop bien), j'ai conservé une série de fichiers "langue" :

• lang.en.js
• lang.it.js
• lang.fr.js

Chacun des fichiers déclare un objet qui n'est en fait qu'une correspondance entre un mot clé et une expression linguistique :

// lang.en.js
lang = {
    greeting : "Hello"
};

// lang.fr.js
lang = {
    greeting : "Bonjour"
};

Chargez dynamiquement l'un de ces fichiers et il ne vous restera plus qu'à référencer la clé dans votre carte :

document.onload = function() {
    alert(lang.greeting);
};

Il y a, bien sûr, beaucoup d'autres façons de faire cela, et beaucoup de façons de faire ce style mais mieux : encapsuler le tout dans une fonction de sorte qu'une phrase manquante de votre "dictionnaire" puisse être gérée gracieusement, ou même faire le tout en utilisant la POO, et laisser celle-ci gérer l'inclusion dynamique des fichiers, elle pourrait peut-être même dessiner des sélecteurs de langue pour vous, etc.

var l = new Language('en');
l.get('greeting');

Answer 2

Il y a quelques éléments que vous devez garder à l'esprit lorsque vous concevez un support multilingue :

1 - Séparer le code des données (c'est-à-dire ne pas coder en dur les chaînes de caractères dans vos fonctions).

2 - créer une fonction de crochet de formatage pour gérer les différences de localisation. Permettre aux chaînes de caractères formatables ( "{0}" ) est meilleur que la concaténation ( "Bienvenue à" + valeur ), pour de nombreuses raisons :

• dans certaines langues, un nombre est formaté comme 1.234.678,00 au lieu de 1.234.567,00
• La pluralisation n'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. Vous devez donc permettre aux données dynamiques d'être ajoutées après le crochet de traduction : par exemple, "Bienvenue à {0}" se transforme en "he youkoso" en japonais (cela arrive dans presque toutes les langues, remarquez).

3 - Assurez-vous que vous pouvez réellement formater les chaînes de caractères. après le crochet de traduction s'exécute, vous pouvez donc réutiliser les clés.

4 - N'accrochez en aucun cas les sorties de la base de données à l'utilitaire de traduction. . Si vous avez des données multilingues, créez des tables/rangs séparés dans votre base de données. J'ai vu des gens se tromper assez souvent sur cette évidence (généralement pour les pays et les états/provinces dans les formulaires).

5 - Créer des règles de pratiques de codage explicites pour la création de clés. La fonction utilitaire du formateur (qui ressemblera à quelque chose comme translate("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 : "Choisissez un seul format (par exemple, pas de deux-points, coupé) et vous pourrez détecter les divergences dans les revues de code. Ne faites pas ce filtrage de manière programmatique, car cela peut déclencher des faux positifs.

6 - N'oubliez pas que le balisage HTML peut être nécessaire dans la table de traduction (par exemple, si vous devez mettre un mot en gras dans une phrase, ou si vous avez des références médicales en note de bas de page). Faites des tests approfondis à ce sujet.

7 - Il existe plusieurs façons d'importer des chaînes de langues. Idéalement, vous devriez avoir plusieurs versions d'un fichier language.lang.js, passer de l'une à l'autre avec du code côté serveur, et référencer le fichier au bas du fichier HTML. L'extraction du fichier via AJAX est également une alternative, mais peut entraîner des retards. Il n'est pas conseillé de fusionner le fichier language.js avec votre fichier de code principal, car vous perdez les avantages de la mise en cache du fichier.

8 - Testez avec vos langues cibles. Cela semble idiot, mais j'ai vu une fois un bogue sérieux parce que le programmeur n'avait pas pris la peine de vérifier l'existence de "é" dans la clé.

Answer 3

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 l'avoir ajouté à votre page, vous pouvez l'utiliser comme suit :

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, English( sur ) sera sélectionné.

Answer 4

Je viens de trouver un bon article sur l'internationalisation en javascript :
http://24ways.org/2007/javascript-internationalisation

Bien qu'une simple recherche sur Google avec i18n + javascript révèle de nombreuses alternatives.

Au final, cela dépend de la façon dont profond que vous voulez qu'il soit. Pour quelques langues, un seul fichier suffit.

Vous pouvez utiliser un cadre comme Jquery pour identifier le texte (avec une classe) et ensuite utiliser l'id de chaque span pour trouver le texte correspondant dans la langue choisie.
1 ligne de Jquery, c'est fait.

Answer 5

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

En général, il s'agit d'une sorte d'attribut que vous définissez sur les balises, puis vous remplacez le contenu de la balise par la traduction trouvée dans votre fichier de traduction, en fonction de la valeur de l'attribut.

Une chose à garder à l'esprit, c'est l'évolution du jeu de langues (lorsque votre code évolue, devrez-vous retraduire l'ensemble ou non). 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 à être utilisés.

En outre :

• Utilisez toujours UTF-8 - cela peut paraître idiot, mais si vous n'êtes pas en utf-8 dès le départ (tête HTML + encodage JS), vous serez vite fichu.
• Utilisez la chaîne anglaise comme clé pour vos traductions - de cette façon, vous ne vous retrouverez pas avec des choses comme : lang.Greeting = 'Hello world' - mais lang['Hello world'] = 'Hello world' ;