node.js 中包含的 JS 文件的奇怪行为答案

【问题标题】：Strange behaviour of included JS file in node.jsnode.js 中包含的 JS 文件的奇怪行为
【发布时间】：2013-04-26 15:57:14
【问题描述】：

我正在制作一个处于当前状态的节点应用程序非常简单，但我遇到了一个我无法弄清楚的问题。

我的 express 应用生成的 html 如下所示：

<html style="" class=" js no-touch svg inlinesvg svgclippaths no-ie8compat">
<head>
...
<script type="text/javascript" src="/javascripts/mouse.js"></script>
...
</head>
<body class="antialiased" style=""><div class="row"><div class="row">
<script>
var mouse;
var X = 0;
var Y = 0;
window.onload = function()
{
 alert(Mouse());//=> undefined
 mouse = Mouse();

 mouse.setMouseMoveCallback(function(e){ //THIS LINE FAILS: "Cannot call method 'setMouseMoveCallback' of undefined"
  X = e.x;
  Y = e.y;
  alert("move");
 });
}
...
</html>

标头中的 include script 标签添加了这个 javascript 文件：

function Mouse(onObject){
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
mouseDownCount = 0;
var mouseDownCallbacks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var mouseTracer = 0;
var tracePosArray;
var target = onObject;

if(!onObject){
    onObject = document;
}

onObject.onmousedown = function(evt) { 
    mouseDown[evt.button] = 1;
    mouseDownCount--;
    if(mouseDownCallbacks[evt.button] != 0){
        mouseDownCallbacks[evt.button](evt);
    }
}
onObject.onmouseup = function(evt) {
    mouseDown[evt.button] = 0;
    mouseDownCount--;
}

var mousemoveCallback;
onObject.onmousemove = function(evt){
    //Tracing mouse here:
    if(mouseTracer){
        tracePosArray.push([evt.pageX,evt.pageY]);
    }

    if(mousemoveCallback){
        mousemoveCallback(evt);
    }
}

var mouseWheelCallback;
onObject.onmousewheel = function(evt){
    if(mouseWheelCallback){
        mouseWheelCallback(evt);
    }
}

var mouseOverCallback;
onObject.onmouseover = function(evt){
    if(mouseOverCallback){
        mouseOverCallback(evt);
    }
}

var mouseOutCallback;
onObject.onmouseout = function(evt){
    if(mouseOutCallback){
        mouseOutCallback(evt);
    }
}


//TODO: There is a bug when you move the mouse out while you are pressing a button. The key is still counted as "pressed" even though you release it outside of the intended area
//NOTE: might have fixed the bug. Do some further investigation by making a smaller element.
this.anyDown = function(){
    if(mouseDownCount){
        for(p in mouseDown){
            if(mouseDown[p]){
                return true;
            }
        }
    }
}

this.setLeftDownCallbackFunction = function(fun){
    mouseDownCallbacks[0] = fun;                
}
this.setRightDownCallbackFunction = function(fun){
    mouseDownCallbacks[2] = fun;                
}
this.setMiddleDownCallbackFunction = function(fun){
    mouseDownCallbacks[4] = fun;                
}

this.setSpcifiedDownCallbackFunction = function(num, fun){
    mouseDownCallbacks[num] = fun;              
}

this.leftDown = function(){
    if(mouseDownCount){
        return mouseDown[0] != 0;
    }
}
this.rightDown = function(){
    if(mouseDownCount){
        return mouseDown[2] != 0;
    }
}
this.middleDown = function(){
    if(mouseDownCount){
        return mouseDown[4] != 0;
    }
}

this.setMouseMoveCallback = function (callback){
    mousemoveCallback = callback;
}
this.setMouseWheelCallback = function (callback){
    mouseWheelCallback = callback;
}
this.setMouseOverCallback = function (callback){
    mouseOverCallback = callback;
}
this.setMouseOutCallback = function (callback){
    mouseOutCallback = callback;
}

this.enableTracer = function(){
    tracePosArray = new Array();
    mouseTracer = 1;
}

this.getMouseTracerData = function() {
    return tracePosArray;
}

}

所以：我保证 JS 文件已加载。但是我仍然无法访问主体中window.onload 函数中的Mouse() 方法，它显示为undefined。这对我来说很奇怪，因为如果我创建一个执行完全相同操作的 HTML 文件，我就可以访问它。

这里发生了什么？ node.js / express 中是否有一些魔术技巧会禁用这种交互？

补充说明：

我使用 Jade 作为模板引擎。
“mouse.js”文件有效。我以前用过几次。
我正在使用 socket.io 进行客户端和服务器之间的通信。

完整的标题：

<head><title>My awesome title</title><link rel="stylesheet" href="/stylesheets/foundation.min.css"><link rel="stylesheet" href="/stylesheets/normalize.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/socket.io/socket.io.js"></script><style type="text/css"></style><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/vendor/custom.modernizr.js"></script><script type="text/javascript" src="/javascripts/vendor/zepto.js"></script><script type="text/javascript" src="/javascripts/mouse.js"></script><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta name="viewport" content="width=device-width"></head>

【问题讨论】：

是否有其他代码可以干扰或重新定义鼠标？看起来不像是玉/快递问题

标签： javascript node.js include express socket.io

【解决方案1】：

如果鼠标函数未定义，这将引发错误。警报显示“未定义”的原因是鼠标函数不返回任何内容，因此未定义。它应该用作构造函数，如 'new Mouse()'

【讨论】：

这就是问题所在。不知何故，我看不出它应该是new Mouse()。谢谢！