Question

我理解document.write是邪恶的，不应该用来在网站上输出文字。

但是，我没有找到一个更好的解决方案供我使用，我在页面上通过javascript输出翻译文本。考虑一下：

我的模板代码如下所示：

<h1><script>_e("title");</script></h1>

在javascript文件中，我有类似的代码来翻译strigs：

// Initialize the dictionaries and set current language.
window.lang = {};
window.lang.en = { "title": "Sample Page" };
window.lang.de = { "title": "Beispiel Seite" };

window.curLang = "en";

// Translation function that should output translated text.
function _e(text) {
    var dictionary = window.lang[window.curLang];
    var translation = dictionary[text];

    // BELOW LINE IS EVIL.
    // But what's the alternative without having to change the template code above?
    document.write( translation );
}

问题：

我可以更改javascript函数，以便在不更改模板代码的情况下不使用document.write吗？如果不是：这里最好的翻译解决方案是什么？

Answer 1

在不使用document.write的情况下进行翻译的一种方法 - 以及在关闭Javascript或没有翻译时获得文本的附加后果（好处？） - 将注释需要翻译的元素并在加载文档后执行翻译，方法是更改innerHTML或textContent（如果要转义实体）。

您的翻译功能可能是这样的：

function translateAll() {
    var dictionary = window.lang[window.curLang];
    var elements = document.querySelectorAll("[data-i18n-id]");

    for (var i = 0; i < elements.length; i++) {
        var el = elements[i];

        var translation = dictionary[el.dataset.i18nId]
        if (translation) {
            el.innerHTML = translation;
        }
    }
}

你可以执行它，例如，onload：

<body onload="translateAll();">
  <h1 data-i18n-id="title">My Title</h1>
</body>

Answer 2

这是我第一次使用document.currentScript，但我已经尝试过这段代码，它应该可以正常运行：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script  type="text/javascript" charset="utf-8">
        // Initialize the dictionaries and set current language.
        window.lang = {};
        window.lang.en = { "title": "Sample Page" };
        window.lang.de = { "title": "Beispiel Seite" };

        window.curLang = "en";

        // Translation function that should output translated text.
        function _e(text) {
            var dictionary = window.lang[window.curLang];
            var translation = dictionary[text];

            var container = document.currentScript;
            container.parentNode.innerHTML = translation;
        }
    </script>
</head>
<body>
    <h1><script>_e("title");</script></h1>
</body>
</html>

另一个原因是使用特殊标签或属性替换为jQuery之类的东西，但这会改变你的模板。像

这样的东西

<span class='i18n-text'>title</span>

    var dictionary = window.lang[window.curLang];
    jQuery('.i18n-text').each(function(){
        var text = $(this).text();
        var translation = dictionary[text];
        $(this).html(translation);
    });

（我还没有尝试过第二种解决方案，但它应该有效：D）

Answer 3

使用knockout.js，方法是将翻译密钥存储在计算变量中，然后编写一个翻译服务函数，在哈希表中查找翻译。然后，这个触发器将是一个可观察的，你可以在HTML标签上进行属性绑定，设置lang属性。更改此observable将触发依赖计算变量自动重新评估和更新文档。如果在这里使用knockout是一个选项，请告诉我，我将设置一个示例。

没有document.write的输出翻译

3 个答案: