调用内部对象函数javascript

Question

I'm going throug book by Niklas Zakas. I'm riding about custom events and currently going through this code:

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 + ")";
    });

My question is about calling function DragDrop.enable();

I don't get it how can we call an enable function which is not defined directly on DragDrop but on dragdrop bject (defined at the top inside DragDrop).

Thanks for any suggestion or point to some reading..

Answer 1

The DrapDrop variable is assigned the dragdrop object (due to the return statement) which has a property enable()

So to call enable, simply DragDrop.enable()

Answer 2

The code is using an immediately invoked function expression (IIFE) to setup some variables held in a closure.

At the start of the assignment:

var DragDrop = function(){

most would write it as:

var DragDrop = (function(){

where the extra "(" makes it clear that the function expression will be executed and the result assigned, not the function itself.

The dragdrop object is created here:

    var dragdrop = new EventTarget(),

and properties assigned here:

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

    dragdrop.disable = function(){
      ...
    };

then the object that will be assigned to DragDrop (and is currently referenced by dragdrop ) is returned here:

    return dragdrop;

And finally, the empty parameter list causes the function expression to be exucuted:

}();

which would more commonly be written:

}());

to balance the extra "(" suggested earlier. So DragDrop now references the returned object (an instance of EventTarget ) which has access to all the variables created in the IIFE (such as drag , diffX , diffY ) but other functions don't.