Question

我正在尝试创建一个JavaScript对象，该对象将创建一组DOM元素（具体来说是IMG标签）-四个函数（方法）是对象的一部分，一个构建图标组，三个是事件处理程序：单击，MouseOver和MouseOut。

要正确定义事件处理程序，我需要知道作为对象实例的局部变量的名称，但找不到确定它的方法。

在网页中：

...
var ip = new IconPicker(...)
...  </script> ...

<li><a href="#" onclick="ip.buildIt("daImageBox"); return false;">boB's Icon Picker</a> <div id="daImageBox" class="iconPickBox"  hidden></div> </li>

在js文件中：

function IconPicker(...) { ... }

IconPicker.prototype.imageClicked = function(ctrl) { ... }

IconPicker.prototype.buildIt(divName) {
 ... "<img ... onClick='___.imageClicked(this)' ... />"

在此示例中，___需要用“ ip”填充-但如何确定？???

假设有一个定义了class等的CSS文件。

令人毛骨悚然的部分（如果已经知道窍门，则可能很简单）是所有三个处理程序都需要一个参数，该参数是被单击（或悬停）组件的DOM实例。

这在上面与imageClicked（）调用的'this'参数进行了通信-但是'this'在对象方法内部具有不同的含义，我要抨击的是同一定义中的双重需求：我需要向 this 处理程序方法发送“ this”参数。

当然，确定实例变量的名称是一种俗气的，低调的解决方案-但这可以解决问题。

Answer 1

我建议您创建一个DOM元素而不是图像元素的字符串表示形式，以便您可以使用addEventListener()将click事件绑定到它：

IconPicker.prototype.buildIt = function(){
  this.icon = document.createElement('img');
  this.icon.src = this.url;
  this.icon.id = this.id;
  this.icon.alt = "A icon";
  var this_icon = this;
  this.icon.addEventListener('click', function() {
    this_icon.imageClicked();
  });
}

请参见以下示例：

function IconPicker(msg, url, id) {
  this.clickMessage = msg;
  this.url = url;
  this.id = id;
}

IconPicker.prototype.imageClicked = function() {
  console.log(this.clickMessage);
}

IconPicker.prototype.buildIt = function() {
  this.icon = document.createElement('img');
  this.icon.src = this.url;
  this.icon.id = this.id;
  this.icon.alt = "An icon";
  var this_icon = this;
  this.icon.addEventListener('click', function() {
    this_icon.imageClicked();
  });
}

IconPicker.prototype.addIcon = function(target) {
  target.appendChild(this.icon);
}

var myIcon = new IconPicker("Some click message", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4eN1pqzmrn8pfD-g-LsTDigmkBY22rVSWSjV7n0FC7oILRqiAEw", "Icon 1 id");
myIcon.buildIt();
myIcon.addIcon(document.body);

var myNewIcon = new IconPicker("Some other message", "https://ih1.redbubble.net/image.316142692.7951/ap,550x550,12x12,1,transparent,t.png", "Icon 2 id");
myNewIcon.buildIt();
myNewIcon.addIcon(document.body);

img {
  height: 150px;
  width: 150px;
}

您还可以通过使用ES6 class语法来使此操作更容易/更简洁：

class IconPicker {
  constructor(msg, url, id) {
    this.clickMessage = msg;
    this.url = url;
    this.id = id;
  }

  imageClicked() {
    // access image DOM element that was been clicked using `this.icon` (ie: get id using `this.icon.id`
    console.log(this.icon.id);
    // action to perform when image is clicked
    console.log(this.clickMessage);
  }

  buildIt() {
    this.icon = document.createElement('img');
    this.icon.src = this.url;
    this.icon.id = this.id;
    this.icon.alt = "An icon";
    this.icon.addEventListener('click', _ => this.imageClicked());
  }

  addIcon(target) {
    if(!this.icon) // check preconditions
      throw Error("An icon must be built in order for it to be added");
      
    target.appendChild(this.icon);
  }
}

const myIcon = new IconPicker("Some click message", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4eN1pqzmrn8pfD-g-LsTDigmkBY22rVSWSjV7n0FC7oILRqiAEw", "icon 1 id");
myIcon.buildIt();
myIcon.addIcon(document.body);

const myNewIcon = new IconPicker("Another click message", "https://ih1.redbubble.net/image.316142692.7951/ap,550x550,12x12,1,transparent,t.png", "icon 2 id");
myNewIcon.buildIt();
myNewIcon.addIcon(document.body);

img {
  height: 150px;
  width: 150px;
}

我可以从对象的方法中确定实例变量名称吗？

1 个答案: