javascript - 如何在单页应用程序中提供多语言支持？

Question

我们希望所有静态资源(HTML、CSS、JS)都是静态页面(而不是在服务器上呈现)，但遇到了问题。为了支持多语言，我们必须在代码中嵌入不同语言的上下文。因此，在开发过程中，我们必须在每次文件更改时将源文件编译为许多副本。随着项目变得越来越大，编译可能会很慢，并且项目难以管理。

是否有在单页应用程序中支持多语言的最佳实践？

Answer 1

我认为使用服务器端脚本来响应 HTML/CSS/JS 文件是一个很好的方法。

一个小例子

index.php

<?php
    include_once 'lang.txt.php'; // Language dictionary file
    $lang = isset($_GET['lang']) ? $_GET['lang'] : 'en'; // Default is English
?>
<!-- Include JS/CSS -->
<script src="js/myScript.js.php?lang=<?=$lang?>"/>
<link href="css/style.css.php?lang=<?=$lang?>" rel="stylesheet"/>

<!-- Your HTML -->
<div class="welcome-div">
   <!-- echo text base on $lang variable -->
   You are viewing this page in <?=$getTextByLanguage[$lang]['welcome_message']?>
    <script>
        showMessage();
    </script>
</div>

myScript.js.php

<?php
    include_once 'lang.txt.php';
    $lang = isset($_GET['lang']) ? $_GET['lang'] : 'en';
?>
function showMessage() {
    alert('<?=$getTextByLanguage[$lang]['welcome_message']?>');
}

优点

• 不会影响页面加载速度、请求大小、浏览器缓存文件(保持性能)

缺点

• 需要在服务器端进行更多工作，或者您可能应该构建一个小型框架来完成此任务。

这只是我个人的想法，我认为人们已经为此创建了一些设计模式。