实现 JavaScript 手势库 — 封装前端组件：现代开发的利器

2023-09-30 09:28:12

前言

在上一篇文章中，我们已经实现了手势库的大部分功能。然而，我们的代码现在非常杂乱，而且难以维护。为了解决这个问题，我们需要对代码进行封装。

封装手势库

封装手势库有很多种方法。我们这里采用的是模块化的方法。我们将手势库分成几个不同的模块，每个模块负责不同的功能。

// 手势库模块
import { addEventListener } from './event-listener';
import { createElement } from './element';
import { Gesture } from './gesture';

// 添加事件监听器模块
export function addEventListener(element, type, listener) {
  element.addEventListener(type, listener);
}

// 创建元素模块
export function createElement(tag, className) {
  const element = document.createElement(tag);
  element.classList.add(className);
  return element;
}

// 手势模块
export class Gesture {
  constructor(element) {
    this.element = element;
    this.listeners = [];
  }

  addEventListener(type, listener) {
    this.listeners.push({ type, listener });
    addEventListener(this.element, type, listener);
  }

  removeEventListener(type, listener) {
    const index = this.listeners.findIndex(l => l.type === type && l.listener === listener);
    if (index !== -1) {
      this.listeners.splice(index, 1);
      removeEventListener(this.element, type, listener);
    }
  }

  dispatchEvent(event) {
    this.listeners.forEach(l => {
      if (l.type === event.type) {
        l.listener(event);
      }
    });
  }
}

上面的代码只是手势库的一部分。完整的代码可以在GitHub上找到。

使用封装后的手势库

现在我们已经将手势库封装好了，就可以开始使用了。以下是如何使用封装后的手势库来添加手势交互到应用程序中的示例：

import { Gesture } from './gesture-library';

const element = document.getElementById('my-element');
const gesture = new Gesture(element);

gesture.addEventListener('tap', (event) => {
  console.log('The element was tapped.');
});

gesture.addEventListener('swipe', (event) => {
  console.log(`The element was swiped ${event.direction}.`);
});