将预加载器移出main.js主干

Question

我正在制作一个主干单页，在网站增长后，主js文件也随之增长。现在它是如此之大，我将很好地将加载器移出main.js文件。有没有关于如何加载一些主干(加载器)然后加载主js文件的最佳实践？

Answer 1

我假设当你的应用程序第一次启动时你正在进行一些API/AJAX调用。如果你的初始负载包括让用户等待，直到你的客户端应用程序接收到这个初始负载，那么在此期间可能最好向他们显示“一些东西”。

希望你的加载器不是你main.js的主要部分。加载器通常是相当低级的、简单化的视图；如果它们甚至是视图的话。我见过一些非常聪明的解决方案，它们只在加载状态下使用CSS，当请求数据时，您所要做的就是将一个“加载”类添加到DOM的某个区域。您编写的规则可能会显示“正在加载...”如果这就是你的意图的话。(这里有一些scss)

.loading.some-div {
  position: relative;
  &:after {
    position: absolute;
    content: 'Loading...';
    right: 0;
    top: 0;
  }
}

我不建议先加载“预加载器”，然后再加载“main.js”。当您对后端进行数据的ajax调用时，您可以尝试“显示”加载器。将应用程序的加载与数据的实际加载联系起来，等等。

我也见过这样的解决方案:在“加载状态”下呈现主干视图，然后在视图接收数据后，它将隐藏/移除加载状态，并显示一个完全呈现的模板。

render: function (data) {

  // the el is displaying 'loading...' until valid data is 
  // passed to the view

  if (!data) { return; }

  // when valid data is received, then the loading state is removed
  this.$el.html(this.template(data));
}

这是一个非常基本的想法，但希望能让你的轮子再次转动起来。如果你想和我谈谈，请告诉我。