javascript - 从 Browserify 模块访问 DOM 时出现问题

Question

我有一个 html 文档，其中包含大量 SVG 元素。某些元素需要附加事件处理程序，我想在专用的 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 的原型(prototype)链。

<小时/>

第二个问题是，当 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 是调用该函数的上下文。