在面向对象的javascript中将函数作为参数传递

Question

我对此很陌生，这反映在我放置标题的方式上。

也许下面的例子可以更好地说明我的问题。

我有一个名为模型的对象。

var Modal = new function(){
    this.id = 'modal_id';
    this.title = 'Modal title';
    this.content = 'Modal content';
    this.display = function(){
        return '<div class="popup">' + this.title + ' ' + this.content + '<br><button id="button"></div>';
    };
}

这个对象是这样调用的，例如：

Modal.title = 'My New title';
Modal.content = 'My New content';
Modal.display();

但是假设我想为按钮设置一个事件来触发不同的操作，当单击按钮时调用对象时如何定义函数？

$('#button').on('click', function(){
    // different action here
});

Answer 1

您应该做两件事来使这项工作达到最佳效果。

• 传入要分配的函数

• 返回一个真正的 DOM 元素，而不是用字符串构建 HTML。

  var Modal = function(onClickHandler){
    this.id = 'modal_id';
    this.title = 'Modal title';
    this.content = 'Modal content';
    this.display = function(){
        var div = document.createElement("div");
        div.className = "popup";
        div.appendChild(document.createTextNode(this.title));
        div.appendChild(document.createTextNode(" "));
        div.appendChild(document.createTextNode(this.content));
        div.appendChild(document.createElement("br");
  
        var button = document.createElement("button");
        // Assign a unique ID here if you need.
  
        // You could also use addEventListener as well
        button.onclick = onClickHandler;
        button.appendChild(document.createTextNode("CLICK!"));
  
  
        div.appendChild(button);
        return div;
    };
  }
  
  Modal.prototype.close = function(){
    console.log("Close it");
    console.log(this);
  }
  
  
  var newDiv = new Modal(function() {
    alert("I was clicked");
  });