javascript - 理解 JavaScript 中的模块设计模式

Question

我正在尝试理解 Javascript 中的模块模式，以便我可以将代码分成不同的模块并在需要时使用它们。

var messageHandler = (function(){
    var el;
    var display = function(a){
        if(a=='error'){
            el = $('.error');
            el.css('display','block');
        }
        else if (a==='success'){
            el = $('.success');
            el.css('display','block');
        }
        else if (a=='warning'){
            el = $('.warning');
            el.css('display','block');
        }
        else if (a=='danger'){
            el = $('.danger');
            el.css('display','block');
        }
        registerClick(el.find('.close'));
        return this;
    }
    function registerClick(p_el){
        p_el.bind('click',function(){
            hide();
        });
    }
    var hide = function(){
        el.css('display','none');
    }
    return {
        display: display,
        hide: hide
    }
})();
window.messageHandler = messageHandler;

messageHandler.display('warning');

因此，我在 css 中有四个不同的类，用于不同类型的消息。关闭类用于右上角的一个小十字按钮，用于关闭消息。 这工作正常，直到我只调用该函数一次。当我这样做时

messageHandler.display('warning');
 messageHandler.display('success');

现在两个消息关闭按钮都已绑定(bind)到成功关闭按钮，因为 el 被覆盖。

如何实现它并保持代码可重用且简洁。

Answer 1

这里的问题是你有一个闭包变量 el你每次都会覆盖display()叫做。 hide()函数使用 el 的当前值在调用时，因此覆盖 el是一个问题。

如果你想拥有像这样的“静态”功能 display()方法，您需要避免共享状态。

正如 @Bergi 在评论中指出的那样，您可以消除共享 el并修改hide()将元素作为输入:

var messageHandler = (function(){
    var el;     // delete this
    var display = function(a){
        var el; // add this

function registerClick(el){
    el.bind('click', function(){
        hide(p_el);
    });
}
function hide(el){
    el.css('display','none');
}

您还可以修改hide使用当前事件属性，然后只需:

function registerClick(el){
    el.bind('click', hide);
}

function hide(event){
    $(event.target).css('display','none');
}

清理版本，包括评论中讨论的自动隐藏:

var messageHandler = (function(){
    var display = function(a){
        var el = $('.' + a);
        el.css('display', 'block');

        var hideAction = function () { el.css('display', 'block'); };
        var token = setTimeout(hideAction, 5000);

        el.find('.close').bind('click', function () {
            hideAction();
            clearTimeout(token);
        });

        return this;
    }

    return {
        display: display
    }
})();