Использование разоблачающего модульного паттерна с 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');

Но это возвращает неопределенное.Не знаю почему: (

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

Answer 2

Поскольку вы возвращаете результат предупреждения, а не значение триггера.

Answer 3

Я был слишком поспешным!У @wildcard правильная идея

var tooltip = function (elem) {

    var trigger = elem;

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

    return {
        alerter: getAlerter
    };
};

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

Answer 4

Таким образом

var tooltip = function(elem){

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

    return{
        alerter: getAlerter
    }

}();

tooltip.alerter('.trigger');