做插件需要用到的，因为插件比页面元素加载的快，并且有些页面还是js渲染内容的
所以就需要一个计时器循环检查页面中是否有我需要的元素，于是这个getElements()就出来了
放在了一个工具类中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| export default class Util {
private static _instance: Util;
public static instance(): Util {
if (typeof this._instance === 'undefined') {
this._instance = new Util();
}
return this._instance;
}
public getElements(selector: string): Promise<NodeListOf<Element>> {
return new Promise((resolve, reject) => {
let timeout = 20;
const timer = setInterval(() => {
const elements: NodeListOf<Element> = document.querySelectorAll(selector);
if (elements.length !== 0) {
resolve(elements);
clearInterval(timer);
}
if (timeout === 0) {
reject(new Error('Empty NodeListOfElement'));
clearInterval(timer);
}
timeout--;
}, 500);
});
}
}
|
Github →
用了Promise，简洁易读。多个Elements还可以直接用Promise.all()挨个遍历出来，舒适
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import HKM from './hotKeyMenu';
import Util from './util';
const UtilInstance = Util.instance();
const avatar = UtilInstance.getElements('.avatar');
const span = UtilInstance.getElements('#primaryChannelMenu>span');
Promise.all([avatar, span]).then(nodeLists => {
nodeLists.map(elements => {
elements.forEach((element) => {
new HKM(element).add([
{
key: 83,
title: '测试',
action: function() {
alert('测试');
}
}
]);
});
});
})
.catch(error => {
UtilInstance.console(error, 'error');
});
|
Github →
不过有个问题，Promise.all()的话如果其中一个没获取到，那整个就返回错误了。如果我想让获取到的返回成功，没获取到的返回错误，大概得遍历[avatar, span]，其实也OK
那个new HKM()，是最近要做的“快捷键菜单”，至于是个什么东西，有兴趣的话可以看一下：《快捷键菜单》，用jQuery写的，这次打算用原生js重构一遍
快捷键菜单源码：Github →
TypeScript版快捷键菜单：Github →
后言
被ES6爽到，也被TypeScript语法爽到，可以指定类型，vs code 直接就有相应的接口提示，太舒服了 —— 来自PHP程序猿的叫好
我可能是个假程序猿
