4

这是我打算构建的：有一个服务提供数据，只有RESTful的JSONAPI。服务器设置是Python+ Flask。有几个客户端在使用此 API，例如普通的 Web 应用程序、移动兼容客户端和 Facebook 应用程序。

现在，我的假设/决定：

  • 我决定服务器只通过 提供数据JSON，从而将演示文稿完全交给客户端。
  • 我希望使 Web 应用程序与移动设备兼容，从而无需单独的移动客户端。
  • 此外，对于 Facebook 应用程序，我决定使用 Facebook Canvas，它可以渲染普通 Web 应用程序的部分内容，从而重用代码。如果上述假设有任何问题，请随时纠正我。虽然上述在理论上是可能的，但我想知道实际实现是否可行。

现在，Web 应用程序在从服务器获取基本页面/模板后，必须在通过JSONAPI 获取数据后动态处理渲染。数据很简单：多选项问题，回答哪个用户收到另一个问题。最后，用户可以分享结果或邀请其他用户。

有了这个设置，我需要一个类似的框架angularjs还是jQuery足够了？

我主要关心的是如何处理国际化？我最初打算让用户Flask-Babel国际化 HTML 模板。但是，在只关注 JSON API 之后，我不知道我现在如何/在哪里处理它：在客户端还是服务器端？我使用什么工具？

我能想到的一种方法是在服务器本身上有不同语言的数据，并根据客户端在请求中发送的某些属性，以适当的语言发送带有数据的 JSON 响应。

另一种方法是让客户端对服务器发送的公共数据集进行所有翻译。不过，我不确定这种方法。

4

7 回答 7

1

你会发现这个插件真的很有帮助。

就用法而言，为由API提供支持的单页应用程序设置它非常简单。JSON

如果我们看一下示例用法：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="[PATH]/jquery.js" /> // optional
    <script type="text/javascript" src="[PATH]/i18next.js" />
  </head>
  <body>
    <ul class="nav">
      <li><a href="#" data-i18n="nav.home"></a></li>
      <li><a href="#" data-i18n="nav.page1"></a></li>
      <li><a href="#" data-i18n="nav.page2"></a></li>
    </ul>
  </body>

Json（加载的资源）：

{
  "app": {
    "name": "i18next"
  },
  "nav": {
    "home": "Home",
    "page1": "Page One",
    "page2": "Page Two"
  }
}

JS：

i18n.init(function(t) {
  // translate nav
  $(".nav").i18n();

  // programatical access
  var appName = t("app.name");
});
于 2014-04-12T10:00:48.960 回答
0

通过 js & json 实现 i18n 的步骤：

  • 为 i18n 标签定义 css 类，例如<span class="i18n" id="i18n_username"></span>
  • 在不同的 .properties 文件中定义不同语言的 i18n 值，例如在 userhome_en_US.properties 中，有一个键值：username = Username
  • 编写后端API按语言加载.properties文件，并以json键值格式返回，例如发送param: lang=en_US, page=userhometo I18nAction -> loadI18n()，然后通过ajax: 返回json值{"username":"Username"}，
  • 编写 js 函数以通过 lang 和 page 参数加载 i18n 键值，
  • 更新网页上的 i18n 文本，通过 css 类获取标签，并替换内容，例如使用 jquery 获取所有具有的 span 标签class="i18n"，然后删除i18n_id 的前缀，然后将其用作键以从返回的 json 中获取值，然后替换span的内容，

我确实写过这样的实用程序，它非常灵活且易于使用。基本概念来自struts2 框架的i18n 特性。

于 2014-04-16T09:52:12.560 回答
0

虽然我不详细了解您的技术限制，但我相信这完全取决于您的数据量：

  • 如果您的“问题/答案”很少随着时间的推移可能不会发生太大变化，您可以将 I18N 视为常量。把一切都放在客户端是有道理的。

  • 如果您有大量可能会演变的“问题/答案”，我相信您必须将 I18N 视为数据。

由于您已经创建了 JSON API，因此您的 Q/A 很可能是您的数据，并且它已经属于您的服务器端。

真正的问题是：您是否想在每次添加或更正问题时交付新版本的客户端应用程序？

这就是为什么我会这样做：

我能想到的一种方法是在服务器本身上有不同语言的数据，并根据客户端在请求中发送的某些属性，以适当的语言发送带有数据的 JSON 响应。

编辑（精度）：我说的是问题和答案。对于应用程序消息（菜单、文本、帮助消息等），您应该使用客户端框架的 i18n 组件。其他答案提供了很多很好的工具。

于 2014-04-15T12:18:30.443 回答
0

使用 jQuery、Angular 等是您应该根据您对技术的舒适度、应用程序的需求以及与 Facebook Canvas 方法的兼容性做出的决定。Angular 具有强大的数据绑定功能，但与 jQuery 相比，它需要转变思维方式，因此我建议您仔细研究一下它们是否满足您的需求。

至于国际化，您可以使用 jQuery.i18n 之类的插件，或者您可以使用自己的插件，我使用 jQuery 和 jQuery.Mustache 进行模板化。简短的版本是您使用 HTML 模板来存储您的布局，然后从 jQuery 内部呈现它们，如下所示：

var data = {myLabel: 'Some label', myOtherLabel: 'Some Other Label'};

$("#myDiv")
    .html( $.Mustache.render( "MyTemplateId", data ) );

在 html 模板中：

<script type="text/html" id="MyTemplateId">
    <div>
        <label for="myInput">{{MyLabel}}</label> <input name="myInput" id="myInput type="text"/>
    <label for="myOtherInput">{{MyOtherLabel}}</label> <input name="myOtherInput" id="myOtherInput type="text"/>

    </div>

并在您的页面布局上：

<div id="myDiv>
    <!-- dynamic content inserted here -->
</div>

您使用带有 jQ​​uery.Mustache ( https://github.com/jonnyreeves/jquery-Mustache ) 的加载器命令从服务器加载模板，并且由于您使用的是模板，因此您可以根据用户语言选择填写您的值. 您如何存储国际化数据取决于您的应用程序。正如迈克尔建议的那样，如果它是少量的静态内容，也许您只需将它们作为常量存储在您的 JS 文件中，并根据需要加载到您的 Mustache 的 render() 方法中。如果您有大量/动态的多语言内容，您可能应该将其存储在服务器上并动态加载。一个考虑因素是您计划支持的语言数量。如果您超出了几种语言，请考虑将其存储在服务器上并按需加载语言数据。

我喜欢这种方法，因为它可以让您对布局和国际化进行精细的运行时控制。它还将数据存储在服务器上，但以编程方式从客户端加载，从而为您的应用程序层保持清晰的关注点分离。

至于响应式/移动友好设计，使用模板（Mustache）并在加载时检查视口允许您确定浏览器功能并提供适当的布局，而无需提示用户选择移动/桌面体验。

如果你走这条路，你还应该研究像 RequireJS 和 StealJS 这样的脚本加载器来处理脚本的依赖加载，并处理初始浏览器检查和布局生成。

于 2014-04-15T20:51:13.050 回答
0

你的问题太笼统了。我只能回答一部分，下面是一些答案：

I desire to make the web app mobile compatible, thus eliminating need of a separate mobile client.

为了确保一切正常，您需要处理

Also, for Facebook app, I decided to use Facebook Canvas, which would render parts of the normal web app, thus reusing the code.

我不知道。

    With this setup, do I need a framework like angularjs or jQuery would suffice?

正如您标记的那样，您将其定位为单页应用程序。因此，我建议您使用 Anglarjs、knockout.js 或 Node.js 等单页框架。可以从这里找到这些框架之间的快速和良好的比较

这篇文章还分享了如何在 Angularjs 中实现国际化 

   My main concern here is how do I handle internationalization?

其中一些框架为本地处理国际化和本地化提供了支持。对于其他人，您可以找到一些有助于您实现国际化的链接。

而如果您使用 jQuery，您将定义自己的框架来处理单页应用程序，除此之外，您将需要大量的附加组件来实现您的目标。

希望这可以帮助！！！

于 2014-04-15T20:19:07.760 回答
0

如果您的所有界面代码都位于客户端，那么您的 i18n 也应如此。您将使用与您正在使用的 JavaScript 框架一起使用的 i18n 库。对于 angular，这可能是angular-gettext。

如果您正在开发多个客户端，您可能会在不同的客户端应用程序中使用不同的 i18n 库。尝试确保他们都编译gettext .po 文件——这将使您的翻译人员更容易。

于 2014-04-12T13:52:43.973 回答
0

https://github.com/wikimedia/jquery.i18n可能很接近。它可以处理很多语言，消息在 json 文件中，它是完整的客户端库。

于 2014-04-03T11:07:02.470 回答