javascript - 我将如何通过嵌套函数将元素作为参数传递？

Question

我正在尝试将选择器作为参数通过 Slider 传递给对象嵌套函数。

我希望 istouchEnd 可以获取 .storage1 作为 Slider 的参数，但是 this.storage从不从 Slider 函数接收参数。

有没有什么方法可以通过 Slider 函数将 span 标记作为参数传递(或获取任何内容)？

'use strict';

const blueMethods = {
  count: 1,
  istouchStart(e) {
    this.coordX = e.touches[0].clientX;
    return this.coordX;
  },
  istouchMove(e) {
    let drag = e.touches[0].clientX;
    let dist = Math.sqrt(drag + this.coordX);
  },
  istouchEnd(e) {
    let dist = e.changedTouches[0].clientX - this.coordX; 
    $(this.storage).text(dist);
  }
}
function Slider(target, storage) {
  Slider.target = target;
  Slider.storage = storage;
  $(Slider.target).stop(true, true).on({
  touchstart:blueMethods.istouchStart, 
  touchmove:blueMethods.istouchMove,
  touchend:blueMethods.istouchEnd
  });
};

const box1 = Slider('.page1', '.storage1');
box1;

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 70%;
  float: left;
}

.page1 {
  width: 48vw;
  height: 80vh;
  background-color: lightblue;
  float: left;
}

.page2 {
  width: 48vw;
  height: 80vh;
  background-color: orange;
  float: left;
}

<div class="box">
  <div class="page1"></div>
  <div class="page2"></div>
</div>
<div class="textbox">
  <span class="storage1"></span>
  <span class="storage2" data-count></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

当您设置事件处理程序(它们是某个对象中的方法)并希望传递一些参数并为它们提供访问权 this 时，您可以通过以下方式创建处理程序 - 例如对于函数 istouchEnd

  istouchEnd(storage) {
    return (e) => {
      let dist = e.changedTouches[0].clientX - this.coordX; 
      $(storage).text(dist);
    }
  }

如您所见，istouchEnd 不是处理程序，但它创建并返回处理程序(使用 arrow function )，它可以访问 this.coordX 和存储参数。您可以通过将 touchend:blueMethods.istouchEnd 更改为

来使用它

touchend:blueMethods.istouchEnd(storage)

'use strict';
const blueMethods = {
  count: 1,
  istouchStart() {
    return (e) => {
      this.coordX = e.touches[0].clientX;
      return this.coordX;
    }
  },
  istouchMove() {
    return (e) => {
      let drag = e.touches[0].clientX;
      let dist = Math.sqrt(drag + this.coordX);
    }
  },
  istouchEnd(storage) {
    return (e) => {
      let dist = e.changedTouches[0].clientX - this.coordX; 
      $(storage).text(dist);
    }
  }
}
function Slider(target, storage) {
  Slider.target = target;
  Slider.storage = storage;
  $(Slider.target).stop(true, true).on({
  touchstart:blueMethods.istouchStart(), 
  touchmove:blueMethods.istouchMove(),
  touchend:blueMethods.istouchEnd(storage)
  });
};

const box1 = Slider('.page1', '.storage1');
box1;

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 70%;
  float: left;
}

.page1 {
  width: 48vw;
  height: 80vh;
  background-color: lightblue;
  float: left;
}

.page2 {
  width: 48vw;
  height: 80vh;
  background-color: orange;
  float: left;
}

<div class="box">
  <div class="page1"></div>
  <div class="page2"></div>
</div>
<div class="textbox">
  <span class="storage1"></span>
  <span class="storage2" data-count></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>