Question

我正在尝试改进我的Javascript，并了解此处发布的模块 - http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

我的代码如下所示：

var
s,
ResizeContainer = {

    settings : {
        winWidth : $(window).width(),
        winHeight : $(window).height()
    },

    init : function() {
        s = this.settings
        this.bindUIActions();
    },

    bindUIActions: function() {
        console.log(s.winWidth);
    }

}

$(document).ready(function()
{
    (function()
    {
        ResizeContainer.init();
    })();
});

$(window).on('resize', function()
{
    ResizeContainer.init();
});

我想要使用这个模块实现的目的是简单地在文档准备就绪时提醒窗口宽度，它也会在调整窗口大小时调整窗口宽度，而不是。

任何人都可以帮我理解为什么在调整大小时不更新窗口宽度？

Answer 1

尝试这个小提琴http://jsfiddle.net/K2Mfd/5/，您需要在控制台选项卡中打开Web检查器以查看结果，基本上您每次都需要计算宽度和高度：

settings : function(){
    return {
       winWidth : $(window).width(),
       winHeight : $(window).height()
    }
},

不要忘记将settings替换为settings()，只要你拥有它。

s = this.settings();

顺便说一下，我认为你不需要：

(function(){})();

在每个处理程序中

Answer 2

这是我经常提到的帖子，在决定哪种模块模式适合我正在处理的应用程序时：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

这不仅帮助我构建我的代码，还帮助我减少/删除全局变量。

理解'CSS技巧'Javascript模块模式

2 个答案: