Javascript 谁能给我解释一下道场里到底发生了什么；s''；dojo/on"；模块？

我开始摆弄Dojo.js，遇到了一件我不明白的事情

我正在尝试创建自己的小部件。这个小部件非常简单——它只需查询页面上的所有图像，并让它们监听“点击”事件。每次单击将使小部件的计数器属性增加1

以下是我对它的看法：

define(
    [                   
        "dojo/_base/declare",
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                query("img").on("click", this.onClick);
            }

        });
    }
);

小部件初始化，我确实可以单击图像，但控制台总是返回未定义的。

---

似乎我缺少了关于dojo/on模块如何工作的一些核心方面。有人能给我解释一下我的代码中到底发生了什么吗？

在你的例子中，

这个

指向

图像

，属性

计数器

是

未定义的

。要实现这一点，可以使用

dojo/base/lang

模块

define(
    [                   
        "dojo/_base/declare",
        "dojo/_base/lang", //add this
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, lang, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                //lang.hitch will return a new function with scope changed
                query("img").on("click", lang.hitch(this, this.onClick));
            }

        });
    }
);

lang.hitch

将返回一个范围已更改的新函数，因此当您使用

此

时，它将指向您要传递的内容

例如，通过在html中声明事件，可以避免使用

lang

<img src="myImage.jpg" data-dojo-attach-event="onClick: onClick"/>  

---

您可以检查这个答案，它不是关于dojo的，而是关于Javascript的。

作为旁注，当img包含在小部件中时，我建议使用dojo附加点而不是查询（这里不是这个例子，但值得一提），这很有趣！这是为什么？

query（）

需要一个额外的操作，而

附加点是在小部件发布时免费创建的。请注意：如果浏览器目标兼容ES5，我相信lang.hitch可以被native.bind（）替换。@Radex我甚至给出了如何使用
bind
执行此操作的示例，你读了整个答案了吗？注意：据我所知，你的小部件没有任何可见的UI（因为图像在页面的任何地方）。在这种情况下，您可以删除
\u TemplatedMixin
，从而删除您的
myProject/folder/mywidgetemplate.html
模板文件以及属性
templateString:template，
您是正确的，感谢您指出这一点！（小部件实际上使用了自己的UI，我只是去掉了部分代码以使问题更简单。但是，我忘了删除_TemplatedMixin。但是提醒总是很好的，以防万一，所以谢谢！）
query("img").on("click", this.onClick.bind(this));