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

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

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

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();  
            }
          }
       }
  };

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

1 个答案: