javascriptjqueryself-invoking-function

How does jquery map to the init function in this code


Hi all I am trying to understand the code below. I understand that it is a self invoking function. And in the end when the document is ready the methodDraw.init method is being called

(function() {

    if(!window.methodDraw) window.methodDraw = function($) {
      var svgCanvas;
      var Editor = {};
      var is_ready = false;
      var curConfig = {
        canvas_expansion: 1, 
        dimensions: [580,400], 
        initFill: {color: 'fff', opacity: 1},
        initStroke: {width: 1.5, color: '000', opacity: 1},
        initOpacity: 1,
        imgPath: 'images/',
        extPath: 'extensions/',
        jGraduatePath: 'lib/jgraduate/images/',
        extensions: [],
        initTool: 'select',
        wireframe: false,
        colorPickerCSS: false,
        gridSnapping: false,
        gridColor: "#000",
        baseUnit: 'px',
        snappingStep: 10,
        showRulers: (svgedit.browser.isTouch()) ? false : true,
        show_outside_canvas: false,
        no_save_warning: true,
        initFont: 'Helvetica, Arial, sans-serif'
      };
      var curPrefs = {}; //$.extend({}, defaultPrefs);
      var customHandlers = {};
      Editor.curConfig = curConfig;
      Editor.tool_scale = 1;

      Editor.setConfig = function(opts) {
        $.extend(true, curConfig, opts);
        if(opts.extensions) {
          curConfig.extensions = opts.extensions;
        }
      }      

      Editor.init = function() {

        // For external openers
        (function() {
          console.log("inside editor.init")
          // let the opener know SVG Edit is ready
          var w = window.opener;
          if (w) {
                try {
              var methodDrawReadyEvent = w.document.createEvent("Event");
              methodDrawReadyEvent.initEvent("methodDrawReady", true, true);
              w.document.documentElement.dispatchEvent(methodDrawReadyEvent);
                }
            catch(e) {}
          }
        })();        
      };  
      return Editor;
    }(jQuery);    

    // Run init once DOM is loaded
    $(methodDraw.init);
    console.log("inside methoddraw.init")

  })();

What I fail to understand is, how does methodDraw equate to Editor? how does methodDraw.init call Editor.init?. In the console the methodDraw message is followed by the editor message. Or am I getting it completely wrong. Kindly bear with me as I am just starting off with jQuery.


Solution

  • In this code snippet if you look closely to window.methodDraw, it is a function, and at the end it will return Editor object instance that was configured and prepared throughout window.methodDraw function body, so since this instance object already have init method you can directly chain the call to it, here is a little snippet to demonstrate it in a simple way:

    let Editor = {};
    
    Editor.init = () => {
     console.log('Editor.init');
    }
    
    let InitializerObj = (() => {
      return Editor;
    })()
    
    InitializerObj.init();