按需加载 JavaScript

Question

我正在使用 jQuery 和 jQuery mobile。

我认为这两个库都是通过 ATT 的互联网下载到我的 iPhone 上的，速度很慢。

所以我想知道是否有一些框架来处理它并将文件修剪到我在页面中使用的功能所需的大小？

CSS 文件也有一些东西，它也可以很胖吗？

谢谢

Answer 1

将其插入您的 JavaScript 中：

var LoadedScripts = new Array();

jQuery.getScript = function(url, callback, cache){
  if ($.inArray(url, LoadedScripts) > -1) {
    callback();
  }
  else {
     LoadedScripts.push(url);       
     jQuery.ajax({
      type: "GET",
      url: url,
      success: callback,
      dataType: "script",
      cache: cache
    });
  }
};

如何使用它：

function YourFunction() {
   jQuery.getScript('path/to/your/script.js',function(){  
     // your code here - the script has loaded
   },true);
}

更改“true”以关闭缓存并强制重新加载文件（对 CSS 有用）

function YourFunction() {
   jQuery.getScript('path/to/your/script.js',function(){  
     // your code here - the script has loaded
   },false);
} 

Answer 2

如果您正在下载其他人的库，YUI Compressor 可用于压缩 JS 和 CSS 文件/code，他们通常会提供缩小版本，因此您不会发现再次尝试缩小版本可以节省任何费用。如果您想“修剪它”以排除您不使用的库的部分，您可能需要首先重新考虑使用库，而不仅仅是为您需要的部分创建您自己的解决方案......但是您您可能会惊讶于您试图排除的部分的有用性。

Answer 3

您可以使用 getScript() 按需加载其他脚本"http://code.jquery.com/jquery-1.5.min.js" rel="nofollow">缩小 jquery 和 jquery moblie 文件？

Answer 4

<pre><code>
  function require (src, callback) {
    if (!(src != null && (typeof src == 'string' || typeof src == 'object'))) return;
    var src = typeof src == 'string' ? [src] : src;
    var total = [];
    var loaded = [];
    var failed = [];
    var fn = function (e) {
      if (e.type == 'load') loaded.push(e.target.src);
      else failed.push(e.target.src);
      if ((loaded.length + failed.length) == total.length && typeof callback == 'function') callback(!!failed.length, loaded, failed);
    };
    var load = function (src) {
      var s = document.createElement('script');
      s.type = 'application/javascript';
      s.src = src;
      s.addEventListener('error', fn, false);
      s.addEventListener('load', fn, false);
      document.getElementsByTagName('head')[0].appendChild(s);
      return s.src;
    };
    for (var i in src) {
      var s = src[i].split(/[\s,]+/);
      for (var j in s) if (total.indexOf(s[j]) < 0) total.push(load(s[j]));
    }
  }

// Usage example:
require ('script1.js, script2.js, ...', function (hasError, loaded, failed) {
  console.log(arguments);
});

</code></pre>