javascript - 这是模块化的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();
    });

第一个问题:这是一种“模块设计模式”吗？ (无论我在哪里学习模块模式示例，都有匿名函数和 IIFE，我对什么构成模块模式感到困惑)。

第二个问题:在上面的例子中，我有两次var width = $(window).width()。在我正在使用的这个“模式”中，我如何将 $(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
    }

感觉我在这里遗漏了一些基本的东西，但我无法完全找到用谷歌搜索它的词!任何帮助或有用的指示将不胜感激。

Answer 1

第一个问题的答案:那是一个模块模式。正如 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. [...]

在对象中创建函数和数据，您是在“保护片段不泄漏到全局范围内”。

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

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

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

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