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

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

我现在有一个被加载作为最后一个项目我的网页在以下方面：

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。

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

来源

2014-09-30 jezzipin

尝试'的console.log（Modernizr.hasOwnProperty（ “负载”））'。请参阅https://github.com/SlexAxton/yepnope.js#deprecation-notice _“由于这些原因，我们也不会在Modernizr的Modernizr.load下一个版本中包含yepnope。”_ – guest271314 2014-09-30 17:23:52

尝试

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>

来源

2014-09-30 18:27:53 guest271314

谢谢，但是这个对于这样一个简单的任务来说，例子似乎有些复杂。我决定完全放弃cdn加载并在本地加载所有内容。这是非常简单的，并没有真正使我迄今为止运行的测试有任何明显的不同。 – jezzipin 2014-10-01 09:02:14

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

回答

相关问题