Javascript 如何改进个人jQuery对话框插件

我一直在编写自己的对话系统，以便进行练习，并能够根据需要进行自定义。这就是我所做的

$(function(){
    $.fn.window = function(attr){
    var $self = this;

    if(!attr)
        attr = {};

    $.extend({
        autoOpen:false
    }, attr);

    /**
     * Create the window by updating the current jQuery block
     * And adding the required classes
     */
    this.create= function(){
        // Already created
        if($self.hasClass('window-window'))
            return;

        $self.addClass('window-window');

        // Creating the header and appending the title
        var $windowHeader = $('<div class="window-header"></div>');
        var $title = $self.attr('title');

        $windowHeader.html($title);
        $windowHeader.append('<div class="loading-item loading-item-footer round-loading25" ' +
            'data-loading-item="window" style="display:none"></div>');

        // Wrapping content in a window-content class
        // So the window has the proper format
        $self.children().wrapAll('<div class="window-content"></div>');
        $self.prepend($windowHeader);
    };

    /**
     * Open the window in a blackish div
     * With the events to close it
     */
    this.open = function(){
        // Creating the background
        var $backgroundDiv = $('<div></div>');
        $backgroundDiv.addClass('window-background');

        // Making it take the size of the page
        $backgroundDiv.height($(window).height());
        $backgroundDiv.width($(window).width());

        $self.detach().appendTo($backgroundDiv);

        // The window is hidden by default, showing it
        $self.show();

        $('html').prepend($backgroundDiv);

        // Handling closing the window
        $backgroundDiv.click(function(e){
            var $target = $(e.target);
            if(!$target.hasClass('window-background'))
                return;

            $self.hide();
            $self.detach().appendTo('html');

            $backgroundDiv.remove();
        });
    };

    this.create();

    if(attr.autoOpen){
        this.open();
    }
};
});

$（函数（）{
$.fn.window=函数（attr）{
var$self=这个；
如果（！attr）
attr={}；
$扩展({
自动打开：错误
}，attr）；
/**
*通过更新当前jQuery块来创建窗口
*以及添加所需的类
*/
this.create=function（）{
//已经创建
if（$self.hasClass（'window-window'））
返回；
$self.addClass（'window-window'）；
//创建标题并附加标题
变量$windowHeader=$（''）；
变量$title=$self.attr（'title'）；
$windowHeader.html（$title）；
$windowHeader.append（“”）；
//在窗口内容类中包装内容
//因此窗口具有正确的格式
$self.children（）.wrapAll（“”）；
$self.prepend（$windowHeader）；
};
/**
*把窗户打开，呈黑色
*与事件一起结束它
*/
this.open=函数（）{
//创建背景
变量$backgroundDiv=$（''）；
$backgroundDiv.addClass（'window-background'）；
//使其与页面大小一致
$backgroundDiv.height（$（window.height（））；
$backgroundDiv.width（$（window.width（））；
$self.detach（）.appendTo（$backgroundDiv）；
//默认情况下，窗口是隐藏的，显示它
$self.show（）；
$（'html'）.prepend（$backgroundDiv）；
//处理关闭窗口
$backgroundDiv.单击（函数（e）{
var$target=$（即target）；
if（！$target.hasClass（'window-background'））
返回；
$self.hide（）；
$self.detach（）.appendTo（'html'）；
$backgroundDiv.remove（）；
});
};
这个。create（）；
如果（属性自动打开）{
这个.open（）；
}
};
});

---

现在，我对我在html文档的末尾将窗口从他的本地块中删除这一事实表示怀疑。我想回到他的位置，但我还不知道怎么做。有什么想法吗？

首先，您创建了一个jQuery函数，但您是在document.ready

$（…）

上创建的。您应该只创建它，否则在加载文档之前，该函数将无法用于其他代码

然后，您希望将窗口插入原始元素所在的位置，因为jQuery中有insertBefore和insertAfter。您使用prepend，但这会将其作为$self的第一个元素插入

我敦促您查看jQuery的方法链接，这可能会使您的代码更具可读性。而不是：

// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');

// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());

//创建背景
变量$backgroundDiv=$（''）；
$backgroundDiv.addClass（'window-background'）；
//使其与页面大小一致
$backgroundDiv.height（$（window.height（））；
$backgroundDiv.width（$（window.width（））；

使用

//创建背景
变量$backgroundDiv=$（''）
.addClass（'window-background'）
//使其与页面大小一致
.css({
高度：$（窗口）。高度（），
宽度：$（窗口）。宽度（）
});

比如说

您还可以使用CSS类来存储信息，比如是否单击了某些内容。这可能是好的，但是考虑到您可能想要更改CSS类，并且突然地，您的代码的功能与设计紧密相连。也许使用.data（）会更好，即使您添加了更多的代码来设置元素的样式

您可以使用.wrap获取原始内容并将其放在窗口中。这可能是您一直想要的，但也可以看看哪种方法允许您在不从原始源中删除元素的情况下获取元素。再说一次，除非它对你更有效

---

最后一条建议是，使用共享您的工作代码，这样其他人不仅可以对其发表评论，还可以看到它的实际应用。

为所有人提供JSFIDLE for sameThanks。我会很快把它放到JSFIDLE上。对于用于标记HTML项目的类，我使用一种通常以“action”结尾的类语法。我会将“delete action”作为一个类，并且知道它不会用作设计标记。当您更改对象的类时，它也会被重新绘制。使用.data（key[，value]）会更改数据键属性，该属性与渲染无关，因此效率也更高。

// Creating the background
var $backgroundDiv = $('<div></div>')
  .addClass('window-background')
  // Making it take the size of the page
  .css({
          height:$(window).height(),
          width:$(window).width()
  });