按需加載JavaScript

Question

我正在使用 jQuery 和 jQuery 手機。

我認為這兩個庫都是通過 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 文件，如果您正在下載其他人的庫/代碼，他們通常會提供一個縮小版本，因此您不會看到再次嘗試壓縮它沒有節省。 如果您想“修剪”以排除您不使用的庫部分，您可能需要首先重新考慮使用庫，而不僅僅是為您需要的部分創建自己的解決方案......但是您您可能會驚訝於您嘗試排除的部分有多么有用。

Answer 3

<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>

Answer 4

您可以使用getScript()按需加載其他腳本 您是否使用縮小的jquery和jquery moblie文件？