未捕获的TypeError:undefined不是ItemMenu.js中第2行的函数

时间:2014-07-27 18:03:04

标签: javascript jquery jquery-mobile

嗨,我花了几个小时来搜索这个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;
            }
        }
    })();

0 个答案:

没有答案