Javascript Web 应用最佳实践

Question

我很难简洁明了地写下我的问题，所以让我描述一下我正在处理的问题。

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

• 有自己的 API 托管在子域 (https://api.example.com)
• 在顶级域名 (https://www.example.com)
上托管了主要应用程序
• 顶级域名没有任何数据库访问权限，而是与 API 交互以处理数据
• tld 通过 OAuth 使用 api 进行身份验证，并将访问 token 和访问 token secret 存储在 session 中
  • 当 session 结束时，不再使用访问 token ，从而将用户注销

我在 tld 中有一个路由(对于这个问题我们称它为 /ajax)javascript 调用(GET, PUT, POST，或 DELETE) 向 api 发出请求。这样，任何人都不必看到访问 token 、访问 token secret 、消费者 key 或消费者 secret 。

在我看来，访问 token 和访问 token secret 实际上是我需要在 session 中存储的唯一内容，因为我可以使用 API 获取其他所有内容，而不是每次都为每个片段进行调用我需要的数据，我认为应该保留一些东西，比如用户个人资料、布局偏好等方面。

完成此任务的最佳方法是什么？本地存储？ cookies ？我应该废弃它并将其存储在 session 中吗？

如果您有时间，还有哪些其他我可能不知道的构建此类网站的最佳实践？

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字段。这对于保持经常使用的数据在 session 之间快速可用非常方便。使用现成的 JSON 解析工具将数据从 JSON 转换为 LocalStorage“文本”并返回。

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

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