Is this a modular js design template? And how to reuse the value for different modules in this model?

Question

I came across a javascript / jQuery design framework where every action was defined in an object literal, for example:

    if(typeof window.MYWEB === "undefined"){
        window.MYWEB = {};
    }

    MYWEB.Utils = {        
        doSthgUsingWinSize: function(){
            var width = $(window).width();
            //do something using this value
        },
        doSthgElseUsingWinSize: function(){
            var width = $(window).width();
            //do something else using this value
        }
    };

    //init:
    $(document).ready(function(){
        window.MYWEB.Utils.doSthgUsingWinSize();
        window.MYWEB.Utils.doSthgElseUsingWinSize();
    });

First question: Is this a form of a “module design pattern”? (Wherever I get interested in examples of module templates, there are anonymous functions and IIFE, and I'm confused about what the module template does).

: var width = $(window).width() . "", , $(window).width() , 2 ? - . (edit: , $(window).width() - ):

    MYWEB.Utils = {
            _getWindowWidth: function(){
            return $(window).width();
        },
        doSthgUsingWinSize: function(){
            var width = MYWEB.Utils._getWindowWidth();
            //do something using this value
        },
        etc
    }

, - , Google! .

Answer 1

: . JavaScript:

[...] "", . , . [...]

, " ".

: width, :

MYWEB.width = $(window).width();

, :

MYWEB.Utils.width = $(window).width();

Answer 2

, , , , .

IIFE, , :

MYWEB.Utils = (function (window, $) {
    function getWidth() {
        return $(window).width();
    }

    function doSthgUsingWinSize() {
        //do something with getWidth()
    }

    function doSthgElseUsingWinSize() {
        //do something else with getWidth()
    }

    return {
        doSthgUsingWinSize: doSthgUsingWinSize,
        doSthgElseUsingWinSize: doSthgElseUsingWinSize
    };
})(window, jQuery);

, width, , Leonardo Manrique. :

MYWEB.Utils = (function (window, $) {
    var width = $(window).width();

    function doSthgUsingWinSize() {
        //do something with width
    }

    // the rest is the same as above
})(window, jQuery);

Answer 3

This is a basic module design template (not recommended) and will simply create a simple old javascript object that will contain any standard methods of the ECMAScript object. You can also access by thiscalling other methods in the same object.

if(typeof window.MYWEB === "undefined"){
    window.MYWEB = {};
}

MYWEB.Utils = {       
    _getWidth: function(){
        return $(window).width();            
    },
    doSthgUsingWinSize: function(){
        console.log(this._getWidth());
    },
    doSthgElseUsingWinSize: function(){
        console.log(this._getWidth());
    }
};

$(document).ready(function(){
    window.MYWEB.Utils.doSthgUsingWinSize();
    window.MYWEB.Utils.doSthgElseUsingWinSize();
});