Javascript Web App最佳实践

Question

我很难清楚地写出我的问题,所以让我描述一下我在做什么.

我正在构建一个Web应用程序:

• 它拥有托管在子域上的自己的API (https://api.example.com)
• 有一个托管在tld上的主应用程序 (https://www.example.com)
• tld没有任何数据库访问权限,而是与API交互以处理数据
• tld通过OAuth通过api进行身份验证,并在会话中存储访问令牌和访问令牌机密
  • 当会话结束时,不再使用访问令牌,从而将用户注销

我在TLD的路线(我们称之为/ajax对这个问题)的调用JavaScript( ,,GET ,OR )提出要求的API.这样,没有人必须看到访问令牌,访问令牌秘密,消费者密钥或消费者秘密.PUTPOSTDELETE

我看到它的方式,访问令牌和访问令牌秘密实际上是我需要存储在会话中的唯一东西,因为我可以使用API​​获取其他所有内容,但不是每次都为每一条数据拨打电话我需要,我认为有些事情应该坚持下去,比如用户的个人资料,布局偏好等方面.

完成此任务的最佳方式是什么？本地存储？饼干？我应该废弃它并将其存储在会话中吗？

如果你有一些时间,还有什么其他最好的做法可以建立我可能不知道的这样的网站？

Answer 1

我想说，你走在正确的轨道上，但主要将数据存储在 JavaScript 中。并在合适的时候将其与本地存储结合起来。

当我构建您所描述的应用程序时，我通常会注意设置通过 API 接收的数据的 JavaScript 表示形式。

一种这样的表示如下所示。请记住，我下面的示例代码做出了一些假设。

1. 它假设您api定义了一个对象来处理 API 调用，并在完成时调用回调。
2. API 返回的数据是 JSON，可以简单地分配给 JavaScript 变量，
3. 返回的 JSON 是一个对象列表，每个对象都有一个“id”字段。
4. 如果您有某种事件对象，我通常会构建自己的自定义事件，这些事件基本上携带function对象作为侦听器，并且在触发时通过侦听器并根据情况调用带或不带有效负载的函数。

数据容器示例：

MYAPP.data.BaseContainer = function (api_url, loadedEvent) {
    var self = {

        // Array to store the data returned via the APIs 
        _data : [],

        // The API URL used to fetch data
        api_url : api_url,

        // Boolean flag to signify whether the _data variable has been populated
        is_loaded : false,

        // The even to fire once _data has been populated
        loadedEvent : loadedEvent,

        /**
         * Returns the state of the is_loaded variable
         */
        loaded : function () {
            return self.is_loaded;
        },

        /**
         * Takes an ID and returns any member of the _data array
         * that has that ID.
         * 
         * @param id : an String or integer representing the ID.
         * @returns {Object}
         */
        byId : function (id) {
            var toReturn = null;
            for (var i = 0, len = self._data.length; i < len; i++) {
                if (self._data[i].id == id) {
                    toReturn = self._data[i];
                    break;
                }
            }

            return toReturn; 
        },

        /**
         * Returns the entire _data array.
         */
        all : function () {
            return self._data;
        },

        /**
         * This simple callback just stores the json response in 
         * its entirety on the _data variable.
         */
        callback : function(data) {
            self._data = data;
            self.is_loaded = true;
            loadedEvent.fire(self._data);
        },

        /**
         * Calls the API, if no callback has been specified as a parameter
         * self.callback is used.
         */
        getFromAPI : function(callback) {
            if (typeof callback === 'undefined') {
                callback = self.callback;
            }

            api.get(self.api_url, callback);
        }
    };

    self.getFromAPI();

    return self;
};

有了这个蓝图，我现在可以创建特定的数据容器，如下所示：

/**
 * Stores a list of "friends" gotten from the API.
 * This is basically an instance of the BaseContainer object defined above.
 */
MYAPP.data.Friends = (function () {
    var self = MYAPP.data.BaseContainer("API_URL_TO_FECTH_FRIENDS_LIST", FriendsLoadedEvent);

    return {
        byId : self.byId,
        all : self.all,
        loaded : self.loaded
    };
}());

一旦运行此代码，就会进行 API 调用，并且FriendsLoadedEvent在完成后将被触发。所以，说白了，我通常使用 JavaScript 来存储我的东西。但如果您想将 LocalStorage 加入其中，那也很容易！

只需将本地存储代码添加到 BaseContainer 对象中，该对象首先检测客户端是否真正支持本地存储，如果支持，则镜像本地存储中的 _data 字段。这对于保持会话之间的常用数据快速可用非常方便。使用现成的 JSON 解析工具将数据从 JSON 转换为 LocalStorage“文本”并返回。

请记住，您不能依赖 LocalStorage 作为主要数据结构，您无法保证客户端支持它，即使它支持，实际可以存储的数据量上限在浏览器之间也是不同的。因此，使用它来存储以下数据：

• 您希望经常访问，
• 你觉得应该在用户登录后立即出现，
• 而且这种变化的频率不足以保证不断刷新 API 调用。