我的jQuery插件是否有弱点（模式方面）？

我在互联网上找到了一个插件模式。（我会在找到链接后尽快提交）我对其进行了一些修改，创建了自己的对话框插件。我担心，即使代码正常工作，我制作代码的方式也毫无意义

我必须：

• 能够将我的插件分配给 多元素（多于一个） 对话框）-已实现
• 我必须能够访问它的方法 ：openDialog，closeDialog， 从其范围外分配选项 -尚未实施
• 我想寄一封推荐信给 单击按钮时显示的当前对话框 单击发生-部分实现。 我正在使用

  $（this）.getDialog（）

  方法<代码>此指单击的 钮扣

以下是插件：

(function($) {
    var pluginName = "Dialog",
        dialogContent = { "Title" : "h2", "SubTitle" : "p.sub-title", "Body" : "div.content" }

    var infDialog = function( el, options ) {
        var $el = $(el),
            currentConfig = {
                position : [100, 100],
                autoOpen : true
            };

        $el.data( pluginName, $el);

        if ( options ) {
            currentConfig = $.extend( currentConfig, options );
        }

        $el.css({ "top" : currentConfig.position[1], "left" : currentConfig.position[0], "z-index" : 9999 });

        if ( currentConfig.autoOpen ) {
            $el.fadeIn( "slow" );
        }

        if ( currentConfig.buttons ) {
            $.each(currentConfig.buttons, function(i, j) {
                if ( $.isFunction( j ) && $(el).find("input[value='" + i + "']").length )
                {
                    var $currentButton = $(el).find("input[value='" + i + "']");

                    $(el).find("input[value='" + i + "']").click(function() {
                        j.call( $currentButton );
                    });
                }
            });
        }

        if ( currentConfig.onOpen ) {
            currentConfig.onOpen.call( $el );
        }

        if ( currentConfig.onClose ) {
            $el.bind("onclose", function() {
                currentConfig.onClose.call( $el );
            });
        }

        $el.getDialog().bind("click", function( e ) {
            var currentDialog = this.id,
                currentPosition = $(this).css("z-index");

            if ( currentPosition < 9999 || currentPosition == "auto" ) {
                $(".dialog").each(function(i) {
                    if ( this.id == currentDialog ) {
                        $(this).css("z-index", 9999);
                    } else {
                        $(this).css("z-index", 9990);
                    }
                });

                $(this).css("z-index");
            }
        });
    }

    $.fn.infDialog = function( options ) {
        return this.each(function() {
            ( new infDialog( this, options ) );
        });
    }

    $.fn.closeDialog = function() {
        return $(this).getDialog().fadeOut("slow", function() {
            $(this).trigger("onclose");
        });
    }

    $.fn.getDialog = function() {
        return ( ! $(this).is(".dialog") ) ? $(this).closest(".dialog") : $(this);
    }

    $.fn.assignOption = function( options ) {
        var $currentPlugin = $(this);

        $.each( options, function(i, j) {
            if ( dialogContent[ i ] ) {
                $currentPlugin.find( dialogContent[ i ] ).empty().html( j );
            }
        });
    }
})(jQuery);

我做错了什么，还是我真的朝着好的方向走了

在旁注中，我发现以下代码：$

el.data（pluginName，$el）无效。事实上，每次我试图使用
$（“#dialogTest”）.data（“Dialog”）
检索对象时，返回的对象都是空的

谢谢你
给你一些快速提示：

在分配给
jquery.fn
（jquery原型）的函数表达式中，
此
已经是jquery对象

$.fn.method = function( options ) {
    return this.each(function() {
        //do something
    });
}


一个插件在
jquery.fn
名称空间中使用4个方法名通常不是一个好主意。使用该框架，您将只使用一个方法名

$.widget("cybrix.coolDialog", {
    ...
    close: function() { ... },
    open: function() { ... },
    assign: function() { ... }
}

然后

您可以在不依赖jquery.ui.widget.js的情况下执行此操作或类似操作

上的

前缀对于大多数jQuery事件来说是不常见的

给你的几个快速提示：

在分配给
jquery.fn
（jquery原型）的函数表达式中，
此
已经是jquery对象

$.fn.method = function( options ) {
    return this.each(function() {
        //do something
    });
}


一个插件在
jquery.fn
名称空间中使用4个方法名通常不是一个好主意。使用该框架，您将只使用一个方法名

$.widget("cybrix.coolDialog", {
    ...
    close: function() { ... },
    open: function() { ... },
    assign: function() { ... }
}

然后

您可以在不依赖jquery.ui.widget.js的情况下执行此操作或类似操作

上的

前缀对于大多数jQuery事件来说是不常见的

这给了我使用的jQuery插件模式

关于您的
分配选项
任务

如果你有一个私有的设置对象，并将选项传递给你的插件，它会很好地工作（当然这在教程中有概述）

扩展示例

(function( $ ){

  $.fn.tooltip = function( options ) {  
    //private settings
    var settings = {
      'location'         : 'top',
      'background-color' : 'blue'
    };
    // returning this.each ensures your plugin works on multiple matched elements
    return this.each(function() {        
      // If options exist, lets merge them
      // with our default settings
      if ( options ) { 
        $.extend( settings, options );
      }

      // Tooltip plugin code here

    });

  };
})( jQuery );
//initiate plugin with an options object
var options = { 'location' : 'left' };
$('div').tooltip( options );

这给了我使用的jQuery插件模式

关于您的
分配选项
任务

如果你有一个私有的设置对象，并将选项传递给你的插件，它会很好地工作（当然这在教程中有概述）

扩展示例

(function( $ ){

  $.fn.tooltip = function( options ) {  
    //private settings
    var settings = {
      'location'         : 'top',
      'background-color' : 'blue'
    };
    // returning this.each ensures your plugin works on multiple matched elements
    return this.each(function() {        
      // If options exist, lets merge them
      // with our default settings
      if ( options ) { 
        $.extend( settings, options );
      }

      // Tooltip plugin code here

    });

  };
})( jQuery );
//initiate plugin with an options object
var options = { 'location' : 'left' };
$('div').tooltip( options );

您好，jQuery.UI.Widget看起来不错。你有没有关于我如何在不需要包含库的情况下实现类似的东西的技巧，我在页面上找到了答案。实际上，您可以定制jQuery UI构建，只包含小部件工厂，这样它将
SUPER
轻量级，并且可以访问许多真正强大的功能/结构指南。至少你应该看看jQueryUI是如何构建插件的，因为它们非常。。。非常好。
$.widget（）
工厂在隔离和缩小时只有4KB。您好，jQuery.UI.widget看起来不错。你有没有关于我如何在不需要包含库的情况下实现类似的东西的技巧，我在页面上找到了答案。实际上，您可以定制jQuery UI构建，只包含小部件工厂，这样它将
SUPER
轻量级，并且可以访问许多真正强大的功能/结构指南。至少你应该看看jQueryUI是如何构建插件的，因为它们非常。。。非常好。
$.widget（）
工厂在隔离和缩小时仅为4KB。嗨。我之所以选择
assignOptions
，是为了以后修改对话框。在运行时，我在写下答案后就知道了。你的变量/方法的命名让我很反感，我认为这是实际的插件选项，而不仅仅是分配属性。我现在根据jQuery创作教程中的示例转换了我的插件。谢谢更干净的代码。是的，当我发现它真的很有启发性。嗨。我之所以选择
assignOptions
，是为了以后修改对话框。在运行时，我在写下答案后就知道了。你的变量/方法的命名让我很反感，我认为这是实际的插件选项，而不仅仅是分配属性。我现在根据jQuery创作教程中的示例转换了我的插件。谢谢是的，当我发现它真的很有启发性时。