嗨,我花了几个小时来搜索这个bug后感到非常沮丧。我的应用程序在一些未知操作后工作正常,整个应用程序都停止了。这是我的代码的一部分。 请帮我找出这个问题。每条评论都表示赞赏。
我的脚本ITEMMENU.js无法在第2行加载,这是在我加载Manager.getInstance()时;错误未捕获的类型错误:undefined不是函数。
这是我的头脑。
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" />
<link rel="stylesheet" href="../jqueryMobile/jquery.mobile-1.4.0.min.css"/>
<link rel="stylesheet" href="photoswipe.css" type="text/css"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="jqueryMobile/json2.js"></script>
<script src="jqueryMobile/jquery-1.11..min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.3.min.js"></script>
<script src="jqueryMobile/jqm.page.params.js"></script>
<script src="jqueryMobile/jstorage.js"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<title>Restaurant Depo</title>
</head>
这是我的主页
<!---------------------------- Main page ----------------------------->
<div data-role="page" id="mainContent">
<div data-role="header">
<h1>Restaurant Depot</h1>
</div>
<h2 style="text-align: center">Promotion Items</h2>
<div data-role="content">
<div>
<ul id="Gallery" class="gallery">
<li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
<li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
<li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
<li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
<li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
</ul>
</div>
<hr>
<ul class="mainCategory">
<li><a href="#menu" data-role="button" data-icon="star" >Menu</a></li>
<li><a href="#review" data-role="button" data-icon="star">Yelp Us</a></li>
<li><a href="#contact" data-role="button" data-icon="star">Contact</a></li>
<li><a href="#rating" data-role="button" data-icon="star">Comments</a></li>
</ul>
</div>
</div>
我的菜单页
<!---------------------------- Menu page ----------------------------->
<div data-role="page" id="menu">
<div data-role="header" >
<a href="#mainContent" data-role="button" data-icon="home">Home</a>
<div class="ui-field-contain" style="text-align: center" >
<select name="select-native-1" id="select-native-1">
<option value="0">Appertizer</option>
<option value="1">Main Course</option>
<option value="2">House Special</option>
<option value="3">Dessert</option>
</select>
</div>
<a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
</div>
<div data-role="content" id="menuContent">
<div>
<ul id="itemList"></ul>
</div>
</div>
</div>
我的剧本
<script type="text/javascript" src="js/api/CacheManager.js"></script>
<script type="text/javascript" src="js/api/Manager.js"></script>
<script type="text/javascript" src="js/vc/itemMenu.js"></script>
这里是ITEMMENU.JS
(function () {
var manager = Manager.getInstance();
var id = 0;
var select = document.getElementById('select-native-1');
if (select.addEventListener) {
select.addEventListener('change', UpdateItems, true);
}
$(document).on('pageshow', '#menu', function (e) {
e.preventDefault();
var items = manager.getItemByCategory(id);
DisplayItem(items);
})
function UpdateItems() {
$('select option:selected').each(function (index, element) {
var id = element.index;
var items = manager.getItemByCategory(id);
DisplayItem(items);
})
}
function DisplayItem(items) {
if (jQuery.isEmptyObject(items)) {
$("<p>No Product in this category</p>").appendTo('#itemList');
} else {
$('#itemList').empty();
for (var i = 0; i < items.length; i++) {
var html = '<li ><a href="#itemDetail?catID=' + items[i].categoryID + '&itemID=' + items[i].id + '"><img src="images/thumb/001.jpg"/><p class="itemInfo">' + items[i].name + '<br>' + items[i].desc + '</p></a></li>';
$('#itemList').append(html);
}
}
}
})();
这是我的经理.js
var Manager = (function () {
var instance;
function createObject() {
var storage = CacheManager.getInstance();
var MENU_KEYS = 'MenuKeys';
return {
getItemByCategory: function (catID) {
var tempItems = [];
items = storage.get(MENU_KEYS) || {};
for (var i = 0; i < items.length; i++) {
if (items[i].categoryID == catID) {
tempItems.unshift(items[i]);
}
}
return tempItems.sort(function (item1, item2) {
if (item1.name.toLowerCase() == item2.name.toLowerCase()) {
return 0;
} else if (item1.name.toLowerCase() > item2.name.toLowerCase()) {
return 1;
} else
return -1;
});
}
}
}
return {
getInstance: function () {
if (!instance)
instance = createObject();
return instance;
}
}
});
my cachemanager.js
var CacheManager = (function () {
var instance;
function createObject() {
return {
put: function (key, value) {
$.jStorage.set(key, value);
},
get: function (key) {
return $.jStorage.get(key);
},
remove: function (key) {
$.jStorage.deleteKey(key);
}
}
}
return {
getInstance: function () {
if (!instance)
instance = createObject();
return instance;
}
}
})();