5

Estou pensando em desenvolver um sistema de i18n para uma aplicação.

A minha ideia é: existe um texto #i18n_label_name em um determinado lugar da página e #i18n_label_contact em outro lugar.

Pergunta: Qual a forma mais performática para varrer toda a página buscando esses identificadores e alterando eles para o texto de tradução.

5
  • ja tentou usar uma library js para fazer isto ? i18next.com Commented 12/11/2015 às 12:01
  • @GabrielRodrigues não tinha conhecimento desta lib, muito legal, porém eu quero desenvolver a minha própria, e pensei em algo bem simples, sem necessidade de atributos ou algo exceto o texto. Commented 12/11/2015 às 12:19
  • você usa algum template engine ou pretende escrever do zero em js puro ? Commented 12/11/2015 às 12:31
  • @GabrielRodrigues pretendo fazer em js puro. Commented 12/11/2015 às 12:39
  • 3
    Para quem precisar de coisa deste tipo server side, tenho uma solução em PHP aqui: pt.stackoverflow.com/a/97733/70
    – Largato
    Commented 12/11/2015 às 20:46

5 Respostas 5

5

acredito que a melhor maneira de se fazer isto, é fazendo uso de propriedades data-custom e um json com os valores.

i18n = {};
i18n["pt"] = {
  "name": "Nome",
  "contact": "Contato"
};

i18n["es"] = {
  "name": "Nombre",
  "contact": "Contacto"
};

i18n["fn"] = {
  "name": "Nom",
  "contact": "Contact"
};

i18n["en"] = {
  "name": "Name",
  "contact": "Contact"
};

var language = document.getElementById("language");
var elementos = document.querySelectorAll("[data-i18n]");
var onLanguageChange = function (event) {  
  [].forEach.call(elementos, function (elem, indice) {
    elem.textContent = i18n[language.value][elem.dataset.i18n];
  }); 
};

language.addEventListener("change", onLanguageChange);
onLanguageChange();
<div>
  <select id="language">
    <option value="pt">Português</option>
    <option value="es">Español</option>
    <option value="fn">Français</option>
    <option value="en">English</option>  
  </select>
</div>
<div>
  Name: <label data-i18n="name"></label>
</div>
<div>
  Contact: <label data-i18n="contact"></label>
</div>

Segue uma implementação usando class ao invés de data-custom

i18n = {};
i18n["pt"] = {
  "name": "Nome",
  "contact": "Contato"
};

i18n["es"] = {
  "name": "Nombre",
  "contact": "Contacto"
};

i18n["fn"] = {
  "name": "Nom",
  "contact": "Contact"
};

i18n["en"] = {
  "name": "Name",
  "contact": "Contact"
};

var language = document.getElementById("language");
var elementos = document.querySelectorAll("[class*='i18n']");
var onLanguageChange = function (event) {
  [].forEach.call(elementos, function (elem, indice) {
    var propName = [].filter.call(elem.classList, function (classe, indice) {
      return classe.indexOf("i18n") >= 0;
    })[0].split("-")[1];
    elem.textContent = i18n[language.value][propName];
  }); 
};

language.addEventListener("change", onLanguageChange);
onLanguageChange();
<div>
  <select id="language">
    <option value="pt">Português</option>
    <option value="es">Español</option>
    <option value="fn">Français</option>
    <option value="en">English</option>  
  </select>
</div>
<div>
  Name: <label class="i18n-name"></label>
</div>
<div>
  Contact: <label class="i18n-contact"></label>
</div>

E por fim a solução usando substituição de strings, neste caso todo o HTML é recriado, então todas as consultas aos objetos DOM precisam serem refeitas e os eventos re-associados.

i18n = {};
i18n["pt"] = {
  "name": "Nome",
  "contact": "Contato"
};

i18n["es"] = {
  "name": "Nombre",
  "contact": "Contacto"
};

i18n["fn"] = {
  "name": "Nom",
  "contact": "Contact"
};

i18n["en"] = {
  "name": "Name",
  "contact": "Contact"
};

var template = document.body.innerHTML;
var language = document.getElementById("language");
var onLanguageChange = function (event) {  
  document.body.innerHTML = template.replace(/{{i18n-(\w*)}}/g,function(m,key){
    return i18n[language.value].hasOwnProperty(key)? i18n[language.value][key]: "";
  });
  
  language = document.getElementById("language");
  language.addEventListener("change", onLanguageChange);
};

onLanguageChange();
<div>
  <select id="language">
    <option value="pt">Português</option>
    <option value="es">Español</option>
    <option value="fn">Français</option>
    <option value="en">English</option>  
  </select>
</div>
<div>
  Name: <label>{{i18n-name}}</label>
</div>
<div>
  Contact: <label>{{i18n-contact}}</label>
</div>

6
  • Não queria utilizar data custom, será que fica muito complicado sem ? Commented 12/11/2015 às 18:42
  • você pode tentar simular o mesmo efeito usando o class, porém terá um trabalho adicional, uma outra opção é realizar um replace no innerHTML, porem teria de manter um "template" em memoria. teria algum problema com os data-custom? Commented 12/11/2015 às 18:54
  • Pelo fato de querer desenvolver isto para apex o data custom não é viável. Commented 12/11/2015 às 18:57
  • @devgaspa, atualizei a resposta, adaptei o script para usar uma class no lugar do data-custom Commented 12/11/2015 às 19:01
  • @devgaspa, adicionei um terceiro exemplo usando manipulação de string. Commented 12/11/2015 às 19:50
3

Utilizando replaces, em relação a jquery.html vs innerHTML, a segunda opção se mostrou consideravelmente mais rápida em cerca de 29% sobre a primeira. Isso é uma diferença um tanto considerável, sem levar em conta o tempo de carregamento da Jquery, ao contrario do InnerHTML que é nativo de Javascript.

Porém, nesse segundo teste, o innerHTML se mostrou mais lento em relação ao jquery.append e jquery.html.

Mas como assim???

O que acontece aqui é o seguinte, note que no primeiro exemplo o código é escrito da seguinte forma:

var list = document.getElementById('list');
var html = '';

for (var i = 0; i < 1000; i++) {
    html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;

Já na segunda:

var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}

Ou seja, os dois testes tem finalidades parecidas porém em questão de performance nota-se um numero bem distinto, isso se deve ao acesso do innerHTML na segundo teste ser feito dentro do próprio for, pode parecer algo bobo, mas a cada looping o mesmo é acessado e esse pequeno deslize pode gerar uma lentidão catastrófica.

Agora mais um porem em relação a segurança...

Segundo a MDN: "[...]recomenda-se que você não use o innerHTML quando estiver inserindo texto puro como alternativa, utilize node.textContent. Esse não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro."

Esse trecho diz respeito a execução de <script> e falhas de seguranças no uso do innerHTML (para mais detalhes sugiro que veja o link) e como alternativa sugere-se o uso do node.textContent.

O node.textContent representa o conteúdo do nó do elemento e de seus descendentes e a principal diferença entre ele e o innerHTML é que o primeiro não analisa a HTML como um todo, apenas o textNode fazendo com que o mesmo seja mais performático em relação ao segundo.

Existem diversos outros métodos como: innerText e nodeValue, não falarei detalhadamente de todos para que o conteúdo não fique muito extenso mais com uma breve pesquisa você pode ver o que cada um faz. Bem vamos ao que importa, esse teste, inclui todos os métodos nativos citados testado em elementos diferentes.

Mas, qual usar? O textContent nesse ultimo teste se mostrou mais performática em relação aos demais totalizando média de aproximadamente 15% em comparação as outras formas. Acredito que a melhor forma com base no que foi descrito acima, tanto em relação de segurança quanto a performance é utilizar o mesmo. Outro ponto a levar em consideração e o fato de ser nativo de Javascript.


Em relação a seletores nativos o seletor getElementByID é mais rápidos em relação aos seletores como getElementsByClassName e querySelector segundo esse teste. O Id também ganha no teste de seletores em Jquery nesse teste.

Qual usar? no primeiro teste e nesse terceiro pode-se ver claramente que novamente funcionalidades nativas saem na frente em relação a performance.


Os dois primeiros testes foram retirados do StackOverflow.

Aqui há uma listagem de outros tópicos interessantes em relação a performance em javascript, recomendo como leitura adicional.

Obs.: os valores podem variar em milésimos dependendo da maquina e navegador.

2

Você pode usar Jquery

$("#i18n_label_name").html("TEXTO");
$("#i18n_label_contact").html("TEXTO");

Com esse seletor $("#i18n_label_name"), ele vai direto no elemento, sem precisar varrer todo o HTML.

2

Utilizando somente JS com a função [querySelector()][1]

document.querySelector("#i18n_label_name").innerHTML = "Novo Texto";

document.querySelector("#i18n_label_contact").innerHTML = "Novo Texto";
1

Pela simplicidade, sugiro fazer um método em jQuery, mas se quiser escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

O conteúdo em HTML:

<select name="translate" id="tradutor">
    <option value="pt-BR">Portunguês</option>
    <option value="en-US">Inglês</option>
    <option value="es-GT">Espanhol</option>
    <option value="pe-PG">Língua do P</option>

</select>

<div data-translate="pt-BR">
    <p data-i18n="content_A">The Book's on the table</p>
    <p data-i18n="content_B">Hello World</p>
    <p data-i18n="content_C">My name is Ivan</p>
</div>

E o javascript:

 document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var el_translate = document.querySelector('[data-translate]');
        var tradutor = document.getElementById('tradutor');

        tradutor.value = el_translate.dataset.translate;        
        tradutor.addEventListener("change", function (event) {
            el_translate.dataset.translate = event.target.value;
            setLang(el_translate);
        });
        setLang(el_translate);
    }
}

var setLang = (function() {
    var i18n = {
        "pt-BR":{
            "content_A":"O livro está sobre a mesa",
            "content_B":"Olá Mundo",
            "content_C":"Meu nome é Ivan",
            "content_PT":"Português",
            "content_EN":"Inglês",
            "content_ES":"Espanhol",
            "content_PE":"Língua do P",

        },
        "en-US":{
            "content_A":"The Book's on the table",
            "content_B":"Hello World",
            "content_C":"My name is Ivan",
            "content_PT":"Portuguese",
            "content_EN":"English",
            "content_ES":"Espanish",
            "content_PE":"Language of P",
        },
        "es-GT":{
            "content_A":"El libro está en la mesa",
            "content_B":"Hola mundo",
            "content_C":"Mi nombre es Iván",
            "content_PT":"Portugués",
            "content_EN":"Inglés",
            "content_ES":"Español",
            "content_PE":"Idioma hacer P",
        },
        "pe-PG":{
            "content_A":"PO PliPvro PesPtá PsoPbre Pa PmePsa",
            "content_B":"POPlá PMunPdo",
            "content_C":"PMeu PnoPme Pé PIPvan",
            "content_PT":"PPorPtuPguês",
            "content_EN":"PInPglês",
            "content_ES":"PEsPpanhol",
            "content_PE":"PLínPgua Pdo PP",
        }
    };

    return function (e) {
        var elementos = document.querySelectorAll("[data-i18n]");
        [].forEach.call(elementos, function (el, index) {
            el.textContent = i18n[e.dataset.translate][el.dataset.i18n];
        }); 
    };
})();

Aqui o exemplo funcionando e JavaScript Puro

E aqui o exemplo funcionando com jQuery

Editado: Conforme sugestão de @TobyMosque, que achei muito bem-vinda, uma adaptação sem uso de jQuery:

1
  • 3
    o AP deixou claro que pretende usar apenas JavaScript sem jQuery, quanto ao seu método setLang, sugiro que faça uma closure e declare o i18n dentro do mesmo, assim evitando instanciar o o mesmo sempre que o método setLang for executado. segue o seu script com as minhas sugestões de melhoria: JSFiddle Commented 13/11/2015 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .