调用内部对象函数javascript

Calling inner objects function javascript

本文关键字：javascript 函数 内部对象 调用      更新时间：2023-09-26

我正在看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对象上(在DragDrop的顶部定义)。

感谢您的任何建议或指向一些阅读

代码正在使用立即调用的函数表达式(IIFE)来设置闭包中保存的一些变量。

在赋值开始处:

var DragDrop = function(){

大多数人会这样写:

var DragDrop = (function(){

，其中额外的"("表明将执行函数表达式并赋值结果，而不是函数本身。

在这里创建拖放对象:

    var dragdrop = new EventTarget(),

和这里分配的属性:

    //public interface
    dragdrop.enable = function(){
      ...
    };
    dragdrop.disable = function(){
      ...
    };

那么将分配给DragDrop的对象(并且当前由DragDrop引用)在这里返回:

    return dragdrop;

最后，空参数列表导致函数表达式被执行:

}();

通常写成:

}());

来平衡前面建议的额外的"("。因此DragDrop现在引用返回的对象(EventTarget的一个实例)，它可以访问IIFE中创建的所有变量(如drag， diffX， diffY)，但其他函数不。

dropdrop 变量被指定为dropdrop 对象(由于返回语句)，该对象具有属性enable()

调用enable，只需dragdrop。enable()

相关文章：