loadScript、JavaScriptライブラリをブロックしない


高性能JavaScriptの本を読んでいる時、書き方を見ました.もちろん今はたくさんの在庫があります.そしてgithubを取って回収して、パッケージとして計算します.
住所:https://github.com/marcbuils/jquery.loadscript/blob/master/jquery.loadscript.js
/**
 * PluginAutoLoad: Load your plugins on html DOM without javascript code.
 * http://marcbuils.github.com/jquery.pluginautoload/
 * https://github.com/leiming/jquery.loadscript
 *
 * Par Marc Buils ( [email protected] )
 * Lei Ming ( [email protected] )
 * Sous licence LGPL v3 (http://www.gnu.org/licenses/lgpl-3.0.txt)
 *
 * v0.1.1 - 09/16/2015:
 * First release
 *
 * v0.1.2 - 12/09/2015;
 * Fix lazyLoad bug
 */

$(function () {
  // lazyload script
  // ref: http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
  var _loadScript = function (url, params, callback) {

    var script = document.createElement("script");
    script.type = "text/javascript";

    if (script.readyState) { //IE
      script.onreadystatechange = function () {
        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function () {
        callback();
      };
    }

    var scriptsProperties = [
      'type', 'src', 'htmlFor', 'event', 'charset', 'async', 'defer', 'crossOrigin', 'text', 'onerror'
    ];

    if (typeof params === 'object' && !$.isEmptyObject(params)) {
      for (var key in params) {
        if (params.hasOwnProperty(key) && $.inArray(key, scriptsProperties)) {
          script[key] = params[key];
        }
      }
    }

    document.getElementsByTagName(params['lazyLoad'] ? 'body' : 'head')[0].appendChild(script);
    script.src = url;
  };

  $.loadScript = function (p_url, p_params, p_callback) {

    // Handle p_params is exist
    if (arguments.length === 2 && typeof arguments[1] === 'function') {
      p_callback = arguments[1];
      p_params = {}
    }

    p_params = p_params || {};

    var _return = $.Deferred();

    // Call callback if necessary
    if (typeof( p_callback ) === 'function') {
      _return.done(function () {
        p_callback();
      });
    }

    // Load javascript file
    _loadScript(p_url, p_params, function () {
      _return.resolve();
    });

    return _return.promise();
  };
})
具体的には:https://github.com/marcbuils/jquery.loadscript
scriptタグのプロパティについては、ここでHTMLScriptElementをご覧ください.https://developer.mozilla.org/zh-CN/docs/Web/API 他の3編:
最初のloadScriptは見てもいいです. https://github.com/zynga/loadScript/blob/master/loadScript.js
二つ目はヤフーのLazyLoadです.https://github.com/rgrove/lazyload/blob/master/lazyload.js
LazyLoadはより強力なloadScript()関数です.LazyLoad精縮後は約1.5 KBしかありません.gzipで圧縮したのではありません.使い方の例は以下の通りです.
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
    LazyLoad.js("the-rest.js", function () {
        Application.init();
    });
</script>
// Load a single JavaScript file and execute a callback when it finishes.
LazyLoad.js('http://example.com/foo.js', function () {
  alert('foo.js has been loaded');
});

// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
  alert('all files have been loaded');
});

// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
  alert(arg);
}, 'foo.css has been loaded');

// Load a CSS file and execute the callback in a different scope.
LazyLoad.css('foo.css', function () {
  alert(this.foo); // displays 'bar'
}, null, {foo: 'bar'});
第三のブロック以外のJavaScriptライブラリのローディングは
LABjs:https://github.com/getify/LABjsこのライブラリは、ロードプロセスをより細かく制御し、可能な限り多くのコードを並列にダウンロードしてみます.具体的に見てもいいです
その公式サイト(http://labjs.com/documentation.php)またはgithub.