封装了个 getElements()

做插件需要用到的,因为插件比页面元素加载的快,并且有些页面还是js渲染内容的

所以就需要一个计时器循环检查页面中是否有我需要的元素,于是这个getElements()就出来了

放在了一个工具类中

export default class Util {
  private static _instance: Util;

  public static instance(): Util {
    if (typeof this._instance === 'undefined') {
      this._instance = new Util();
    }
    return this._instance;
  }

  /**
   * 获取页面上的元素,10秒内如果没获取到则停止获取
   * @param selector 选择器
   */
  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);
        }

        // timeout
        if (timeout === 0) {
          reject(new Error('Empty NodeListOfElement'));
          clearInterval(timer);
        }

        timeout--;
      }, 500);
    });
  }

}

Github →

用了Promise,简洁易读。多个Elements还可以直接用Promise.all()挨个遍历出来,舒适

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 →

后言

被ES6爽到,也被TypeScript语法爽到,可以指定类型,vs code 直接就有相应的接口提示,太舒服了 —— 来自PHP程序猿的叫好

我可能是个假程序猿

上一篇
下一篇