Javascript jquery插件扩展默认值问题

这是我的第一篇帖子，所以我希望我的帖子发到了正确的地方

我正在尝试开发一个对话框/模式插件。这是我的第一个插件，我不确定我是否以正确的方式制作了它。我遇到的问题是，$.extend没有更新设置对象。我有2个使用插件的元素。#dialog元素没有扩展插件设置对象。我已经试了几天来了解插件是如何工作的，它从内部扼杀了我：）

如果你能给我任何帮助，我将不胜感激

这是密码

(function( $ ){

$.fn.Dialog = function( method ) {           

    var elem = this;

    var settings = {
      'mask'         : '#mask',
      'closeable'    : true,
      'clear_on_close' : false
    };

  var methods = {
    init : function( options ) { 

                if ( options ) { 
                    $.extend( settings, options );
                }

                console.log(settings);

            }, 
    open : function( options ) { 

            var window_width = $(window).width();
            var window_height = $(window).height();

            var modal_height = "";
            var modal_width = "";

            var top = "";
            var left = "";

            if(!settings.set_width)
            {
                modal_width = elem.outerWidth();
            }else{
                modal_width = settings.set_width;
            }

            if(!settings.set_height)
            {
                modal_height = elem.outerHeight(); 
            }else{
                modal_height = settings.set_height;
            }

            if(!settings.set_y_pos)
            {
                top = (window_height-modal_height)/2;
            }else{
                top = settings.set_y_pos;
            }

            if(!settings.set_x_pos)
            {
                left = (window_width-modal_width)/2; 
            }else{
                left = settings.set_x_pos;
            }

            elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'});

            $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8);

            elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1);

                if(settings.closeable){$(settings.mask).bind('click.Dialog',  methods.close );}

                $(window).bind('scroll.Dialog', methods.reposition);            

    },
    open_ajax : function(options)
    {

        $.get(options.page, function(data){ 
            elem.html(data);
             methods.open();
        });//$.get("sign_in.html",

    },
    close : function( options ) { 

                $(settings.mask).fadeOut(500);

                elem.fadeOut(500);

                //alert(settings.clear_on_close)

                console.log(settings.clear_on_close)

                if(settings.clear_on_close)
                {

                    elem.html("");

                }

                $(window).unbind('scroll.Dialog');
                $(settings.mask).unbind('click.Dialog');


    },
    reposition : function( options )
    {



            $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"});
            elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000);


    }

  };


    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.tooltip' );
    }    

  };

})( jQuery );

---

这是我通常使用的模式。请注意，在插件代码中定义默认值之后，我会直接应用这些默认值。我不是100%，我的模式也是正确的。但它确实有效

---

问题是你的插件有一个内部状态。每次在对象上调用dialog方法时，都会创建一个新状态——旧状态永远不会被引用或保存

---

有关如何跨函数调用存储状态的更多想法，请阅读本教程中的数据部分：

这是创建jquery插件的绝佳资源：

---

您在哪里找到这种设计模式的？这似乎真的很复杂。此对象的实例存储在哪里？调用

init

方法，但它不会返回对对象的任何类型的引用，因此所有内容都会立即丢失。也许我看错了……我开始在jquery网站上使用这种模式。我对它做了一些修改。我一直在为插件模式苦苦挣扎。变量元素中排序的引用=此；第4行console.log in

init

的输出是什么？@Daniel:log是Object clear\u on\u close:false closeable:true mask:“mask”proto:Object clear\u on\u close:true closeable:false mask:“mask”proto:ObjectSo

extend

正在工作。您需要做的是将设置存储在元素的数据中，以便始终可以引用相同的数据集。如果没有，每次你调用一个方法时，它都会使用默认的数据。只要试着使用数据函数，稍加玩转，我想它会工作的。非常感谢你的帮助

(function( $ ){

$.fn.Dialog = function( method ) {           

    var elem = this;

    var settings = {
      'mask'         : '#mask',
      'closeable'    : true,
      'clear_on_close' : false
    };

  var methods = {
    init : function( options ) { 

                if ( options ) { 
                    $.extend( settings, options );
                }

                console.log(settings);

            }, 
    open : function( options ) { 

            var window_width = $(window).width();
            var window_height = $(window).height();

            var modal_height = "";
            var modal_width = "";

            var top = "";
            var left = "";

            if(!settings.set_width)
            {
                modal_width = elem.outerWidth();
            }else{
                modal_width = settings.set_width;
            }

            if(!settings.set_height)
            {
                modal_height = elem.outerHeight(); 
            }else{
                modal_height = settings.set_height;
            }

            if(!settings.set_y_pos)
            {
                top = (window_height-modal_height)/2;
            }else{
                top = settings.set_y_pos;
            }

            if(!settings.set_x_pos)
            {
                left = (window_width-modal_width)/2; 
            }else{
                left = settings.set_x_pos;
            }

            elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'});

            $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8);

            elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1);

                if(settings.closeable){$(settings.mask).bind('click.Dialog',  methods.close );}

                $(window).bind('scroll.Dialog', methods.reposition);            

    },
    open_ajax : function(options)
    {

        $.get(options.page, function(data){ 
            elem.html(data);
             methods.open();
        });//$.get("sign_in.html",

    },
    close : function( options ) { 

                $(settings.mask).fadeOut(500);

                elem.fadeOut(500);

                //alert(settings.clear_on_close)

                console.log(settings.clear_on_close)

                if(settings.clear_on_close)
                {

                    elem.html("");

                }

                $(window).unbind('scroll.Dialog');
                $(settings.mask).unbind('click.Dialog');


    },
    reposition : function( options )
    {



            $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"});
            elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000);


    }

  };


    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.tooltip' );
    }    

  };

})( jQuery );

(function($) {
$.fn.extend({

    dropList: function(options) {

        var defaults = {
            url: '',
            sortable: false,
            hoverClass: 'ui-state-highlight',
            rowSelected: function() {
            },
            rowDblClicked: function() {
            },
            onDrop:  function(ui) {
            }
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            //this is where I act on the selected element
        }
    }
}); })(jQuery)