javascript – 通过Modernizr加载jQuery后运行自定义代码
作者:互联网
我正在开发一个新网站,并决定第一次使用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真正加载的最佳实践.
任何帮助,提示或指示将不胜感激.
解决方法:
尝试
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>
标签:modernizr,javascript,jquery 来源: https://codeday.me/bug/20190925/1816810.html