Question

我有一个场景，我想在一个页面上加载大约50个不同的Mustache / Handlebar模板。我通常加载它们的方式如下：

function App(){

    this.templates = {
         template_one : {
               url : "path/to/template",
               template : ""
          },
          template_two : {
               url : "path/to/template",
               template : ""
          }
     }
}

App.prototype.getTemplates = function(){

      const keys = Object.keys(this.templates);

      return new Promise((resolve, reject) => {
           //Loop through each template and request it asynchronously
           keys.forEach((key, i) => {
               $.get(this.templates[key]['url'], template => {
                    this.templates[key]['template'] = template;
               }, "html").done(() => {
                    //When the last template has been retrieved, resolve the promise
                    if(i === keys.length - 1){
                         resolve();
                    }
               });
           });                
      });
}

这种方法运行得很好，但是，每次我的页面加载时都会执行50个单独的异步请求，这似乎是对网络资源的可怕浪费，而且很可能很慢。

是否有办法更有效地使用我的前端部分？

修改

正如评论中所指出的，服务器端解决方案可能是实现此目的的正确方法。我目前正在使用php后端，但是对使用gulp / grunt / node / etc的任何进程都是开放的。

我仍然不确定该过程，因为把手文档提到在<script></script>标签内加载单个文件并通过脚本标记的ID引用它们。

如何处理Handlebars / Moustache的服务器端构建步骤？

有效加载大量Handlebar模板的好方法是什么？

0 个答案: