找到你要的答案

Q:Move preloader out of main.js backbone

Q:将预载了main.js骨干

I am making an backbone single page and after the site has grown so has the main js file. now its so big that i would be nice to move the loader out of the main.js file. Is there a best practice on how to load some backbone (the loader) then load the main js file?

我是在做一个单页网站骨干后变得如此具有主要的js文件。现在这么大,我就把装载机的main.js文件就好了。有没有一个最佳实践如何加载一些骨干(装载机)然后加载主js文件?

answer1: 回答1:

I assume you're making some API/AJAX call(s) when your app boots up for the first time. If your initial load includes making the user wait until this initial payload is received by your client-side app, then it is probably best to show them 'something' in the meantime.

Hopefully your loader is not a major portion of your main.js. Loaders are usually pretty low level, simplistic views; if they are even views at all. I've seen some pretty clever solutions that use CSS only for loading states where all you do is add a 'loading' class to an area of the DOM when a request for data is made. The rules you write could show the words 'loading...' along with spinner if that's the intent... (here's some scss)

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

I don't advise loading the 'pre-loader' and then the 'main.js'. You might try 'showing' the loader when you make ajax calls to the back-end for data. Tie the loading of your application to the ACTUAL loading of data, etc.

I've also seen solutions that render a backbone view in a 'loading state', and then after the view receives data, it will hide/remove the loading state and display a fully rendered template.

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

This is a super basic idea, but hopefully something to get your wheels spinning again. Let me know if you want to talk it out.

我认为你正在做一些API / Ajax调用(S)当你的应用程序启动的第一时间。如果您的初始负载包括让用户等待,直到这个初始负载是由您的客户端应用程序接收,那么它可能是最好的同时显示他们的“东西”。

希望你的程序是不是你的main.js的主要部分。装载机通常是相当低的水平,简单化的意见,如果他们甚至意见。我见过一些非常聪明的解决方案,使用CSS只加载状态,所有你要做的就是添加一个加载的类的一个区域时,DOM数据请求了。你写的规则可以显示“加载中…”随着旋转如果是意图…(这里的一些说明)

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

我不建议加载预加载器”然后“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));
}

这是一个超基本的想法,但希望能让你的车轮再次旋转。如果你想说出来让我知道。

javascript  backbone.js  main  preloader