Question

我正在开发一个新网站，并决定第一次使用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真正加载的最佳实践。

非常感谢任何帮助，提示或指示。

Answer 1

尝试

＆＃13;

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]);
});

＆＃13;

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

＆＃13;

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

1 个答案: