fix: 修复one错误，增加一个内置移除所有active中间件

README.md

@@ -1,5 +1,7 @@
 # event-proxy
 
+[![NPM version](https://img.shields.io/npm/v/@systemlight/event-proxy.svg)](https://www.npmjs.com/package/@systemlight/event-proxy)
+
 > Event agent processing library.
 
 ### Usage

package.json

@@ -1,64 +1,64 @@
-{
- "name": "@systemlight/event-proxy",
- "version": "1.1.0",
- "scripts": {
- "lint:prettier": "prettier src/ -w",
- "lint:eslint-check": "eslint src/ --ext .jsx,.js,ts,tsx",
- "lint:eslint": "eslint src/ --ext .jsx,.js,ts,tsx --fix",
- "build:tsc": "tsc -b",
- "build:babel": "babel src/ -d dist/ -s",
- "build:webpack": "webpack --mode production",
- "build:webpack-dev": "webpack --mode development",
- "dev:serve": "webpack serve --mode development"
- },
- "keywords": [
- "on",
- "event proxy",
- "delegate"
- ],
- "description": "Event agent processing library.",
- "main": "dist/main.bundle.js",
- "files": [
- "dist/"
- ],
- "bin": {},
- "author": "SystemLighht",
- "license": "MIT",
- "homepage": "https://github.com/SystemLight/event-proxy#readme",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/SystemLight/event-proxy"
- },
- "bugs": {
- "url": "https://github.com/SystemLight/event-proxy/issues"
- },
- "engines": {
- "node": ">=16.15.0"
- },
- "devDependencies": {
- "@babel/cli": "^7.17.10",
- "@babel/core": "^7.18.5",
- "@babel/eslint-parser": "^7.18.2",
- "@babel/plugin-transform-runtime": "^7.18.5",
- "@babel/preset-env": "^7.18.2",
- "@babel/runtime-corejs3": "^7.18.6",
- "@commitlint/cli": "^17.0.2",
- "@commitlint/config-conventional": "^17.0.2",
- "@typescript-eslint/eslint-plugin": "^5.28.0",
- "@typescript-eslint/parser": "^5.28.0",
- "babel-loader": "^8.2.5",
- "copy-webpack-plugin": "^11.0.0",
- "core-js": "^3.23.3",
- "eslint": "^8.17.0",
- "html-webpack-plugin": "^5.5.0",
- "prettier": "^2.7.0",
- "terser-webpack-plugin": "^5.3.3",
- "thread-loader": "^3.0.4",
- "ts-loader": "^9.3.0",
- "typescript": "^4.7.3",
- "webpack": "^5.73.0",
- "webpack-cli": "^4.10.0",
- "webpack-dev-server": "^4.9.2",
- "webpackbar": "^5.0.2"
- }
-}
+{
+ "name": "@systemlight/event-proxy",
+ "version": "1.1.1",
+ "scripts": {
+ "lint:prettier": "prettier src/ -w",
+ "lint:eslint-check": "eslint src/ --ext .jsx,.js,ts,tsx",
+ "lint:eslint": "eslint src/ --ext .jsx,.js,ts,tsx --fix",
+ "build:tsc": "tsc -b",
+ "build:babel": "babel src/ -d dist/ -s",
+ "build:webpack": "webpack --mode production",
+ "build:webpack-dev": "webpack --mode development",
+ "dev:serve": "webpack serve --mode development"
+ },
+ "keywords": [
+ "on",
+ "event proxy",
+ "delegate"
+ ],
+ "description": "Event agent processing library.",
+ "main": "dist/main.bundle.js",
+ "files": [
+ "dist/"
+ ],
+ "bin": {},
+ "author": "SystemLighht",
+ "license": "MIT",
+ "homepage": "https://github.com/SystemLight/event-proxy#readme",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/SystemLight/event-proxy"
+ },
+ "bugs": {
+ "url": "https://github.com/SystemLight/event-proxy/issues"
+ },
+ "engines": {
+ "node": ">=16.15.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.17.10",
+ "@babel/core": "^7.18.5",
+ "@babel/eslint-parser": "^7.18.2",
+ "@babel/plugin-transform-runtime": "^7.18.5",
+ "@babel/preset-env": "^7.18.2",
+ "@babel/runtime-corejs3": "^7.18.6",
+ "@commitlint/cli": "^17.0.2",
+ "@commitlint/config-conventional": "^17.0.2",
+ "@typescript-eslint/eslint-plugin": "^5.28.0",
+ "@typescript-eslint/parser": "^5.28.0",
+ "babel-loader": "^8.2.5",
+ "copy-webpack-plugin": "^11.0.0",
+ "core-js": "^3.23.3",
+ "eslint": "^8.17.0",
+ "html-webpack-plugin": "^5.5.0",
+ "prettier": "^2.7.0",
+ "terser-webpack-plugin": "^5.3.3",
+ "thread-loader": "^3.0.4",
+ "ts-loader": "^9.3.0",
+ "typescript": "^4.7.3",
+ "webpack": "^5.73.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.9.2",
+ "webpackbar": "^5.0.2"
+ }
+}

src/main.js

@@ -3,30 +3,35 @@ function MiddlewareNode(callback) {
  this.callback = callback
 }
 
-MiddlewareNode.prototype.next = function (e) {
+MiddlewareNode.prototype.next = function (e, proxyThis) {
+ if (!proxyThis) {
+ proxyThis = this
+ }
  if (this.callback) {
  if (this.nextNode) {
- this.callback(e, () => this.nextNode.next(e))
+ this.callback.call(proxyThis, e, () => this.nextNode.next(e))
  } else {
- this.callback(e)
+ this.callback.call(proxyThis, e)
  }
  }
 }
 
 /**
  * 事件代理对象
- * @param event - DOM事件
+ * @param eventName - DOM事件
  * @param proxySelector - 代理事件的DOM节点选择器，不填或者null默认事件绑定到body
  * @param targetSelector - 触发事件的DOM节点的选择器
  * @constructor
  */
-function EventProxy(event, proxySelector, targetSelector) {
+function EventProxy(eventName, proxySelector, targetSelector) {
  if (!targetSelector) {
  targetSelector = proxySelector
  proxySelector = null
  }
 
- this._event = event
+ this.eventName = eventName
+ this.proxySelector = proxySelector
+ this.targetSelector = targetSelector
 
  this.headNode = new MiddlewareNode()
  this._nextNode = this.headNode
@@ -35,10 +40,10 @@ function EventProxy(event, proxySelector, targetSelector) {
  this._callback = function (e) {
  let triggerDom = e.target
  while (triggerDom !== this) {
- if (triggerDom.matches(targetSelector)) {
+ if (triggerDom.matches(that.targetSelector)) {
  e.proxyDom = this
  e.triggerDom = triggerDom
- that.headNode.next(e)
+ that.headNode.next(e, that)
  }
  triggerDom = triggerDom.parentElement
  }
@@ -67,11 +72,12 @@ EventProxy.prototype.use = function (callback) {
  * @param callback - 事件触发回调函数
  */
 EventProxy.prototype.on = function (callback) {
+ this.off()
  this.use(function (e, next) {
  callback(e)
  next()
  })
- this._dom.addEventListener(this._event, this._callback, true)
+ this._dom.addEventListener(this.eventName, this._callback, true)
  return this
 }
 
@@ -82,14 +88,13 @@ EventProxy.prototype.on = function (callback) {
 EventProxy.prototype.one = function (callback) {
  this.on(callback)
  this.use(() => this.off())
- this._dom.addEventListener(this._event, this._callback)
 }
 
 /**
  * 结束监听事件
  */
 EventProxy.prototype.off = function () {
- this._dom.removeEventListener(this._event, this._callback, true)
+ this._dom.removeEventListener(this.eventName, this._callback, true)
 }
 
 /**
@@ -102,6 +107,21 @@ EventProxy.prototype.destroy = function () {
  this._callback = null
 }
 
-export default function $e(event, proxySelector, targetSelector) {
- return new EventProxy(event, proxySelector, targetSelector)
+/**
+ *
+ * @param {string} eventName
+ * @param {String?} proxySelector
+ * @param {String?} targetSelector
+ * @return {EventProxy}
+ */
+const $e = function (eventName, proxySelector, targetSelector) {
+ return new EventProxy(eventName, proxySelector, targetSelector)
+}
+
+$e.removeActiveMiddleware = function (e, next) {
+ document.querySelectorAll(this.targetSelector).forEach((el) => {
+ el.classList.remove('active')
+ })
+ next()
 }
+export default $e