如果它使用局部变量，我如何在其他地方编写我的侦听器函数？

Question

我是 Javascript 开发的初学者，我必须做经典的待办事项应用程序。它必须是面向对象的，我的程序有两个类：Task 和 Tag。 一个任务包含一些标签。

当用户点击一个标签时，他可以修改它的名字。首先，我确实写了一个匿名回调函数，它正在监听修改表单提交，并且运行良好。但是，我必须创建一个在其他地方声明的命名函数，而不是我现有的侦听器。但是，我需要访问我的对象（已编辑）的一些属性，我完全不知道如何做这样的事情。

这是我的一小部分代码：

  module.Tag = class Tag {
      constructor(name = 'untitled', parent = null) {
          this.name = name;
          this.parentTask = parent;
      }

      //Method which displays the tag name
      display_name() {
        return $('<li>').addClass('tag').text(this.name);      
      }

      //Method which displays the tag
      display() {
        let tag_item = this.display_name();

        let field = $('<input>').prop('type', 'text').prop('value', this.name);
        let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
        let removeButton = $('<button>').addClass('removeButton').text('X');
        let form = $('<form>').append(field).append(button).append(removeButton);
        let in_edit = false;

        tag_item.click((event) => {
          event.stopPropagation();
          event.preventDefault();

          let target = $(event.target);

          if (target.is('li') && !in_edit) {
            tag_item.empty();
            tag_item.append(form);
            in_edit = true;          
          }

          if (target.is('button') && target.prop('type') === 'submit') {
            if(field.val() !== '') {
              this.name = field.val(); 
              module.StorageManager.storeTasks();
            }

            tag_item.empty();
            tag_item.text(this.name);

            field.val(this.name);

            in_edit = false;
          }

          if (target.is('button') && target.hasClass('removeButton')) {
            if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
              tag_item.remove();
              this.removeTagFromParent();

              module.StorageManager.storeTasks();  
            }
          }
       });

       return tag_item;
     }

     //Method which removes the tag from the parent task
     removeTagFromParent() {
       this.parentTask.removeTag(this);
     }
  }; 

我的监听器在 display 方法中，它使用Tag.name 属性和在方法体中创建的一些变量。我看不到如何在其他地方编写此函数，Google 也没有帮助我。

我希望我的问题很清楚，英语不是我的母语。 有什么建议吗？

Answer 1

您可以将您的匿名函数提取为另一个类方法。它是一个事件处理程序，因此为了正确访问已定义的对象，您必须正确绑定它。

以下是修改后的脚本示例：

module.Tag = class Tag {
      constructor(name = 'untitled', parent = null) {
          this.name = name;
          this.parentTask = parent;
      }

      //Method which displays the tag name
      display_name() {
        return $('<li>').addClass('tag').text(this.name);      
      }

      //Method which displays the tag
      display() {
        let tag_item = this.display_name();

        let field = $('<input>').prop('type', 'text').prop('value', this.name);
        let button = $('<button>').addClass('validationButton').prop('type', 'submit').text('✓');
        let removeButton = $('<button>').addClass('removeButton').text('X');
        let form = $('<form>').append(field).append(button).append(removeButton);
        let in_edit = false;

        tag_item.click(this.handleClick.bind(this));  
        // this is where you invoke the function and 
        //bind it to the context of the class

       return tag_item;
     }

     //Method which removes the tag from the parent task
     removeTagFromParent() {
       this.parentTask.removeTag(this);
     }

     // extracted method defined here:
      handleClick(event) {
          let tag_item = this.display_name();
          let field = $('').prop('type', 'text').prop('value', this.name);
          event.stopPropagation();
          event.preventDefault();

          let target = $(event.target);

          if (target.is('li') && !in_edit) {
            tag_item.empty();
            tag_item.append(form);
            in_edit = true;          
          }

          if (target.is('button') && target.prop('type') === 'submit') {
            if(field.val() !== '') {
              this.name = field.val(); 
              module.StorageManager.storeTasks();
            }

            tag_item.empty();
            tag_item.text(this.name);

            field.val(this.name);

            in_edit = false;
          }

          if (target.is('button') && target.hasClass('removeButton')) {
            if(confirm('Voulez-vous vraiment supprimer ce tag ?')) {
              tag_item.remove();
              this.removeTagFromParent();

              module.StorageManager.storeTasks();  
            }
          }
       }
  };