扩展抽象jQuery插件

我创建了一个jQuery插件，它通过ajax查询服务器并显示一个弹出窗口。然后我想在另一个页面上创建另一个，返回一些不同的数据并显示。我实现它的方式是，插件将向服务器发送指示它在哪个页面上的数据，服务器将获取数据并返回数据类型，客户端将根据给定的数据类型显示数据

我的方法显然有很多需要改进的地方。相反，是否可以制作插件的抽象版本，然后将其扩展到每个特定的应用程序，以便正确显示它（即去掉switch语句）？此外，如何避免在弹出窗口（即#屏幕截图）上使用id，从而使每个窗口都可以单独设置样式？谢谢

ayb={};
$("a.screenshot").screenshotPreview();

function contact(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +'<dt>Account:</dt><dd>'+data.account_name+'</dd>'
    +'<dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +((data.title)?'<dt>Title:</dt><dd>'+data.title+'</dd>':'')
    +'<dt>User Name:</dt><dd>'+data.username+'</dd>'
    +'<dt>Password:</dt><dd>'+data.password+'</dd>'
    +'<dt>Communication Method:</dt><dd>'+data.communication_method+'</dd>'
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +((data.account_phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.account_phone)+'</dd>':'')
    +((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
    +((data.account_fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.account_fax)+'</dd>':'')
    +((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +'</dl>';
}
function account(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.name+'</dd>'
    +((data.phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
    +((data.vertical_markets)?'<dt>Primary Market:</dt><dd>'+data.vertical_markets+'</dd>':'')
    +((data.priority)?'<dt>Priority:</dt><dd>'+data.priority+'</dd>':'')
    +'</dl>';
}
function user(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +'<dt>User Name:</dt><dd>'+data.username+'</dd>'
    +((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
    +((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +'</dl>';
}
function getUrlVars(href)
{
    //Returns object based on variables in url.  Used to send data to GET
    var vars = {}, hash, hashes = href.slice(href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];
    }
    return vars;
}


(function( $ ){
    $.fn.screenshotPreview = function() {
        //Apply to links to get a preview of the link

        //Config - Set popup's distance from the cursor
        ayb.screenshot={};
        ayb.screenshot.xOffset = 20;
        ayb.screenshot.yOffset = 10;
        ayb.screenshot.showing=false;

        this.hover(function(e)
        {
            if(!ayb.screenshot.showing){
                ayb.screenshot.title = this.title;this.title = "";//Prevent title from being displayed,and save for later to put back    
                var url=getUrlVars(this.href);
                ayb.screenshot.timeoutID=window.setTimeout(function() {
                    ayb.screenshot.showing = true;
                    url.task="getPopup";   //specify task
                    ayb.screenshot.ajax=$.ajax({
                        url:    'index.php',
                        data: url,
                        success: function(data)
                        {
                            //Determine how to display returned data
                            switch (data.type)
                            {
                                case 'contact':var string=contact(data);break;
                                case 'account':var string=account(data);break;
                                case 'user':var string=user(data);break;
                                case 'project':var string=project(data);break;
                                default:var string='Error';
                            }
                            $("body").append('<div id="screenshot">'+((ayb.screenshot.title != '')?'<h3>'+ayb.screenshot.title+'</h3>':null)+string+"</div>");                                 
                            $("#screenshot")
                            .css("top",(e.pageY - ayb.screenshot.yOffset) + "px")
                            .css("left",(e.pageX + ayb.screenshot.xOffset) + "px")
                            .fadeIn("fast");                    
                        },
                    dataType: 'json'
                    });
                },250); //Wait 1/4 of a second before requesting data from server
            }
        },
        function()
        {
            //When not hover
            if (typeof ayb.screenshot.ajax == 'object') {ayb.screenshot.ajax.abort();}
            window.clearTimeout(ayb.screenshot.timeoutID);
            this.title = ayb.screenshot.title;    
            $("#screenshot").remove();
            ayb.screenshot.showing = false;
        });    
        this.mousemove(function(e)
        {
            $("#screenshot").css("top",(e.pageY - ayb.screenshot.yOffset) + "px").css("left",(e.pageX + ayb.screenshot.xOffset) + "px");
        });
    };
})( jQuery );

ayb={}；
$（“a.screenshot”）.screenshotPreview（）；
功能联系人（数据）
{
返回'Name:'+data.firstname+''+data.lastname+''
+'帐户：'+数据.帐户名称+''
+'Name:'+data.firstname+'+data.lastname+''
+（（data.title）？“title:”+data.title+“”：“”）
+'用户名：'+data.username+''
+'密码：'+数据。密码+''
+'通信方法：'+数据.通信方法+''
+（（data.email）？“email:”+data.email+“”：“”）
+（（data.account\u phone）-“account phone:”+显示\u phone（data.account\u phone）+''：）
+（（data.phone）？“直接电话：”+显示电话（data.phone）+''：）
+（（data.mobile_phone）-“mobile phone:”+显示_phone（data.mobile_phone）+''：）
+（（数据.帐户传真）-“帐户传真：”+显示电话（数据.帐户传真）+''：）
+（（data.fax）？“直接传真：”+显示电话（data.fax）+''：）
+（（data.address | | data.location）？“地址：”+data.address+（（data.address&&data.location）？“
”：”））+data.location+“”）
+（（data.email）？“email:”+data.email+“”：“”）
+'';
}
功能帐户（数据）
{
返回'Name:'+data.Name+''
+（（data.phone）？“账户电话：”+显示电话（data.phone）+''：）
+（（data.fax）？“账户传真：”+显示电话（data.fax）+''：）
+（（data.address | | data.location）？“地址：”+data.address+（（data.address&&data.location）？“
”：”））+data.location+“”）
+（（数据。垂直市场）？“一级市场：”+数据。垂直市场+“”：“”）
+（（data.priority）？“priority:”+data.priority+“”：“”）
+'';
}
功能用户（数据）
{
返回'Name:'+data.firstname+''+data.lastname+''
+'用户名：'+data.username+''
+（（data.phone）？“直接电话：”+显示电话（data.phone）+''：）
+（（data.mobile_phone）-“mobile phone:”+显示_phone（data.mobile_phone）+''：）
+（（data.fax）？“直接传真：”+显示电话（data.fax）+''：）
+（（data.email）？“email:”+data.email+“”：“”）
+'';
}
函数getUrlVars（href）
{
//基于url中的变量返回对象。用于发送数据以获取
var vars={}，hash，hashes=href.slice（href.indexOf（'？'）+1.split（'&'）；
for（var i=0；i

一些可能有用的想法。首先是在标记中使用

数据-

属性：

<a href="#" class="screenshot" data-type="user">User Link</a>

CSS:

#屏幕截图。用户{背景：海军蓝；颜色：白色}
#截图。联系人{背景：#444；颜色：白色}

演示：

我使演示保持简单，以允许专注于概念，而不是杂乱无章的代码

(function ($) {

    var shotTemplate = function (data, type) {
        this.shot = {
            start: '<div id="screenshot" class="' + type + '">',
            end: '</div>},'
        };
        this.user = function () { 
            /* not suggesting "data.type" protocol, was just simple for my demo*/
            return '<div class="user_class">' + data.user + '</div>';
        };
        this.contact = function () {
            return '<div class="contact_class">' + data.contact + '</div>';
        };
        this.account= function () {
            return '<div class="account_class">' + data.account + '</div>';
        };

        return this.shot.start + this[type]() + this.shot.end;

    };  



    $.fn.screenshotPreview = function () {
        return this.each(function () {
            var $el = $(this);
            /* isolate screenshot to this instance*/
            var $screenshot;
            $el.hover(function () {
                $.post(url,data,function( response){
                        $screenshot = $(shotTemplate(response, $el.data('type')));
                        $('body').append($screenshot);
                });
            }, function () {
                $screenshot.remove();
            })

        });

    };
})(jQuery);