javascript - 向返回元素的函数添加方法

Question

我正在研究一个在项目中使用的微型库，但我很难将方法添加到函数中。

在这种情况下，我已经简写了 document.querySelector() 这一切都很好并且可以根据需要工作。但是我真的不知道如何向从选择器函数继承元素的方法添加方法。

这类似于 jquery 的工作方式，但是很多在线代码示例都是几年前的。我想要一个现代的解决方案，并了解它是如何工作的。我真的希望有人可以教育我并帮助我实现这一目标。

干杯!

let S = (selector, container = document) => {
    return container.querySelector(selector);
};

S.prototype = {
  classAdd: (_class) => this.classList.add(_class) 
};

S('div').classAdd('red');

https://codepen.io/matt3224/pen/NMqBLp?editors=0010

Answer 1

Arrow functions don't have a prototype property .要让它工作，请使用普通功能，这不是现代的。箭头函数不是替代，而是补充。不过，您也可以使用类 - 也许这就是您所说的现代。

class S {
  constructor(selector, container = document) {
    this.selected = container.querySelector(selector);
  }

  classAdd(clazz) {
    this.selected.classList.add(clazz);
  }
}

new S('#foo').classAdd('bar');
console.log('#foo has bar as class: ', document.getElementById('foo').classList.contains('bar'));

<div id="foo">
  foo
</div>