Question

我正在尝试实现一个资产/依赖加载器，我在24Ways.org的旧文章中找到了这个加载器。大多数人可能都熟悉它。它来自Christian Heilmann的这篇文章：

http://24ways.org/2007/keeping-javascript-dependencies-at-bay

我已修改脚本以加载CSS文件。它现在非常接近我想要的。但是我仍然需要做一些检查，看看资产是否完全装满了。

只是想知道你们是否有任何想法：）

这是我的脚本目前的样子：

var assetLoader = {
  assets: {
    products: {
      js: 'products.js',
      css: 'products.css',
      loaded: false
    },
    articles: {
      js: 'articles.js',
      css: 'articles.css',
      loaded: false
    },

    [...]

    cycle: {
      js: 'jquery.cycle.min.js',
      loaded: false
    },
    swfobject: {
      js: 'jquery.swfobject.min.js',
      loaded: false
    }
  },
  add: function(asset) {
    var comp = assetLoader.assets[asset];
    var path = '/path/to/assets/';

    if (comp && comp.loaded == false) {
      if (comp.js) {
        // load js
        var js = document.createElement('script');
        js.src = path + 'js/' + comp.js;
        js.type = 'text/javascript';
        js.charset = 'utf-8';
        // append to document
        document.getElementsByTagName('body')[0].appendChild(js);
      }
      if (comp.css) {
        // load css
        var css = document.createElement('link');
        css.rel = 'stylesheet';
        css.href = path + 'css/' + comp.css;
        css.type = 'text/css';
        css.media = 'screen, projection';
        css.charset = 'utf-8';
        // append to document
        document.getElementsByTagName('head')[0].appendChild(css);
      }
    }
  },
  check: function(asset) {
    assetLoader.assets[asset].loaded = true;
  }
}

Christian在他的文章中详细解释了这种方法。我不想再把你们这些糟糕的英语弄糊涂了：P

以下是我运行脚本的示例：

...

// load jquery cycle plugin
if (page=='tvc' || page=='products') {
  if (!assetLoader.assets.cycle.loaded) {
    assetLoader.add('cycle');
  }
}
// load products page assets
if (!assetLoader.assets.products.loaded) {
  assetLoader.add('products');
}

...

但是，这种方法很成问题。 coz资产异步加载，这意味着products.js中依赖于jquery.cycle.js的某些代码可能会在jquery.cycle.js加载之前继续运行，从而导致错误。

虽然我非常清楚脚本可以附加一个onload事件，但我真的不确定如何将它实现到我的脚本中。有人在乎帮我吗？请...：P

Answer 1

对于js文件，您可以使用$.getScript，它提供了一个回调选项，因此您可以链接加载，即：

$.getScript('jquery.cycle.js',function(){ 
    $.getScript('products.js'); 
});

Answer 2

为什么重新发明轮子？ Dojo内置了dojo.require，jQuery有Include插件。

对于CSS，请像往常一样预先缩小并加载它。这可以使事情变得更简单，并且不太可能在负载时间方面过于昂贵。

如何按需加载相关文件+检查它们是否已加载？

2 个答案: