我要翻阅尼古拉斯·扎卡斯（Niklas Zakas）的书。我正在讨论自定义事件，目前正在执行以下代码：
var DragDrop = function(){
var dragdrop = new EventTarget(),
dragging = null,
diffX = 0,
diffY = 0;
function handleEvent(event){
//get event and target
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//determine the type of event
switch(event.type){
case "mousedown":
if (target.className.indexOf("draggable") > -1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({type:"dragstart", target: dragging, x: event.clientX, y: event.clientY});
}
break;
case "mousemove":
if (dragging !== null){
//assign location
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
//fire custom event
dragdrop.fire({type:"drag", target: dragging, x: event.clientX, y: event.clientY});
}
break;
case "mouseup":
dragdrop.fire({type:"dragend", target: dragging, x: event.clientX, y: event.clientY});
dragging = null;
break;
}
};
//public interface
dragdrop.enable = function(){
EventUtil.addHandler(document, "mousedown", handleEvent);
EventUtil.addHandler(document, "mousemove", handleEvent);
EventUtil.addHandler(document, "mouseup", handleEvent);
};
dragdrop.disable = function(){
EventUtil.removeHandler(document, "mousedown", handleEvent);
EventUtil.removeHandler(document, "mousemove", handleEvent);
EventUtil.removeHandler(document, "mouseup", handleEvent);
};
return dragdrop;
}();
DragDrop.enable();
DragDrop.addHandler("dragstart", function(event){
var status = document.getElementById("status");
status.innerHTML = "Started dragging " + event.target.id;
});
DragDrop.addHandler("drag", function(event){
var status = document.getElementById("status");
status.innerHTML += "<br>Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")";
});
DragDrop.addHandler("dragend", function(event){
var status = document.getElementById("status");
status.innerHTML += "<br>Dropped " + event.target.id + " at (" + event.x + "," + event.y + ")";
});
我的问题是有关调用函数DragDrop.enable（）;的问题。
我不明白该如何调用一个不是直接在DragDrop上而是在dragdrop bject（在DragDrop内部顶部定义）上定义的启用函数。
感谢您的任何建议或指向一些阅读材料。
该代码使用立即调用的函数表达式（IIFE）来设置闭包中保存的一些变量。
在分配开始时：
var DragDrop = function(){
大多数人会这样写：
var DragDrop = (function(){
其中多余的“（”清楚表明将执行函数表达式并分配结果，而不是函数本身。
该的DragDrop在这里创建的对象：
var dragdrop = new EventTarget(),
和此处分配的属性：
//public interface
dragdrop.enable = function(){
...
};
dragdrop.disable = function(){
...
};
然后将在此处返回将分配给DragDrop的对象（当前由dragdrop引用）：
return dragdrop;
最后，空参数列表会导致函数表达式被推导：
}();
通常会这样写：
}());
为了平衡前面提到的多余的“（”。因此，DragDrop现在引用了返回的对象（EventTarget的实例），该对象可以访问在IIFE中创建的所有变量（例如drag，diffX，diffY），而其他函数则没有。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句