javascript - 如何避免由于 Ext Direct 和动态语言环境加载而导致的嵌套异步回调？

Question

我正在使用 Ext JS 4.1 创建 CRM 类型的应用程序。为了连接到服务器端，我通过 RemotingProvider 使用 Ext Direct。

在应用程序启动和渲染之前，我想通过Ext Direct从服务器检索一些全局变量，主要是当前登录用户的配置语言及其配置的权限。然后，根据用户的语言(根据该结果)，我需要加载 Ext JS 区域设置文件和我自己的自定义区域设置文件。 (请注意，这些必须在创建任何组件之前加载，因为之后不会应用它们。)

所以，程序是:

1. 通过Ext.php.Globals.getGlobals获取全局变量
2. 通过Ext.loader.loadScript获取Ext语言环境，
3. 通过Ext.loader.loadScript获取应用程序区域设置
4. 设置视口(viewport)

自 1.-3.是异步的，除了嵌套回调之外我没有其他方法:

Ext.application({
  name: 'MyApp',

  launch: function() {
    var app = this;

    // Welcome to callback hell...
    Ext.php.Globals.getGlobals(function(data) {
      // insert globals into app namespace
      Ext.apply(MyApp, data);

      // load ext locale
      Ext.Loader.loadScript({
        url: 'ext/locale/ext-lang-'+MyApp.currentUser.culture.toLowerCase()+'.js',
        onLoad: function() {
          // load app locale
          Ext.namespace('MyApp.locale');
          Ext.Loader.loadScript({
            url: 'app/locale/'+MyApp.currentUser.culture.toUpperCase()+'.js',
            onLoad: function() {

              // FINALLY, set up viewport
              var viewport = Ext.create('MyApp.view.Viewport', {
                controller: app
              });

              if (MyApp.util.hasPermission('usermgmt'))
                app.getController('Locations');

              // and so on ...

            }
          });
        }
      });
    });
  }
}); // end application

还有其他更优雅的方式来编写这段代码吗？我知道有一些用于异步流的库，但是这些库可以与 Ext JS API 一起使用吗？或者我可以以某种方式强制 Ext.syncRequire 为我加载语言环境(这样我只有一层嵌套用于 getGlobals 调用)？我自己的语言环境定义了一个类，但 Ext 语言环境没有。另外，这会以某种方式搞乱使用 Sencha Cmd 编译源文件吗？

Answer 1

你的概念有点奇怪，所以我给你一些建议。我在许多项目中直接使用，大多数项目都需要本地化和相当复杂的 AC 管理。

• 您的应用在启动之前不需要解析或加载某些内容。
• 应在加载主应用程序 View 时提供语言和本地化
• 您的前端永远不应该解决任何访问控制问题。您可以(在大多数情况下)使用直接 API 完美实现这一点
  • 将 API 减少到用户有权访问的这些操作(当应用程序主视图准备好时也会发生这种情况)

这会让您的应用运行得更快，让您的生活更轻松。

更新

当用户登录或只是请求主视图时，您应该拥有大量信息，例如支持的浏览器语言或至少当用户选择一种语言时。有了这些知识，您只需要准备 View 即可。

前端内的 acl 不安全，需要在服务器端重新检查，因此应该避免或简单。使用 direct 的最简单方法是提供一个与用户访问权限相匹配的 API，并在前端进行检查。这是一种隐式访问控制。如何实现取决于UI，但是有很多方法

更新2

为什么不为每种语言提供一个版本？我看不出有任何理由反对它。或者将框架从您的应用程序和类中分离出来，这样您就可以在客户端仍然可以使用缓存的框架库的同时进行更新。

可以轻松检查 API 的 Controller (后端)访问和方法(后端)访问。其中 Controller 可能是您的选项卡，操作可能是您的菜单元素。由于 API 是全局可用的，因此您只需要检查对象或属性是否存在。假设我们有一个名为 Car 的后端 Controller 和名为 Drive 的方法，我们可以像这样检查

if (Car) {
    // has controller access
    if (Car.Dirve) {
        // has access to the 'drive' action
    }
}