Параметры плагина jQuery

Question

Во-первых, я знаю, что это базовая проблема JS, а не jQuery. Я нахожусь в той точке обучения, где я не могу полностью погрузиться в некоторые проблемы. Поэтому мне нужно какое-то объяснение.

Я читал каждую статью / учебник, который только смог найти, но мне просто нужны ответы. Я настроил этот базовый код для экспериментов (так как фактический код слишком велик, чтобы размещать здесь).

В следующем эксперименте, когда нажата кнопка выбора селектора, переменная 'cmd' отображается правильно, но ссылка на this.options 'undefined', потому что это другой экземпляр MySelector (), если только я я далеко.

Итак, как можно вызвать экземпляр объекта, подобного этому.

Пример:

Вы можете использовать диалоговое окно jQueryUI, создав его, а затем вы можете передать ему такие команды, как $ ('# mydiv'). Dialog ('close'); и это будет обращаться к экземпляру, прикрепленному к этому элементу Как это достигается?

JQUERY_MYSELECTOR.JS

(function($){
    $.fn.MySelector = function(incoming) {

        if (typeof(incoming) != 'object') {
            return runCommand(incoming);
        }

        var options = $.extend({},{
            id: false,
            backgroundColor: false
        },incoming);

        function runCommand(cmd) {
            alert('blah:'+this.options.backgroundColor+"\n"+'cmd:'+cmd);
        }
    }
})(jQuery);

SCRIPT

<script type="text/javascript" src="jquery_myselector.js"></script>
<script type="text/javascript">
    $j(document).ready(function() {
        $j('#selector1).MySelector({ backgroundColor: '#000000' });
        $j('#selector1-change').click(function() {
            $j('#selector1').MySelector('mooocow');
        });
    });
</script>

1024 * СТИЛЕ *

<input type="button" value="selector1" id="selector1" />
<br/>
<input type="button" value="selector1-change" id="selector1-change" />

ОБНОВЛЕНО Забыли использовать плагин на selector1 (duh)

Answer 1

Вы вызываете runCommand перед тем, как назначить значение для параметров - параметры имеют значение undefined внутри тела runCommand. Не спрашивайте меня, как JS может увидеть тело runCommand до того, как вы объявите его, но он может.

Кроме того, на первом уровне MySelector this привязан к результатам выполнения $j('#selector1-change'), который является массивом. Вам нужно будет повторить этот массив.

Попробуйте что-то вроде этого:

(function($){
    function runCommand(e, cmd) {
        alert('blah:'+ e.options.backgroundColor+"\n"+'cmd:'+cmd);
    }

    $.fn.MySelector = function(incoming) {
        this.each(function() {
            if (typeof(incoming) != 'object') {
                return runCommand(this, incoming);
            } else {
                this.options = $.extend(this.options || {
                    id: false,
                    backgroundColor: false
                },incoming);    
            }
        });
    }
})(jQuery);

Answer 2

Вы можете попробовать что-то вроде этого:

(function($){
    $.myPlugin = {
        foo: function () {...},
        bar: function () {...},
        foobar: function () {...}
    };

    $.fn.MySelector = function (operation) {
        if (typeof operation === 'string') {
            switch(operation) {
                'open':
                    $.myPlugin.foo();
                    break;
                'destroy':
                    $.myPlugin.bar();
                    break;
                default:
                    $.myPlugin.foobar();
                    break;
            }
        }
    }
}(jQuery));

Answer 3

options было объявлено с помощью оператора var в основной области, вам не нужно использовать ключевое слово this в вашей функции runCommand, поскольку в этой функции у вас есть доступ к внешнему замыканию:

    function runCommand(cmd) {
        alert('blah:'+options.backgroundColor+"\n"+'cmd:'+cmd);
    }