Question

我有一个包含大量SVG元素的html文档。某些元素需要附加事件处理程序，我想在专用的browserify模块中执行它（它是一个编程类的游戏）。我的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来更改这些值，但由于某种原因没有附加事件处理程序。我和我的教授都不知道为什么，任何帮助都会受到高度赞赏。

Answer 1

根据您对StatsManager.prototype.*的分配，我猜你确实想要返回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是调用该函数的上下文。

从Browserify模块访问DOM的问题

1 个答案: