如何获取一个 dom 节点上绑定的所有事件#

1
// 使用缓存方案来解决
2
const cache = {};
3
let id = 0;
4
const getLatestReqKey = () => {
5
  const keys = Object.keys(cache);
6
  if (!keys.length) return 0;
7
  return Math.max(...keys);
8
};
9
const cacheReq = (q) => {
10
  const c_id = ++id;
11
  return req(q).then((res) => {
12
    if (c_id > +getLatestReqKey()) {
13
      cache[c_id] = res;
14
      msg = res;
15
    }
16
  });
17
};
18
const p1_c = cacheReq(1);
19
const p2_c = cacheReq(2);
20
Promise.all([p1_c, p2_c]).then(() => {
21
  console.log(msg);
22
});

1
// 标记过期函数方式
2
let cleanup;
3
const reqExpired = (q) => {
4
  let expired = false;
5
  cleanup && cleanup();
6
  cleanup = () => {
7
    expired = true;
8
  };
9
  return req(q).then((res) => {
10
    if (!expired) {
11
      msg = res;
12
    }
13
  });
14
};
15
const p1_e = reqExpired(1);
16
const p2_e = reqExpired(2);
17
Promise.all([p1_e, p2_e]).then(() => {
18
  console.log(msg);
19
});

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
  </head>
8
  <body>
9
    <button id="start">start</button>
10
    <button id="cancel">cancel</button>
11
    <script>
12
      class CancelToken {
13
        constructor(cancelFn) {
14
          this.promise = new Promise((resolve, reject) => {
15
            cancelFn(() => {
16
              setTimeout(console.log, 0, "delay cancelled");
17
              resolve();
18
            });
19
          });
20
        }
21
      }
22
      const startButton = document.querySelector("#start");
23
      const cancelButton = document.querySelector("#cancel");
24
      function cancellableDelayedResolve(delay) {
25
        setTimeout(console.log, 0, "set delay");
26
        return new Promise((resolve, reject) => {
27
          let flag = false;
28

29
          req().then((res)=>{
30
if(flag){
31
            resolve();
32

33
}
34

35
          })
36
          const id = setTimeout(() => {
37
            setTimeout(console.log, 0, "delayed resolve");
38
          }, delay);
39
          const cancelToken = new CancelToken((cancelCallback) => cancelButton.addEventListener("click", cancelCallback));
40
          cancelToken.promise.then(() => (flag = true));
41
        });
42
      }
43
      startButton.addEventListener("click", () => cancellableDelayedResolve(1000));
44
    </script>
45
  </body>
46
</html>

1
// 使用promise来包装任务
2
const req1P = () => {
3
  return new Promise((resolve) => {
4
    req1(() => {
5
      resolve("req1");
6
    });
7
  });
8
};
9
const req2P = () => {
10
  return new Promise((resolve) => {
11
    req2(() => {
12
      resolve("req2");
13
    });
14
  });
15
};
16
const req3P = () => {
17
  return new Promise((resolve) => {
18
    req3(() => {
19
      resolve("req3");
20
    });
21
  });
22
};
23

24
req1P()
25
  .then((msg1) => {
26
    return req2P().then((msg2) => {
27
      return [msg1, msg2];
28
    });
29
  })
30
  .then((msgs) => {
31
    return req3P().then((msg3) => {
32
      return [...msgs, msg3];
33
    });
34
  })
35
  .then((msgs) => {
36
    console.log(msgs);
37
  });

1
function queueTask(fn) {
2
  setTimeout(fn);
3
}
4
class PdPromise {
5
  static PENDING = "pending";
6
  static FULFILLED = "fulfilled";
7
  static REJECTED = "rejected";
8

9
  #status = PdPromise.PENDING;
10
  #value = null;
11
  #reason = null;
12

13
  #fulfilledCallbacks = [];
14
  #rejectedCallbacks = [];
15

16
  constructor(executor) {
17
    try {
18
      executor(this.resolve, this.reject);
19
    } catch (e) {
20
      this.reject(e);
21
    }
22
  }
23
  resolve = (value) => {
24
    if (this.#status !== PdPromise.PENDING) return;
25
    /**
26
     * 如果value是一个promise,那么这个Promise实例会根据value这个Promise的解决时机进行reslove或者reject
27
     * 此处逻辑并不在规范之内,但是原生的Promise的行为是这样的,所以我们加上
28
     *  */
29
    if (value instanceof PdPromise) {
30
      return value.then(
31
        (value) => this.resolve(value),
32
        (reason) => this.reject(reason)
33
      );
34
    }
35
    this.#status = PdPromise.FULFILLED;
36
    this.#value = value;
37
    this.#fulfilledCallbacks.forEach((fn) => fn());
38
  };
39
  reject = (reason) => {
40
    if (this.#status !== PdPromise.PENDING) return;
41
    this.#status = PdPromise.REJECTED;
42
    this.#reason = reason;
43
    this.#rejectedCallbacks.forEach((fn) => fn());
44
  };
45
  then = (onfulfilled, onrejected) => {
46
    const onfulfilledBak = onfulfilled;
47
    const onrejectedBak = onrejected;
48

49
    onfulfilled = typeof onfulfilled === "function" ? onfulfilled : () => this.#value;
50
    onrejected = typeof onrejected === "function" ? onrejected : () => this.#reason;
51
    const promise = new PdPromise((resolve, reject) => {
52
      const resolveValue = (value) => {
53
        if (typeof onfulfilledBak === "function") {
54
          const x = onfulfilled(value);
55
          resolvePromise(promise, x, resolve, reject);
56
        } else {
57
          resolve(value);
58
        }
59
      };
60

61
      if (this.#status === PdPromise.FULFILLED) {
62
        queueTask(() => {
63
          try {
64
            resolveValue(this.#value);
65
          } catch (e) {
66
            reject(e);
67
          }
68
        });
69
      }
70
      if (this.#status === PdPromise.REJECTED) {
71
        queueTask(() => {
72
          try {
73
            if (typeof onrejectedBak === "function") {
74
              const x = onrejected(this.#reason);
75
              resolvePromise(promise, x, resolve, reject);
76
            } else {
77
              reject(this.#reason);
78
            }
79
          } catch (e) {
80
            reject(e);
81
          }
82
        });
83
      }
84
      if (this.#status === PdPromise.PENDING) {
85
        this.#fulfilledCallbacks.push(() =>
86
          queueTask(() => {
87
            try {
88
              resolveValue(this.#value);
89
            } catch (e) {
90
              reject(e);
91
            }
92
          })
93
        );
94
        this.#rejectedCallbacks.push(() =>
95
          queueTask(() => {
96
            try {
97
              if (typeof onrejectedBak === "function") {
98
                const x = onrejected(this.#reason);
99
                resolvePromise(promise, x, resolve, reject);
100
              } else {
101
                reject(this.#reason);
102
              }
103
            } catch (e) {
104
              reject(e);
105
            }
106
          })
107
        );
108
      }
109
    });
110
    return promise;
111
  };
112
}
113
function resolvePromise(promise, x, resolve, reject) {
114
  if (promise === x) {
115
    return reject(new TypeError("The promise and the return value are the same"));
116
  }
117

118
  if (x !== null && (typeof x === "function" || typeof x === "object")) {
119
    let then;
120
    try {
121
      then = x.then;
122
    } catch (e) {
123
      reject(e);
124
    }
125
    // 如果then是一个函数,我们就理解这个x是一个promise
126
    if (typeof then === "function") {
127
      let called = false;
128
      try {
129
        then.call(
130
          x,
131
          function (y) {
132
            if (called) return;
133
            called = true;
134
            resolvePromise(promise, y, resolve, reject);
135
          },
136
          function (r) {
137
            if (called) return;
138
            called = true;
139
            reject(r);
140
          }
141
        );
142
      } catch (e) {
143
        if (called) return;
144
        reject(e);
145
      }
146
    } else {
147
      // 如果then不是一个函数,说明x只是有一个then属性普通对象
148
      resolve(x);
149
    }
150
  } else {
151
    resolve(x);
152
  }
153
}
154
PdPromise.deferred = function () {
155
  var result = {};
156
  result.promise = new PdPromise(function (resolve, reject) {
157
    result.resolve = resolve;
158
    result.reject = reject;
159
  });
160
  return result;
161
};
162
module.exports = PdPromise;

1
// https://www.prettier.cn/docs/install.html
2
module.exports = {
3
 // 一行最多多少个字符
4
 printWidth: 150,
5
 // 指定每个缩进级别的空格数
6
 tabWidth: 2,
7
 // 使用制表符而不是空格缩进行
8
 useTabs: true,
9
 // 在语句末尾打印分号
10
 semi: true,
11
 // 使用单引号而不是双引号
12
 // 在对象文字中的括号之间打印空格
13
 bracketSpacing: true,
14
 // jsx 标签的反尖括号需要换行
15
 jsxBracketSameLine: false,
16
 // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
17
 arrowParens: 'always',
18
 // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
19
 rangeStart: 0,
20
 rangeEnd: Infinity,
21
 // 指定要使用的解析器，不需要写文件开头的 @prettier
22
 requirePragma: false,
23
 // 不需要自动在文件开头插入 @prettier
24
 insertPragma: false,
25
 // 使用默认的折行标准 always\never\preserve
26
 proseWrap: 'preserve',
27
 // 指定HTML文件的全局空格敏感度 css\strict\ignore
28
 htmlWhitespaceSensitivity: 'css',
29
 singleQuote: true,
30
 // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
31
 quoteProps: 'as-needed',
32
 // 在JSX中使用单引号而不是双引号
33
 jsxSingleQuote: false,
34
 // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
35
 trailingComma: 'none',
36
 // Vue文件脚本和样式标签缩进
37
 vueIndentScriptAndStyle: false,
38
 // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
39
 endOfLine: 'lf'
40
};

1
# Editor configuration, see http://editorconfig.org
2

3
# 表示是最顶层的 EditorConfig 配置文件
4
root = true
5

6
[*] # 表示所有文件适用
7
charset = utf-8 # 设置文件字符集为 utf-8
8
indent_style = space # 缩进风格（tab | space）
9
indent_size = 2 # 缩进大小
10
end_of_line = lf # 控制换行类型(lf | cr | crlf)
11
trim_trailing_whitespace = true # 去除行首的任意空白字符
12
insert_final_newline = true # 始终在文件末尾插入一个新行
13

14
[*.md] # 表示仅 md 文件适用以下规则
15
max_line_length = off
16
trim_trailing_whitespace = false

1
const vdom = {
2
  type: "div",
3
  attr: {
4
    id: "app",
5
  },
6
  children: [
7
    {
8
      type: "div",
9
      attr: {},
10
      children: "1",
11
    },
12
    {
13
      type: "div",
14
      attr: {},
15
      children: "2",
16
    },
17
  ],
18
};

1
while (i <= e1 && i <= e2) {
2
  const n1 = c1[i]
3
  const n2 = c2[i]
4
  if (isSameVNodeType(n1, n2)) {
5
    patch(
6
      n1,
7
      n2,
8
      container,
9
      null,
10
      parentComponent
11
    )
12
  } else {
13
    break
14
  }
15
  i++
16
}

1
while (i <= e1 && i <= e2) {
2
  const n1 = c1[e1]
3
  const n2 =c2[e2]
4
  if (isSameVNodeType(n1, n2)) {
5
    patch(
6
      n1,
7
      n2,
8
      container,
9
      null,
10
      parentComponent
11
    )
12
  } else {
13
    break
14
  }
15
  e1--
16
  e2--
17
}