在jQuery/JavaScript中使用揭示模塊模式

Question

我正在重新在我的網站上使用一些工具提示功能。

我與所述顯示模塊模式試驗如下佈局：

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript

作爲一個快速測試我想這：

var tooltip = function(){ 

    var foobar = 'foo and bar'; 

    function getAlerter(){ 
     return alert(foobar); 
    } 

    return{ 
     alerter: getAlerter 
    } 

}(); 

tooltip.alerter(); 

其中預期警報 'foo和bar'。

但是，我需要通過觸發提示功能，像這樣的元素：

var tooltip = function(elem){ 

    var trigger = elem; 

    function getAlerter(){ 
     return alert(trigger); 
    } 

    return{ 
     alerter: getAlerter 
    } 

}(); 

tooltip.alerter('.trigger'); 

但這返回undefined。我不知道爲什麼:(

Answer 1

這是因爲使用的是立即（在您的「模塊」結束()）執行功能，並此刻，當你函數聲明和執行不傳遞任何值

你可以告訴你的getAlerter函數接受額外的參數：

function getAlerter(trigger){ 
    // your getter code... 
} 

但質疑你的背後PATT整體思路ERN。 如果你想調用與分配的元素你的模塊，你最有可能的應該結束了，像這樣：

var tooltip = function(elem){ 
    // your whole module code... 
}('.trigger'); 

，或者，如果你想多個實例，刪除()在你的「模塊」結束，像這樣運行：

var myTooltip = tooltip('.alerter'); 
myTooltip.alerter(); 

，如果你想保持它作爲一個實例，你可以輕鬆地添加init方法：

var tooltip = function(elem){ 

    var trigger; 

    function getAlerter(){ 
     return alert(trigger); 
    }; 

    function init(elem) { 
     trigger = elem; 
    } 
    return{ 
     alerter: getAlerter, 
     init: init 
    } 
}(); 

像這樣運行：

tooltip.init('.alerter'); 
tooltip.alerter(); 

Answer 2

因爲你正在返回警報未觸發的值的結果。

Answer 3

這樣

var tooltip = function(elem){ 

    function getAlerter(trigger){ 
     return alert(trigger); 
    } 

    return{ 
     alerter: getAlerter 
    } 

}(); 

tooltip.alerter('.trigger'); 

Answer 4

我太草率！ @wildcard有正確的想法

var tooltip = function (elem) { 

    var trigger = elem; 

    function getAlerter() { 
     alert (trigger); 
     return trigger; 
    } 

    return { 
     alerter: getAlerter 
    }; 
}; 

var q= tooltip ('.trigger'); 
q.alerter();