Ошибка JavaScript; пытаясь локально - PullRequest
0 голосов
/ 01 мая 2011

приведенный ниже код дает «Uncaught TypeError: Невозможно вызвать метод 'getContext' из неопределенного».Код - это мой эксперимент по портированию приложения Canvas с использованием шаблона модуля, как описано здесь .

. Этот код можно найти в jsfiddle , который отлично работает.

спасибо.

// ==== test.html ========

<html>
<head>
    <title>Location</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>

<body>
<canvas id="cvs" height="600" width="800"></canvas>
</body>
</html>

// == test.js ========

if (typeof (NS) === 'undefined') {
    NS = {};
}

NS.AppName = (function ($) {
// Private members
    /*var _first = function () {
    },
    _second = function () {
    },*/
    var _cvs = $("#cvs");
    var _ctx = _cvs.get(0).getContext("2d");    

    var _privateVar = "privateVar: accessed from within AppLaunch.Admin namespace";
    // Private Methods
    var _privateMethod = function () {
       log("privateMethod: accessed only from within AppLaunch.Admin");
    }; // Last variable in a chain must always end with ; before the return {}

    function log() {
        if (window.console && window.console.log)
            window.console.log('[AppName] ' + Array.prototype.join.call(arguments, ' '));
    };

    return {
        init: function () {
        },

        // Public
        myPublicMethod: function() {
            //alert("myPublicMethod" + _cvs.height());
            _ctx.fillRect(25,25,100,100);
    _ctx.clearRect(45,45,60,60);
    _ctx.strokeRect(50,50,50,50);
        }
    }
})(jQuery); 

// Initialize
jQuery().ready(function() {
    NS.AppName.init()
    NS.AppName.myPublicMethod();
});  

Ответы [ 4 ]

1 голос
/ 01 мая 2011

Ваш ready синтаксис обработчика неверен - попробуйте это:

jQuery(document).ready(function() {
    NS.AppName.init();
    NS.AppName.myPublicMethod();
});

Или

jQuery(function() {
    NS.AppName.init();
    NS.AppName.myPublicMethod();
});
0 голосов
/ 01 мая 2011

Причина, по которой вы получаете ошибку, заключается в том, что самопроизвольно выполняющаяся анонимная функция , используемая для инициализации NS.AppName, вызывается на месте (именно там, где она определена), а не тогда, когда DOM готов.

NS.AppName = (function ($) {
  //1: some code
  return function(){...}//2
}(jQuery));//3

$(function(){
  NS.AppName();//4
});

строка 3 - это самостоятельно исполняемая часть .Он вызывает анонимную функцию, объявленную выше.

Во время вызова строка 3 будет выполнено тело анонимной функции (, включая строку 1 , но не внутри.функция в строка 2 ).Если документ не загружен, когда это происходит (например, если сценарий находится в заголовке), то он потерпит неудачу, поскольку в DOM еще нет $("#cvs").

Строка 4 вызовет функцию, определенную в строке 2 , когда DOM полностью загружен ($(f) эквивалентно $(document).ready(f)).

Вот еще некоторая информацияо самостоятельном выполнении анонимных функций или использовании более подходящего имени " выражение вызова с немедленным вызовом * "

Сценарий можно исправить тремя способами:

  • Удалить любоессылки на DOM из анонимной функции и переместить их в возвращаемую (я бы сделал это, это всего лишь один элемент ...)
  • Обернуть весь скрипт в jQuery(function($){...(you can safely use $ here, so no need for the anonymous functions)...}); - выполнить все это наDOM ready
  • Переместите его внизу страницы (не идеально, но будет работать)
0 голосов
/ 01 мая 2011

Перемещение JS к телу решило проблему:

    <html>
<head>
    <title>Location</title>
</head>

<body>
<canvas id="cvs" height="600" width="800"></canvas>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

или

    <html>
<head>
    <title>Location</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>
<canvas id="cvs" height="600" width="800"></canvas>     
    <script type="text/javascript" src="test.js"></script>
</body>
</html>
0 голосов
/ 01 мая 2011

Я не получаю ошибку.Но, возможно, что-то утеряно в переводе с вас сюда.Возможно (и это всего лишь предположение), поставить;в конце этого NS.AppName.init() может быть, у вас там есть какие-то странные пробелы / возвраты ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...