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