我正在从一本名为“单页 Web 应用程序”的书中学习如何创建单页应用程序。我已经尝试过提供的代码只是为了构建我的第一个简单的 SPA，但是当我启动它时， slider 不起作用，并且在浏览器中使用开发人员工具会显示消息“Uncaught ReferenceError:JQuery 未定义”。为什么会发生错误？以下是书中写的代码。问题出在箭头指向的底部。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SPA Chapter 1 section 1.2.2</title>
<style type="text/css">
body {
width : 100%;
height : 100%;
overflow : hidden;
background-color : #777;
}
#spa {
position : absolute;
top : 8px;
left : 8px;
bottom : 8px;
right : 8px;
border-radius : 8px 8px 0 8px;
background-color : #fff;
}
.spa-slider {
position : absolute;
bottom : 0;
right : 2px;
width : 300px;
height : 16px;
cursor : pointer;
border-radius : 8px 0 0 0;
background-color : #F00;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var $ = jQuery
/*jslint browser : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : true,
white : true
*/
/*global jQuery */
// Module /spa/
// Provides chat slider capability
//
var spa = (function ( $ ) {
// Module scope variables
var
// Set constants
configMap = {
extended_height : 434,
extended_title : 'Click to retract',
retracted_height : 16,
retracted_title : 'Click to extend',
template_html : '<div class ="spa-slider"><\/div>'
},
// Declare all other module scope variables
$chatSlider,
toggleSlider, onClickSlider, initModule;
// DOM method /toggleSlider/
// alternates slider height
//
toggleSlider = function () {
var
slider_height = $chatSlider.height();
// extend slider if fully retracted
if ( slider_height === configMap.retracted_height ) {
$chatSlider
.animate({ height : configMap.extended_height })
.attr( 'title', configMap.extended_title );
return true;
}
// retract slider if fully extended
else if ( slider_height === configMap.extended_height ) {
$chatSlider
.animate({ height : configMap.retracted_height })
.attr( 'title', configMap.retracted_title );
return true;
}
// do not take action if slider is in transition
return false;
};
// Event handler /onClickSlider/
// receives click event and calls toggleSlider
//
onClickSlider = function ( event ) {
toggleSlider();
return false;
};
// Public method /initModule/
// sets initial state and provides feature
//
initModule = function ( $container ) {
// render HTML
$container.html( configMap.template_html );
$chatSlider = $container.find( '.spa-slider' );
// initialize slider height and title
// bind the user click event to the event handler
$chatSlider
.attr( 'title', configMap.retracted_title )
.click( onClickSlider );
return true;
};
return { initModule : initModule }; // <<<<<<<-------
}( JQuery )); // <<<<<<<--------
// Start SPA once DOM is ready
//
jQuery(document).ready(
function () { spa.initModule( jQuery('#spa') ); }
);
</script>
</head>
<body>
<div id="spa">
<div class="spa-slider"></div>
</div>
</body>
</html>
最佳答案
JavaScript 区分大小写。在用箭头标记的第二行，将 JQuery 更改为 jQuery(使用小写的 j):
}( jQuery ));<<<<<<<--------
关于javascript - Uncaught ReferenceError :JQuery is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23725898/