如何从 javascript 类方法返回一个值？

Question

我正在尝试根据用户单击“删除”还是“取消”从自定义弹出类返回真或假。

我创建了 popup 类和一个 init 方法来显示弹出窗口。 init 方法只是一个模板字符串，用于设置弹出窗口样式和添加按钮。我创建了一个 getResult() 方法并向取消和删除按钮添加了一些单击事件侦听器。在我的 app.js 文件中，我实例化了一个弹出类并调用 getResult() 方法并尝试将返回值存储在变量“decision”中。

class Popup {
    constructor(title, message){
        this.title = title;
        this.message = message;
        this.container = document.querySelector('body');
    }

init(){
    const popup = `
        <div class="popup-wrapper">
            <div class="popup bg-white p-1">
                <div class="popup-close">X</div>
                <div class="popup-content ">
                    <h2 class="">${this.title}</h2>
                    <p class="p-1 my-2">${this.message}</p>
                    <div class="dialogue_buttons my-1">
                        <button class="btn popup-no" onClick="">Cancel</button>
                        <button class="btn btn-danger my-1 popup-yes" onClick="">Start Delete</button>
                    </div>
                </div>
            </div>
        </div>  
    `;
    this.container.innerHTML += popup;
}

getResult(){
    document.querySelector('.popup-no').addEventListener('click', () => {
        console.log('no');
        return false;  
    })     
    document.querySelector('.popup-yes').addEventListener('click', () => {
        console.log('yes');
        return true;  
    })     
}

}

export default Popup

下面是我的 app.js 文件，我在其中设置了弹出窗口。

 experienceTable && experienceTable.addEventListener('click', async e => {
  const id = e.target.parentElement.parentElement.getAttribute('data-id');
  if (e.target.tagName === 'BUTTON') {
    console.log(id);
    const confirmDelete = new Popup(
      'Delete', 
      'This will permanently delete this experience record.',
      ()=>db.deleteExperience(id),
      id
    );
    confirmDelete.init();
    const decision = await confirmDelete.getResult();
    console.log(decision);
  }
})

在我的 app.js 文件中，我实例化了一个新的 Popup 并调用了 init 方法。弹出窗口在我的浏览器中正确显示。当我单击取消时，它会按预期控制台记录“否”。当我单击删除时，控制台按预期记录“是”。但是，当我控制台记录变量决策时，我什么也得不到。我希望决定是真还是假，具体取决于用户单击的按钮。

Answer 1

我相信您的 getResult 方法当前实际上并没有返回任何内容，因为返回语句当前仅在回调的范围内，然后它们就停留在那个级别。

getResult(){
  let result = false;
  document.querySelector('.popup-no').addEventListener('click', () => {
    console.log('no');
  })     
  document.querySelector('.popup-yes').addEventListener('click', () => {
    console.log('yes');
    result = true;
  })
  return result;     
}

因此，您在这里创建了一个变量，然后在回调中为该变量赋值，然后返回该结果。

Answer 2

我可以看到您在getResult 函数中附加了按钮单击事件侦听器。 这种方法的副作用是，当您调用 getResults 方法时，单击事件列表会一次又一次地附加。

我稍微改进了你的代码并附加了回调参数，以防你想在用户是/否响应之后做任何事情。

我在init 方法中附加了事件监听器。现在，您可以显式调用getResults 方法或传递回调，如果您想在响应时自动执行。

class Popup {

  constructor(title, message, callback) {
    this.title = title;
    this.message = message;
    this.callback = callback;
    this.container = document.querySelector('body');
    this.result = '';
  }

  init() {
    const popup = `
        <div class="popup-wrapper">
            <div class="popup bg-white p-1">
                <div class="popup-close">X</div>
                <div class="popup-content ">
                    <h2 class="">${this.title}</h2>
                    <p class="p-1 my-2">${this.message}</p>
                    <div class="dialogue_buttons my-1">
                        <button class="btn popup-no" >Cancel</button>
                        <button class="btn btn-danger my-1 popup-yes" >Start Delete</button>
                    </div>
                </div>
            </div>
        </div>  
    `;
    this.container.innerHTML += popup;

    this.container.querySelector('.popup-no').addEventListener('click', () => this.cancelListner());
    this.container.querySelector('.popup-yes').addEventListener('click', () => this.startListner());

  }

  cancelListner(event) {
    this.result = 'no'
    if (this.callback !== undefined) {
      this.callback(this.result);
    }
  }

  startListner() {
    this.result  = 'yes';
    if (this.callback !== undefined) {
      this.callback(this.result);
    }
  }

  getResult() {
    return this.result;
  }

}

希望这会有所帮助！