10 09/2014

script loaders

最后更新: Wed Sep 10 2014 12:37:50 GMT+0800

常见 5 个

headjs

曾经最流行。但似乎最后的更新在 大约2012年11月(废弃?)。

head.js("jquery.js", "app.js", "twitter.js", function() {
    //called when all scripts have been loaded
});

requirejs

<script data-main="scripts/app" src="require.js"></script>

yepnope

更适合用来 polyfill。检测并加载相应的 js

yepnope({
  test: $("html").hasClass("ie"),
  yep: "ie-fixes.js",
  nope: "non-ie.js"
});
yepnope({
  load: ['path/to/jquery.js', 'app.js'],
  complete: function() {
    $(function() {
      yepnope({
        test: $("html").hasClass("ie"),
        yep: "ie-fixes.js",
        nope: "non-ie.js",
      });
    });
  });
});

LABjs

据说效率高。

$LAB.script("path/to/jquery.js").wait()
    .script("path/to/plugin.js")
    .wait(function() {
      //code to run once both files are loaded
    });

最小的加载器。注意:是并发加载而不是队列。

LazyLoad.js(["jquery.js", "plugin.js"], function() {
  //multiple files all loaded
});

需要队列的话

LazyLoad.js("jquery.js", function() {
  LazyLoad.js("plugin.js", function() {
    //execute plugin
  });
});

相关

AMD (asynchronous module definition)