在通过 Modernizr 加载 jQuery 后运行自定义代码答案

【问题标题】：Run custom code after jQuery has been loaded via Modernizr在通过 Modernizr 加载 jQuery 后运行自定义代码
【发布时间】：2014-09-30 15:08:40
【问题描述】：

我正在开发一个新网站，并决定第一次使用 Modernizr。我相当确定它是如何工作的，但是，我正在寻找一些关于加载 jQuery 然后运行 jQuery 代码的最佳实践的建议。

我目前有以下内容作为我页面上的最后一项加载：

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        complete: function(){
            if( !window.jQuery){
                Modernizr.load('/scripts/jquery-1.11.1.min.js');
            }
        }
    },
    {
        load: '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
        complete: function () {
            if ((typeof $().emulateTransitionEnd == 'function') == false) {
                Modernizr.load('/scripts/bootstrap.min.js');
            }
        }
    }
]);

这会尝试从 CDN 检索 jQuery，如果无法这样做，则加载本地版本。然后，它使用我网站上的引导组件所需的 Javascript 重复该过程。

我的问题是我有一些 jQuery 代码直接跟在这个后面：

$(document).ready(function () {
    $('.wishlist-toggle').click(function () {
        var nodeId = $(this).data("node");
        var id = $(this).data("id");
        var type = $(this).data("type");
        var addTo = $(this).data("add");
        var list = $(this).data("list");
        var removeFrom = $(this).data("remove");
        var storedCookie = getCookie("wishlist");
        var jsonString = null;
        var found = false;

...

由于某种原因，尽管在整个 jQuery 加载声明之后，我在控制台中收到一个错误，指定 $ 未定义。这通常表明在调用自定义脚本时，没有加载 jQuery。

我的问题是，这通常是如何完成的，在这种情况下什么被认为是最佳实践，以确保在尝试运行自定义代码之前真正加载 jQuery。

任何帮助、提示或指示将不胜感激。

【问题讨论】：

试试console.log(Modernizr.hasOwnProperty("load"))。请参阅github.com/SlexAxton/yepnope.js#deprecation-notice “出于这些原因，我们也不打算将 yepnope 作为 Modernizr.load 包含在 Modernizr 的下一版本中。”

标签： javascript jquery modernizr

【解决方案1】：

试试

var _jquery = function () {
    $(document).ready(function () {
        // do jquery stuff
        console.log("jQuery loaded");
        $("#jq").html("jquery version " + jQuery().jquery + " ready")
    })
};

var _bootstrap = function () {
    // do bootstrap stuff
    console.log("bootstrap loaded");
    $(".btn").trigger("click")
    .promise().done(function(el) {
      setTimeout(
      function() {
        $(el).trigger("click")
      }, 3000
      )
    });
};

var _load = function (url1, url2, test, callback) {
    var script = document.createElement("script");
    script.src = url1;
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
    setTimeout(function () {
        if (test()) {
            _load(url2, null, function() {return false}, callback)
        } else {
            callback()
        }
    }, 3000)
};

var _scripts = [
    ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
    , "//code.jquery.com/jquery-1.11.1.min.js", function () {
        return !window.jQuery
    },
    _jquery],
    ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
        "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () {
        return (typeof $().emulateTransitionEnd == 'function') == false
    },
    _bootstrap]
];

_scripts.forEach(function (v) {
    _load(v[0], v[1], v[2], v[3]);
});

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
          <div id="jq"></div>
    </div>
  </div>
</div>
  </body>

【讨论】：

谢谢，但是这个例子对于这么简单的任务来说似乎有点太复杂了。我决定完全放弃cdn加载并在本地加载所有内容。它更简单，并且对我迄今为止运行的测试没有任何明显的影响。