如何从缓存 return 模板或 ajax 加载？

Question

在我的代码中，我尝试从缓存中加载模板。如果模板不存在于缓存中 - 通过 ajax 从服务器加载模板。加载完成后，我想将模板放入缓存并 return 它。在这里：

var manager = function () {

    return {

        cache: [],
        getTemplate: function (templateId) {

            this.templateId = templateId;

            if (this.cache[this.templateId]) {
                return this.cache[this.templateId];
            }

            return this.loadTemplate();
        },

        loadTemplate: function() {

            var
            self = this;

            $.get('/assets/templates/' + this.templateId + '.html', function (templateHtml) {

                self.cache[self.templateId] = templateHtml;
                return self.getTemplate(self.templateId);
            });
        }
    }
}

var
manager = manager();

$('body').append( manager.getTemplate('template') );

我知道我的代码不起作用，因为 ajax 请求在函数 loadTemplate 结束后完成。我认为代码可以用延迟对象修复，但不知道如何。谁能帮我找到解决办法？

Answer 1

当您通过 AJAX 获取模板时，您将只能在 AJAX 成功时附加结果。因此，您需要将追加逻辑作为 callback.Check 下面的代码传递。

var manager = function () {

    return {

        cache: [],
        getTemplate: function (templateId,callback) {

            this.templateId = templateId;

            if (this.cache[this.templateId]) {
                callback(this.cache[this.templateId]);
            }

            this.loadTemplate(callback);
        },

        loadTemplate: function(callback) {

            var
            self = this;

            $.get('/assets/templates/' + this.templateId + '.html', function (templateHtml) {

                self.cache[self.templateId] = templateHtml;
                callback(templateHtml)
            });
        }
    }
}

var
manager = manager();

manager.getTemplate('template',function(result) {

$('body').append( result );
});

您可能不需要 2 个函数来执行此操作。所以你可以把它做成一个

Answer 2

有两种方法可以实现您的目标：

Promises（有很多libs/shims）。为了学习，我将把它重写为 ES6：

let manager = function () {

    return {

        cache: [],

        getTemplate(id) {
            let cache = this.cache;

            return new Promise((resolve, reject) => {
                if (cache[id]) {
                    resolve(cache[id]);
                } else {
                    this.loadTemplate(id)
                        .then(template => {
                            cache[id] = template;
                            resolve(template);
                        })
                        .fail(reject);
                }
            });
        },

        loadTemplate(id) {
            return $.get('/assets/templates/' + id + '.html');
        }
    }
};

let manager = manager();

manager.getTemplate('template').then((template) => {
    $('body').append(template);
});

回调：

let manager = function () {

    return {

        cache: [],

        getTemplate(id, cb) {
            let cache = this.cache;

            if (cache[id]) {
                cb(cache[id]);
            } else {
                this.loadTemplate(id)
                    .then(template => {
                        cache[id] = template;
                        cb(template);
                    });
            }
        },

        loadTemplate(id) {
            return $.get('/assets/templates/' + id + '.html');
        }
    }
};

let manager = manager();

manager.getTemplate('template', (template) => {
    $('body').append(template);
});

Answer 3

以下是您的操作方式，支持所有主流浏览器，并缓存请求。这样您将只为每个模板执行 1 个请求。（其他答案仅缓存响应）。

var Manager = function() {

   return {

      cache: [],

      getTemplate(id) {
         var that = this;

         if (that.cache[id] && that.cache[id].then){
            console.log("Promise cache");
            return that.cache[id]; //return promise from cache
         }

         return $.Deferred(function() {
            var def = this;
            
            if (that.cache[id]) {
               console.log("Retrieved from cache!");
               return def.resolve(that.cache[id]); //return cached template
            }

            that.cache[id] = def; //Cache promise
            
            console.log("Retrieving template...");
            that.loadTemplate(id).then(function(template) {
               that.cache[id] = template;
               def.resolve(template)
            }).fail(function() {
               def.reject();
            });

            return that.cache[id]; //return promise
            
         }).promise();

      },

      loadTemplate(id) {
         return $.get('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
      }
   }
};

var manager = Manager();

manager.getTemplate('template').then(function(template){
   console.log("loaded 1");
});

//This will use the promise from the first call (1 Request only)
manager.getTemplate('template').then(function(template){
    console.log("loaded 2");
    manager.getTemplate('template').then(function(template){
       console.log("loaded 3"); //This will be retrieved fully from cache
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如何从缓存 return 模板或 ajax 加载？

How to return templates from cache or ajax load?

javascript

ajax

jquery

deferred