Question

下面的代码给出了“Uncaught TypeError：无法调用未定义的方法'getContext'”。代码是我使用模块模式移植画布应用程序的实验，如here所述。

请在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();
});

Answer 1

您的ready处理程序语法不正确 - 请尝试以下操作：

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

或者

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

Answer 2

我没有收到错误。但也许在你的翻译中丢失了一些东西。也许（这只是猜测），放一个;在那个NS.AppName.init()的末尾，也许你会有一些时髦的空白/回归......

Answer 3

将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>

Answer 4

您收到错误的原因是用于初始化NS.AppName的{{3}}被调用（在定义它的位置），而不是在DOM准备就绪时。

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

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

第3行是自动执行部分。它调用上面声明的匿名函数。

在第3行的调用过程中，将执行匿名函数的主体（包括第1行，但第2行< /强>）。如果在发生这种情况时没有加载文档（例如：如果脚本在头部），那么它将失败，因为DOM中没有$("#cvs")。

当DOM完全加载时，
第4行将调用第2行 中定义的函数（$(f)等效于{ {1}}）。

以下是有关自行执行匿名函数或使用更好名称“self executing anonymous function”的更多信息

您可以通过三种方式修复脚本：

从匿名函数中删除对DOM的任何引用，并在返回的函数中移动它们（我这样做，它只是一个元素......）

将整个脚本包裹在$(document).ready(f)中 - 在DOM ready
上执行所有操作
将其移至页面底部（不理想，但可行）

Javascript错误;在当地尝试

4 个答案: