从 Browserify 模块访问 DOM 时出现问题
Problems Accessing DOM from Browserify Module
我有一个 html 文档,其中包含大量 SVG 元素。某些元素需要附加事件处理程序,我想在专用的 browserify 模块中执行此操作(这是一个编程游戏 class)。我的 HTML 标记通常如下所示:
<!-- Health Stuff -->
<g id="Health_Plus">
<rect x='72' y='184' width='20' height='20' fill-opacity='0' />
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="82.223" y1="186.167" x2="82.223" y2="202.167"/>
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="194.167" x2="74.723" y2="194.167"/>
</g>
<g id="Health_Minus">
<rect x='74.723' y='210' width='15' height='10' fill-opacity='0'/>
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="213.833" x2="74.723" y2="213.833"/>
</g>
<g id="Health_Icon">
<line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="61.504" y1="128.726" x2="61.504" y2="177.716"/>
<line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="37.01" y1="153.221" x2="86" y2="153.221"/>
</g>
<g>
<text id='Health_Text' x='40' y='210' font='sans-serif' font-size='25'>10</text>
</g>
我的模块代码如下所示:
module.exports = (function ()
{
// function StatsManager = {};
function StatsManager ()
{
//////////////////////////////////////
// Value for outputting debug code. //
//////////////////////////////////////
this.DEBUG = true;
//////////////////////////////////////
// Default values for start of game //
//////////////////////////////////////
this.startingAttackVal = 5;
this.startingDefenseVal = 5;
this.startingHealthVal = 5;
this.attackCap = 10;
this.defenseCap = 10;
this.healthCap = 10;
this.attackFloor = 1;
this.defenseFloor = 1;
this.healthFloor = 1;
///////////////////
// Actual values //
///////////////////
this.attackVal = this.startingAttackVal;
this.defenseVal = this.startingDefenseVal;
this.healthVal = this.startingHealthVal;
//////////////////////////////////////////////////////
// Hooks to all the UI buttons in the stats manager //
//////////////////////////////////////////////////////
this.attackPlus = document.getElementById('Attack_Plus');
this.attackPlus.addEventListener('click', self.AttackPlus);
this.attackMinus = document.getElementById('Attack_Minus');
this.attackMinus.addEventListener('click', this.AttackMinus);
this.defensePlus = document.getElementById('Defense_Plus');
this.defensePlus.addEventListener('click', this.DefensePlus);
this.defenseMinus = document.getElementById('Defense_Minus');
this.defenseMinus.addEventListener('click', this.DefenseMinus);
this.healthPlus = document.getElementById('Health_Plus');
this.healthPlus.addEventListener('click', this.HealthPlus);
this.healthMinus = document.getElementById('Health_Minus');
this.healthMinus.addEventListener('click', this.HealthMinus);
this.specialUp = document.getElementById('Special_Up');
this.specialUp.addEventListener('click', this.SpecialUp);
this.specialDown = document.getElementById('Special_Down');
this.specialDown.addEventListener('click', this.SpecialDown);
//////////////////////////////
// Assignment of the values //
//////////////////////////////
this.attackText = document.getElementById('Attack_Text');
this.attackText.textContent = this.attackVal;
this.defenseText = document.getElementById('Defense_Text');
this.defenseText.textContent = this.defenseVal;
this.healthText = document.getElementById('Health_Text');
this.healthText.textContent = this.healthVal;
}
StatsManager.prototype.AttackPlus = function()
{
if (this.DEBUG) { console.log("Attack +1 Clicked"); }
if (this.attackVal < this.attackCap)
{
this.attackVal++;
this.attackText.textContent = this.attackVal;
}
}
StatsManager.prototype.AttackMinus = function()
{
if (this.DEBUG) { console.log("Attack -1 Clicked"); }
if (this.attackVal > this.attackFloor)
{
this.attackVal--;
this.attackText.textContent = this.attackVal;
}
}
StatsManager.prototype.DefensePlus = function()
{
if (this.DEBUG) { console.log("Defense +1 Clicked") }
if (this.defenseVal < this.defenseCap)
{
this.defenseVal++;
this.defenseText.textContent = this.defenseVal;
}
}
StatsManager.prototype.DefenseMinus = function()
{
if (this.DEBUG) { console.log("Defense -1 Clicked") }
if (this.defenseVal > this.defenseFloor)
{
this.defenseVal--;
this.defenseText.textContent = this.defenseVal;
}
}
StatsManager.prototype.HealthPlus = function()
{
if (this.DEBUG) { console.log("Health +1 Clicked"); }
if (this.healthVal < this.healthCap)
{
this.healthVal++;
this.healthText.textContent = this.healthVal;
}
}
StatsManager.prototype.HealthMinus = function()
{
if (this.DEBUG) { console.log("Health -1 Clicked."); }
if (this.healthVal > this.healthFloor)
{
this.healthVal--;
this.healthText.textContent = this.healthVal;
}
}
StatsManager.prototype.SpecialUp = function()
{
if (this.DEBUG) { console.log("Special Up Clicked.") }
}
StatsManager.prototype.SpecialDown = function()
{
if (this.DEBUG) { console.log("Special Down Clicked.") }
}
StatsManager.prototype.IncreaseAttackCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Attack Cap") }
var amt = val || 1;
this.attackCap += amt;
}
StatsManager.prototype.IncreaseDefenseCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Defense Cap") }
var amt = val || 1;
this.defenseCap += amt;
}
StatsManager.prototype.IncreaseHealthCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Health Cap") }
var amt = val || 1;
this.healthCap += amt;
}
return StatsManager();
})();
我通过调用
在 test.js 文件中需要我的 browserify 模块
StatsManager = require('./StatsManager.js');
问题是当我尝试通过单击我的 SVG 按钮来测试我的事件处理程序时,没有任何反应。没有控制台消息,什么都没有。但是,文本框的所有值都更改为 5(不同于 HTML 标记默认值 10)。所以这意味着我的模块必须访问 DOM 才能更改这些值,但由于某种原因没有附加事件处理程序。我和我的教授都无法弄清楚原因,任何帮助将不胜感激。
根据您对 StatsManager.prototype.*
的分配,我猜测您实际上想要 return StatsManager
的一个实例
return new StatsManager();
否则代码中的 this
将是全局范围的 (window
)。
我认为您的点击回调函数中的 this
也是错误的。
你的代码现在是这样的,当你到达这样的行时:
this.specialDown.addEventListener('click', this.SpecialDown);
this
是 window
并且没有 SpecialDown
函数。使用 new StatsManager()
将导致相同的功能成为 运行,但 this
设置为新创建的对象实例,它继承自 StatsManager 的原型链。
第二个问题是,当 addEventListener()
执行您的回调函数之一时,这些函数中的 this
上下文将是被单击的 HTML DOM 元素, 并且 MouseEvent
参数将传递给该函数。您需要做一些事情来在闭包中捕获 StatsManager
实例或调用 StatsManager
实例上的函数。
例如:
var self = this;
this.defensePlus.addEventListener('click', function(mouseEvent) {
self.DefensePlus(mouseEvent);
});
或者根据浏览器支持需求,您可以像这样使用 [Function.prototype.bind()][1]
:
this.defensePlus.addEventListener('click', this.DefensePlus.bind(this));
与许多其他语言不同,this
不是拥有函数的对象,this
是调用函数的上下文。
我有一个 html 文档,其中包含大量 SVG 元素。某些元素需要附加事件处理程序,我想在专用的 browserify 模块中执行此操作(这是一个编程游戏 class)。我的 HTML 标记通常如下所示:
<!-- Health Stuff -->
<g id="Health_Plus">
<rect x='72' y='184' width='20' height='20' fill-opacity='0' />
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="82.223" y1="186.167" x2="82.223" y2="202.167"/>
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="194.167" x2="74.723" y2="194.167"/>
</g>
<g id="Health_Minus">
<rect x='74.723' y='210' width='15' height='10' fill-opacity='0'/>
<line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="89.723" y1="213.833" x2="74.723" y2="213.833"/>
</g>
<g id="Health_Icon">
<line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="61.504" y1="128.726" x2="61.504" y2="177.716"/>
<line fill="none" stroke="#EC1C24" stroke-width="11" stroke-miterlimit="10" x1="37.01" y1="153.221" x2="86" y2="153.221"/>
</g>
<g>
<text id='Health_Text' x='40' y='210' font='sans-serif' font-size='25'>10</text>
</g>
我的模块代码如下所示:
module.exports = (function ()
{
// function StatsManager = {};
function StatsManager ()
{
//////////////////////////////////////
// Value for outputting debug code. //
//////////////////////////////////////
this.DEBUG = true;
//////////////////////////////////////
// Default values for start of game //
//////////////////////////////////////
this.startingAttackVal = 5;
this.startingDefenseVal = 5;
this.startingHealthVal = 5;
this.attackCap = 10;
this.defenseCap = 10;
this.healthCap = 10;
this.attackFloor = 1;
this.defenseFloor = 1;
this.healthFloor = 1;
///////////////////
// Actual values //
///////////////////
this.attackVal = this.startingAttackVal;
this.defenseVal = this.startingDefenseVal;
this.healthVal = this.startingHealthVal;
//////////////////////////////////////////////////////
// Hooks to all the UI buttons in the stats manager //
//////////////////////////////////////////////////////
this.attackPlus = document.getElementById('Attack_Plus');
this.attackPlus.addEventListener('click', self.AttackPlus);
this.attackMinus = document.getElementById('Attack_Minus');
this.attackMinus.addEventListener('click', this.AttackMinus);
this.defensePlus = document.getElementById('Defense_Plus');
this.defensePlus.addEventListener('click', this.DefensePlus);
this.defenseMinus = document.getElementById('Defense_Minus');
this.defenseMinus.addEventListener('click', this.DefenseMinus);
this.healthPlus = document.getElementById('Health_Plus');
this.healthPlus.addEventListener('click', this.HealthPlus);
this.healthMinus = document.getElementById('Health_Minus');
this.healthMinus.addEventListener('click', this.HealthMinus);
this.specialUp = document.getElementById('Special_Up');
this.specialUp.addEventListener('click', this.SpecialUp);
this.specialDown = document.getElementById('Special_Down');
this.specialDown.addEventListener('click', this.SpecialDown);
//////////////////////////////
// Assignment of the values //
//////////////////////////////
this.attackText = document.getElementById('Attack_Text');
this.attackText.textContent = this.attackVal;
this.defenseText = document.getElementById('Defense_Text');
this.defenseText.textContent = this.defenseVal;
this.healthText = document.getElementById('Health_Text');
this.healthText.textContent = this.healthVal;
}
StatsManager.prototype.AttackPlus = function()
{
if (this.DEBUG) { console.log("Attack +1 Clicked"); }
if (this.attackVal < this.attackCap)
{
this.attackVal++;
this.attackText.textContent = this.attackVal;
}
}
StatsManager.prototype.AttackMinus = function()
{
if (this.DEBUG) { console.log("Attack -1 Clicked"); }
if (this.attackVal > this.attackFloor)
{
this.attackVal--;
this.attackText.textContent = this.attackVal;
}
}
StatsManager.prototype.DefensePlus = function()
{
if (this.DEBUG) { console.log("Defense +1 Clicked") }
if (this.defenseVal < this.defenseCap)
{
this.defenseVal++;
this.defenseText.textContent = this.defenseVal;
}
}
StatsManager.prototype.DefenseMinus = function()
{
if (this.DEBUG) { console.log("Defense -1 Clicked") }
if (this.defenseVal > this.defenseFloor)
{
this.defenseVal--;
this.defenseText.textContent = this.defenseVal;
}
}
StatsManager.prototype.HealthPlus = function()
{
if (this.DEBUG) { console.log("Health +1 Clicked"); }
if (this.healthVal < this.healthCap)
{
this.healthVal++;
this.healthText.textContent = this.healthVal;
}
}
StatsManager.prototype.HealthMinus = function()
{
if (this.DEBUG) { console.log("Health -1 Clicked."); }
if (this.healthVal > this.healthFloor)
{
this.healthVal--;
this.healthText.textContent = this.healthVal;
}
}
StatsManager.prototype.SpecialUp = function()
{
if (this.DEBUG) { console.log("Special Up Clicked.") }
}
StatsManager.prototype.SpecialDown = function()
{
if (this.DEBUG) { console.log("Special Down Clicked.") }
}
StatsManager.prototype.IncreaseAttackCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Attack Cap") }
var amt = val || 1;
this.attackCap += amt;
}
StatsManager.prototype.IncreaseDefenseCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Defense Cap") }
var amt = val || 1;
this.defenseCap += amt;
}
StatsManager.prototype.IncreaseHealthCap = function(val)
{
if (this.DEBUG) { console.log("Increasing Health Cap") }
var amt = val || 1;
this.healthCap += amt;
}
return StatsManager();
})();
我通过调用
在 test.js 文件中需要我的 browserify 模块StatsManager = require('./StatsManager.js');
问题是当我尝试通过单击我的 SVG 按钮来测试我的事件处理程序时,没有任何反应。没有控制台消息,什么都没有。但是,文本框的所有值都更改为 5(不同于 HTML 标记默认值 10)。所以这意味着我的模块必须访问 DOM 才能更改这些值,但由于某种原因没有附加事件处理程序。我和我的教授都无法弄清楚原因,任何帮助将不胜感激。
根据您对 StatsManager.prototype.*
的分配,我猜测您实际上想要 return StatsManager
return new StatsManager();
否则代码中的 this
将是全局范围的 (window
)。
我认为您的点击回调函数中的 this
也是错误的。
你的代码现在是这样的,当你到达这样的行时:
this.specialDown.addEventListener('click', this.SpecialDown);
this
是 window
并且没有 SpecialDown
函数。使用 new StatsManager()
将导致相同的功能成为 运行,但 this
设置为新创建的对象实例,它继承自 StatsManager 的原型链。
第二个问题是,当 addEventListener()
执行您的回调函数之一时,这些函数中的 this
上下文将是被单击的 HTML DOM 元素, 并且 MouseEvent
参数将传递给该函数。您需要做一些事情来在闭包中捕获 StatsManager
实例或调用 StatsManager
实例上的函数。
例如:
var self = this;
this.defensePlus.addEventListener('click', function(mouseEvent) {
self.DefensePlus(mouseEvent);
});
或者根据浏览器支持需求,您可以像这样使用 [Function.prototype.bind()][1]
:
this.defensePlus.addEventListener('click', this.DefensePlus.bind(this));
与许多其他语言不同,this
不是拥有函数的对象,this
是调用函数的上下文。