Question

我正在尝试制作一个简单的页内弹出窗口，如下所示：

var test = new popObject({}); //JSON options

我遇到了麻烦，因为当我连续创建两个，并在第一个上调用show（）时，第二个总是显示。两者都是创建的，但它们并不是以某种方式分开，尽管被称为new。我在这做错了什么？我已经包含了我的代码，但是我已经删除了无关紧要的函数。

function popObject(options) {   
//functions

show = function() {
    console.log(boxselector);
    jQuery(boxselector).css("display", "block");
    return jQuery(boxselector);
}

var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}

//public functions

this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;

//constants

name = options.name; //name should never be changed.
boxselector = ".boxcontainer[name=" + options.name + "]";
boxbodyselector = ".boxbody[name=" + options.name + "]";
boxtitleselector = ".boxcontainer[name=" + options.name + "]"
boxboxselector = ".boxbox[name=" + options.name + "]"
title = options.title;
content = options.content;  
width = options.width;
height = options.height;

this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;

//variables

popupHtml = ...

//init code

jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}

Answer 1

这是因为您在全局范围内声明很多变量。请尝试使用以下代码：

function popObject(options) {   
//functions

this.show = function() {
    console.log(boxselector);
    jQuery(boxselector).css("display", "block");
    return jQuery(boxselector);
}

var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}

//public functions

this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;

//constants

var name = options.name; //name should never be changed.
var boxselector = ".boxcontainer[name=" + options.name + "]";
var boxbodyselector = ".boxbody[name=" + options.name + "]";
var boxtitleselector = ".boxcontainer[name=" + options.name + "]"
var boxboxselector = ".boxbox[name=" + options.name + "]"
var title = options.title;
var content = options.content;  
var width = options.width;
var height = options.height;

this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;

//variables

var popupHtml = ...

//init code

jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}

请注意以前不存在的所有var。这将它们定义为函数的本地，因此对象是本地的（并且基本上是私有的...使用this.而不是var来创建公共成员。）

任何未使用var或this.声明的内容都被视为全局内容。因此，当您调用show()时，它使用全局show，它引用了稍后创建的对象。

Answer 2

什么是boxselector？如果它是一个通用选择器，那么它将选择页面上的所有元素，无论它是否在该唯一对象的内部。

Answer 3

在函数定义中声明没有var或this的内容时，例如

boxselector = ".boxcontainer[name=" + options.name + "]";

它在全局命名空间中创建它（将它附加到window）

尝试将此行更改为

var boxselector = ".boxcontainer[name=" + options.name + "]";

无法制作独特的javascript对象。这段代码出了什么问题？

3 个答案: