javascript - 使用 Durandal 的单个网页应用程序的全局变量

Question

我的应用程序包含三项“全局”内容:具有纬度和经度值的用户位置(用户是否登录)以及他们选择的事件(将其视为类别)。

我希望在整个应用程序中使用这些值。每个屏幕都将使用该日期的一些集合，因此每页加载它不是正确的答案。除非用户创建事件:不同的位置、事件或登录/退出，否则信息也不会更改。

我该如何设置？

我的想法是启动时应该有一个初始加载，在我的 main.js 文件中我加载每个然后 app.start 像这样:

siteService.js

define([...], function (...) {
    return {
        init: function () {
            return $.when(
                activityService.getStoredActivity(),
                locationService.getStoredLocation(),
                userService.getUsername()
            );
        }
    }
});

ma​​in.js

define([..., 'modules/siteService'], 函数 (..., 站点) { ...

site.init().then(function () {
    app.start().then(function () {
        ...
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

});

这确实确保数据已加载。在我的每项服务中，我将信息存储到本地存储中，这样我就不必继续触发 AJAX 调用。如果本地存储不存在，它将存在。

当我在其他页面中需要这些数据时，问题就来了。我最终在每个页面的激活方法中调用我的 site.init().then() 。这很草率。

shell.js

self.activate = function () {
            ...
    siteService.init().then(function (activity, location, username) {
        self.activity(activity);
        self.location(location);
        setUsername(username);
    });
    return router.activate();
};

然后又在:

welcome.js

this.activate = function () {    
     site.init().then(function(activity, location) {
           loc = location;
           act = activity;
           load();
       });
});

我想最初设置值，每个页面最初从这些值加载，然后使用 Durandal 的 pub/sub 对事后的任何更改使用react。

我曾考虑单独使用 pub/sub，但后来觉得当加载与页面加载相关的数据时，我会遇到先有鸡还是先有蛋的问题(IE 如果我的 AJAX 先加载，而我的页面是'加载，事件触发，但页面永远不会得到更新)。

是否可以在 javascript 中设置类似静态类的东西来最初提取数据，然后在整个 View 模型中共享它？或者，有没有办法保证在我最初加载页面时该值会存在，例如 app.on('value', { initialize: true })？

Answer 1

当 require.js 模块返回一个对象时，该对象是一个单例，所以你可以有类似的东西

settings.js

define(function() {
  return {
    location: {
      lat: 0,
      long: 0
    },
    loggedin: false,
    activity: ""
  }
});

然后，任何时候您将 settings 命名为依赖项，您将始终获得对同一对象的引用，并且您可以根据需要获取/设置其字段。