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。为了使它工作使用正常的功能，这不是现代的。箭头功能不是替代品，而是一种补充。你也可以使用一门课 - 也许这就是你对现代的意思。

＆＃13;

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'));

＆＃13;

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

＆＃13;

Answer 2

让我们仔细看看你的代码，不管吗？

第一个阻止：

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

此代码声明简单函数并将函数引用赋给变量S
函数本身按照querySelector文档返回HTML元素，不能在链表示法中使用：

S('div').something();  // won't work
let ele = S('div');    // works

第二块：

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

因为S是一个简单的函数（不是函数对象），所以它没有像常规对象那样的原型元素。但是，代码仍然有效，因为它在propotype函数上创建了一个名为S的新属性。

为了证明上面所述，我创建了以下代码示例：

let S = (selector, container = document) => {
  return container.querySelector(selector);
};

let ele = S('div');
console.log(ele);

S.prototype = {
  classAdd: (_ele, _class) => _ele.classList.add(_class)
};

S.prototype.classAdd(ele, 'red');

.red {
  padding: 10rem;
  background-color: coral;
}

<div>Text inside div</div>

如果你想使用诸如S('div').classAdd(..)之类的链符号，你的第一个块函数必须返回一个有效的对象来对其进行操作

let S = (selector, container = document) => {
  return {
    ele : container.querySelector(selector),
    classAdd: function(_class) { // regular function notation as it needs this 
      this.ele.classList.add(_class) 
    }
  };
};

S('div').classAdd('red')

.red {
  padding: 10rem;
  background-color: coral;
}

<div>Inside Div</div>

Answer 3

您可以在classAdd中定义S并返回包含这些方法的对象：

let S = (selector, container = document) => {
  let element = container.querySelector(selector);

  return {
    classAdd: (_class) => {      
      element.classList.add(_class)
    }
  }
};

S('div').classAdd('hello')

<div>
  hello
</div>

将方法添加到返回元素的函数

3 个答案: