理解「CSS技巧」的JavaScript模塊模式

我想提高我的Javascript和理解模塊貼在這裏 - http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/理解「CSS技巧」的JavaScript模塊模式

我的代碼如下所示：

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

我試圖用實現這個模塊只是在文檔準備就緒時提醒窗口寬度，它在做什麼，還有窗口調整大小時，它不會。

任何人都可以幫助我理解爲什麼窗口寬度沒有更新調整大小？

來源

2013-05-01 mtwallet

試試這個小提琴http://jsfiddle.net/K2Mfd/5/，你需要在控制檯選項卡中打開Web檢查看到的結果，基本上你需要的寬度和高度，每次來計算：

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

而且不要忘記更換settings通過settings()無論你擁有它。

s = this.settings();

順便說一句，我認爲你不需要：

(function(){})();

在每個處理

來源

2013-05-01 15:16:08 juanpastas

感謝您的回覆！所以我認爲我基本上理解了模塊的概念，但是它更新了引發我的w/h。 – mtwallet 2013-05-01 15:26:37

這是後，決定模塊模式是什麼時，我通常是指，適用於我正在處理的應用程序：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

這不僅幫助我構建代碼，還幫助我減少/刪除全局變量。

來源

2013-08-02 14:57:19

請注意，只提供鏈接的答案是不鼓勵的，所以答案應該是搜索解決方案的終點（而另一個引用的中途停留時間往往會過時）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra 2013-08-02 15:15:03

基於這個問題，我相信對JavaScript模式的理解很重要，因此我的答案是。感謝您通過@kleopatra提醒，我意識到這一點。 – 2013-08-02 15:51:41

@Stan Lukas感謝您的回覆，我感謝您的幫助 – mtwallet 2013-08-21 06:27:13

理解「CSS技巧」的JavaScript模塊模式

回答

相關問題