Question

我在一些html上，我必须在用户选择的语言的依赖性中放置一些变量。由于几个原因，我只能做这个客户端。

我已经找到了不同的方法，现在我问自己哪种方法最好（在这种情况下最好的方式意味着＆＃34;最快＆＃34;，＆＃34;大多数故障安全＆＃34;等等。）

变量存储在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/库进行翻译。将它与模板库，小胡子，把手或类似的东西一起使用。

Answer 2

您可以使用https://angular-translate.github.io/库进行翻译。该解决方案是应用程序生成器的第一次使用。我在这个库中使用了JHipster应用程序。用法和性能都很好。

将javascript变量放在html中 - 有几种方法可供选择？

2 个答案: