Как каждый экземпляр плагина jQuery может иметь свои собственные свойства и методы?

Question

Как каждый экземпляр плагина jQuery может иметь свои собственные свойства и методы?

0

Я изучаю, как создавать плагины jQuery, и построил один с использованием шаблона модуля. Он работает, если я применяю его только один раз, однако, если я применяю несколько раз, все они инициализируются с использованием последних настроек.

Например, если я сначала делаю $('#div1').myPlugin(); , а затем позже $('#div2').myPlugin({myProperty :'mydiv2Property'}); , $('#div1') myProperty изменен с myDefaultProperty на mydiv2Property. То же самое происходит при инициализации другим методом.

У меня есть рабочий (ну, почти рабочий!) Пример, расположенный по адресу http://jsbin.com/eWePoro/1/, и мой полный скрипт приведен ниже.

Как изменить этот скрипт, поэтому каждый раз, когда применяется плагин, он использует только свои собственные свойства и методы? спасибо

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            (function($){
                var defaults = {
                    myProperty  :'myDefaultProperty',
                    myMethod1   :function () {
                        console.log('myMethod1',this,this.myProperty);
                    },
                    myMethod2   :function () {
                        console.log('myMethod2',this,this.myProperty);
                    }
                };

                var methods = {
                    init : function (options) {
                        var settings = $.extend(defaults, options  || {});
                        settings.myMethod1();
                        return this.each(function () {
                            $(this).click(function(e) {
                                settings.myMethod2();
                            });
                        });
                    },
                    destroy : function () {
                        //Anything else I should do here?
                        delete settings;
                        return this.each(function () {});
                    }
                };

                $.fn.myPlugin = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.myPlugin');
                    }    
                };

                }(jQuery)
            );
            $(function(){
                $('#div1').myPlugin();
                $('#div2').myPlugin({
                    myProperty  :'mydiv2Property'
                });
                $('#div3').myPlugin({
                    myMethod1   :function () {console.log('myMethod1_new',this,this.myProperty);}
                });
                 $('#div4').myPlugin({
                    myMethod2   :function () {console.log('myMethod2_new',this,this.myProperty);}
                });

            });
        </script>
    </head>

    <body>
        <div id='div1'>div1</div>
        <div id='div2'>div2</div>
        <div id='div3'>div3</div>
        <div id='div4'>div4</div>
    </body> 
</html>

user1032531 18 дек. 2013, в 19:36

Источник

0

@zeroflagL. Я думаю, что это был документ, который я первоначально использовал, но более старая версия. Однако не могу быть уверен, и я перечитал бы это снова. Спасибо
user1032531 18 дек. 2013, в 18:48

Теги:

javascript

jquery

jquery-plugins

module-pattern

1 ответ

Ещё вопросы

@zeroflagL. Я думаю, что это был документ, который я первоначально использовал, но более старая версия. Однако не могу быть уверен, и я перечитал бы это снова. Спасибо

David · Accepted Answer · 2013-12-18T17-28-00.000Z

Проблема здесь:

var settings = $.extend(defaults, options  || {});

Фактически вы изменяете defaults новыми свойствами. Поэтому в следующий раз, когда вы запустите тот же код, defaults будут изменены. Вероятно, вы должны:

var settings = $.extend({}, defaults, options);

Это создаст новый объект настроек каждый раз, клонируя defaults по defaults прежде чем расширять его.

ДЕМО: http://jsbin.com/eWePoro/2

Дэвид, Твой клёвый! Первоначально я получил ошибочную строку кода из какого-то учебника (даже не помню, что был), и просто никогда не подозревал об этом. Спасибо!!!
Ответ идеален. Если вы обнаружите какие-либо другие недостатки в моем сценарии, пожалуйста, дайте мне знать.