javascript - 将 javascript 变量放置在 html 中 - 有几种方法，该选择哪一种？

Question

我在一些 html 上，我必须根据用户选择的语言放置一些变量。由于多种原因，我只能在客户端执行此操作。

我已经想出了不同的方法来做到这一点，现在我问自己哪种方法是最好的方法(在这种情况下最好的方法意味着“最快”，“最安全”等等)。

变量存储在如下所示的 json 文件中:

lang = {
"nav" : {
    "categories" : {
        "header" : {
            "de" : "Kategorien",
            "en" : "Categories"
        },
    },
    "search" : {
        "placeholder" : {
            "de" : "Suchen nach...",
            "en" : "search for..."
        },
        "button" : {
            "de" : "Finden",
            "en" : "Find"
        },
    },
},
"benefits" : {
    "first" : {
        "title" : {
            "de" : "irgendwas",
            "en" : "something"
        },
        "content" : {
            "de" : "blablabla",
            "en" : "blablabla in english"
        },
    },
    "second" : {
        "title" : {
            "de" : "irgendwas anderes",
            "en" : "something else"
        },
        "content" : {
            "de" : "noch mehr blablabla",
            "en" : "some more blablabla in english"
        },
    },
},
}

现在我可以使用小脚本直接将变量放置在它们应该在的任何地方，例如:

<script>document.write(lang.nav.search.button[language])</script>

在另一边我可以放置一个而不是脚本

<span id="lang.nav.search.button"></span>

或任何其他标签，并有一个外部 javascript，我可以在其中替换/追加/前置或其他内容。

为了让它变得更复杂一点，在某些情况下，我必须根据所选语言设置元素的属性，并且因为不可能在另一个标记内直接执行上面的脚本来设置属性(或者有什么方法可以做到这一点？)我使用一个函数来获取DOM中当前位置的父元素

function scriptparent() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1].parentNode;
};

并像这样设置属性:

<div class="form-group">
    <input type="text" class="form-control">
    <script>scriptparent().firstElementChild.placeholder = lang.nav.search.placeholder[language];</script>
</div>

完成我的项目后，将会有 50 - 100 个变量，所以，有什么建议更喜欢哪种方式吗？或者也许有人有更好的方法来处理它？<​​/p>

提前致谢!

Answer 1

您可以使用http://i18next.com/翻译库。将其与模板库、 mustache 、 Handlebars 或类似的东西一起使用。