如何从另一个函数-Javascript

Question

我正在尝试使我的代码更短，更优化，并希望使其看起来更清晰。

到目前为止，我已经做到了：

function id(a) {
  return document.getElementById(a);
}

function cl(a) {
  return document.getElementsByClassName(a);
}

function tg(a) {
  return document.getElementsByTagName(a);
}

function qs(a) {
  return document.querySelector(a);
}

function qa(a) {
  return document.querySelectorAll(a);
}

现在我可以打电话给qs("#myElement")了。现在，我想将事件附加到指定的元素上，就像qs("#myElement").addEventListener("click", callBack)一样。这对我很有效。但是当我尝试做这个时：

function ev(e, call) {
  return addEventListener(e, callback);
}

然后尝试调用qs("#init-scrap").ev("click", someFunction)，然后弹出以下错误：

Uncaught (in promise) TypeError: qs(...).ev is not a function.。我不知道这是什么问题，我必须尝试方法链接吗？或其他任何可以解决此问题的方式。

注意：我不想使用任何库或框架，例如liek Jquery等。

Answer 1

只需将element / nodelist作为第一个参数传递进来，并将侦听器附加到它。

function ev(el, e, call) {
  return el.addEventListener(e, callback);
}

作为一种替代方法，但我不建议这样做，您可以将ev添加为新的Node原型函数：

function qs(selector) {
  return document.querySelector(selector);
}

if (!Node.prototype.ev) {
  Node.prototype.ev = function(e, cb) {
    return this.addEventListener(e, cb);
  };
}

qs('button').ev('click', handleClick);

let count = 0;

function handleClick() {
  console.log(count++);
}

<button>Count+=1</button>

注意，我仅使用document.querySelector对此进行了测试。您可能需要更改代码才能与document.querySelectorAll等一起使用，因为它们不会返回单个元素。

Answer 2

如果您希望使用语法qs("#init-scrap").ev("click", someFunction)，则需要将querySelector返回的对象包装到另一个具有ev功能的对象中。

class jQueryLite {
  constructor(el) {
    this.el = el;
  }

  ev(e, callback) {
    this.el.addEventListener(e, callback);
    return this;
  }
}

qs(a) {
  return new jQueryLite(document.querySelector(a));
}

如果您希望查找它，则称为Fluent界面。

Answer 3

您的ev方法中有错误。应该是

const ev = document.addEventListener.bind(document);

因此，可以创建实际函数本身的别名，而不是创建用于包装原始函数的新函数。

如果要使用此方法，则应对其他别名执行相同的操作。

const qs = document.querySelector.bind(document);
const qa = document.querySelectorAll.bind(document);

我最后的建议是完全不使用这些方法。方法名称的缩写会损害代码的可读性。在代码方面，可读性几乎总是比简洁性更为重要。

Answer 4

我将之前的答案视为灵感，并对此做出了自己的看法。

核心

const $ = (selector, base = document) => {
  return base.querySelector(selector);
};

Node.prototype.on = function(type, listener) {
  return this.addEventListener(type, listener);
};

• 它支持基值，以防您有除 document 之外的其他元素，但它是可选的。
• 我喜欢 $ 和 on，所以这就是我使用的，就像 jQuery 一样。

像下面这样称呼

$('button').on('click', (e) => {
  console.log(e.currentTarget);
});