javascript - 将揭示模块模式与 jQuery/JavaScript 结合使用

Question

我正在重新设计网站上的一些工具提示功能。

正在尝试此处列出的 Revealing 模块模式:

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

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

Answer 1

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

您可以告诉您的 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();