javascript - 多语言 html SCORM 内容的良好实践

Question

这更多的是一个“理论”问题，而不是一个技术问题。

我需要创建 SCORM 电子学习内容，纯 HTML-CSS-Javascript，没有任何服务器端技术，并且该内容必须是多语言的。两个主要要求:多语言，而不是服务器端语言。

我的问题是实现这一目标的最佳方法是什么？这些是显而易见的选项:

1. 在每种语言的不同文件夹中复制所需语言的 html 文件。
2. 加载所有语言文件(即xml或json中的ex)，解析html dom并使用 JavaScript 动态分配内容。

在第二种情况下，动态加载文件，什么是最好的方法？我不喜欢这样的想法，因为 html 中所有烦人的脚本标签:

<div>
<p><script> document.write(some_translatable_variable) </script></p>
</div>

而且我也不喜欢像下面这样的东西，因为它需要很多 id 并且真的很难维护:

//in json file lang.es.json
"some_translatable_variable" : "Esto está en español";

//In a loaded langs.js, using jquery:
$("#some_id").html("<p>"+some_translatable_variable+"<p>");


//the html code
<div id="some_id"> <!-- nothing here --> </div>

Answer 1

您可以使用基于 JavaScript 的模板引擎，例如 Mustache , Handlebars ，或Angular .

基本上，您会在 HTML 中放置一个占位符，JavaScript 会用您的文本替换占位符。您无需管理大量 ID。

如果需要，您可以插入不同语言的文本，但请务必注意布局问题，例如 RTL 语言和可能会破坏布局的过长句子。

以下是一些有关客户端模板的有用文章: http://coding.smashingmagazine.com/2012/12/05/client-side-templating/ http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/