將預加載器移出main.js主干

Question

我正在制作一個主干單頁，並且在站點增長之后，主要的js文件也是如此。 現在它是如此之大，我很樂意將加載程序移出main.js文件。 有關於如何加載一些主干（加載程序）然后加載主js文件的最佳實踐嗎？

Answer 1

我假設您在應用程序首次啟動時正在進行一些API / AJAX調用。 如果您的初始負載包括讓用戶等到客戶端應用程序接收到此初始負載，那么最好同時顯示它們。

希望您的加載器不是main.js的主要部分。 加載程序通常是相當低級的，簡單的視圖。 如果他們甚至是所有觀點。 我已經看到了一些非常聰明的解決方案，它們僅使用CSS來加載狀態，而您要做的就是在發出數據請求時向DOM區域添加一個“加載”類。 如果這是您的意圖，則您編寫的規則可能會顯示單詞“ loading ...”以及微調框（這是一些scss）

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

我不建議先加載“ pre-loader”，然后再加載“ 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));
}

這是一個超級基本的想法，但希望可以使您的車輪再次旋轉。 讓我知道您是否想說出來。