繁体   English   中英

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

[英]Strange behaviour of included JS file in node.js

我正在使处于当前状态的节点应用程序变得非常简单,但是遇到了一个我无法解决的问题。

我的快速应用程序生成的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脚本标签会添加以下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>

如果未定义Mouse函数,则会抛出错误。 警告显示“未定义”的原因是Mouse函数不返回任何内容,因此未定义。 它应该用作构造函数,例如'new Mouse()'

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM