Question

我正在学习如何创建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>

Answer 1

问题在于：

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

您实际上是在使用新属性修改defaults。因此，下次运行相同的代码时，defaults将会发生变异。你应该这样做：

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

这将在每次扩展之前克隆defaults来创建新的设置对象。

DEMO：http://jsbin.com/eWePoro/2

jQuery插件的每个实例如何都有自己的属性和方法？

1 个答案: