CSS技巧'Javascript模块模式

Understanding 'CSS Tricks' Javascript Module Pattern

本文关键字：Javascript 模块 模式 技巧 CSS      更新时间：2023-09-26

我正在努力提高我的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();
});

我想用这个模块实现的是当文档准备好时简单地提醒窗口宽度，它是这样做的，当窗口被调整大小时，它没有。

谁能帮助我理解为什么窗口宽度不更新调整大小?

试试这个http://jsfiddle.net/K2Mfd/5/，你需要在控制台选项卡中打开web检查器来查看结果，基本上你需要每次计算宽度和高度:

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

不要忘记用settings()代替settings。

s = this.settings();

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

(function(){})();

这是我在决定什么模块模式适合我正在研究的应用程序时通常参考的帖子:http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

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

相关文章：