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

Question

我正在制作一个主干单页面，并且在网站扩展后，主 js 文件也随之扩展。现在它太大了，我很乐意将加载器移出 main.js 文件。是否有关于如何加载一些主干(加载器)然后加载主 js 文件的最佳实践？

Answer 1

我假设您的应用程序首次启动时正在进行一些 API/AJAX 调用。如果您的初始负载包括让用户等待，直到您的客户端应用程序收到此初始负载，那么最好同时向他们展示“某些内容”。

希望您的加载程序不是 main.js 的主要部分。加载器通常是相当低级、简单化的 View ；如果它们根本就是观点的话。我见过一些非常聪明的解决方案，它们仅使用 CSS 来加载状态，其中您所做的就是在发出数据请求时将“加载”类添加到 DOM 区域。如果这是意图的话，您编写的规则可以显示“正在加载...”一词以及微调器...(这里有一些 scss)

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

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

我还看到过在“加载状态”下渲染主干 View 的解决方案，然后在 View 接收数据后，它将隐藏/删除加载状态并显示完全渲染的模板。

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));
}

这是一个非常基本的想法，但希望它能让你的车轮再次旋转。如果您想谈谈，请告诉我。