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加載後運行自定義代碼

回答

相關問題