javascript - 在jQuery/JavaScript中使用显示模块模式

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

我正在尝试如下所示的显示模块模式:

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 and bar”警报。

但是，我需要传递触发工具提示功能的元素，如下所示:

var tooltip = function(elem){

    var trigger = elem;

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

    return{
        alerter: getAlerter
    }

}();

tooltip.alerter('.trigger');

但这返回未定义。不知道为什么:(

最佳答案

这是因为您正在使用立即执行的函数(“模块”末尾的())，并且在声明和执行函数时不传递任何值。

您可以告诉getAlerter函数接受其他参数:

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

但它质疑您的模式背后的整个想法。
如果要在分配了元素的情况下调用模块，则很可能应该以如下形式结束:

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