这是模块化的js设计模式吗？以及如何在此模型中跨不同模块重用一个值？

Question

我遇到了一个 javascript/jQuery 设计结构，其中每个操作都在对象字面量中定义，如下所示：

    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();
    });

第一个问题：这是'module design pattern'的一种形式吗？（无论我在哪里学习模块模式示例，都有匿名函数和 IIFE，我对什么构成模块模式感到困惑）。

第二个问题：在上面的例子中，我有两次var width = $(window).width()。在我正在使用的这个 'pattern' 中，我如何将 $(window).width() 抽象为一个单独的函数对象，并将返回的结果传递给一个可以被其他 2 个函数访问的变量？ - 这显然不够好（编辑：澄清一下，$(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

是的，这实际上就是您所拥有的模块模式。

您可以使用 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 的 post 下的评论中提到过。不过，您可以按照以下方式执行此操作：

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

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

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

Answer 2

这是一个基本模块设计模式（不推荐），将简单地创建一个普通的旧 javascript 对象，它将包含所有默认的 ECMAScript 对象方法。您还可以在同一对象中调用其他方法时访问 this。

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();
});

Answer 3

第一个问题的答案： 那是一个模块模式。正如 Addy Osmani 在他的文章中所说 Patterns for Large-Scale JavaScript Application Architecture:

[...] a module pattern encapsulates 'privacy', state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface. [...]

在一个对象内创建函数和数据，你是"protecting pieces from leaking into the global scope"。

第二个问题的答案： 您可以访问 width 变量，将其设置为对象属性:

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

如果您想在当前上下文中访问它，您可以这样做：

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

这是模块化的js设计模式吗？以及如何在此模型中跨不同模块重用一个值？

Is this a modular js design pattern? And how do I reuse a value across different modules in this model?

javascript

jquery

design-patterns

modular