Question

如何构建自己的函数，通过纯javascript在定义的对象上调用它们？ Jquery正在这样表演，我想知道如何。这是一个小样本，显示了我想要做的事情：

doc = {
  qS: function(selector) {
     return document.querySelector(selector);
  }
};
    
var me = doc.qS('#id');
me.qS('span').innerText = 'Changed!';

<div id="id"><span>Test</span></div>

Answer 1

在您的代码中：

doc = {
  qS: function(selector) {
     return document.querySelector(selector);
  }
};

var me = doc.qS('#id');
me.qS('span').innerText = 'Changed!';

致电doc.qS('#id')后，me包含一个DOM元素，该元素未定义q5个方法。如果你想链接调用la jQuery，你将不得不构建一些更多的机制，比如DOM元素的包装器：

function DOM(elt) {
  return {
    qS(selector)        { return DOM(elt.querySelector(selector)); },
    set innerText(text) { elt.innerText = text; },
    get innerText()     { return elt.innerText; }
  };
}

现在你可以做到：

DOM(document).qS('#id').qS('span').innerText = "foo";

您可以将DOM实现为构造函数（通过new DOM调用它），并在其原型上指定诸如qS之类的方法，或者将DOM实现为ES6类，但这些实际上是实现细节

但是，要处理对返回事物列表的querySelectorAll等方法的调用，您必须扩展它以处理多个元素（这是jQuery所做的）。不久之后，你将拥有一个功能较弱的jQuery版本或jQuery的轻量级版本，例如zepto，你必须自己维护这个版本才能获得可疑的好处。

如果你想要的只是querySelector的别名，虽然通常被认为是不好的做法，但你可以做到

Object.defineProperty(HTMLElement, 'qS', {
  value(selector) { return this.querySelector(selector); }
});

但是现在你还有另外一件事需要维护和解释，这可能不值得。

很多人都喜欢链接风格，并且公平地说它受到了jQuery的欢迎。但其他人不喜欢它。我想你可以说这有点像时尚，现在有点过时了。你不妨写一下

var id = document.querySelector('#id');
var span = id.querySelector('span');
span.textContent = 'Changed!';

当然，如果你想做的就是这样，你可以写querySelector('#id span')来开始。

您还可以考虑为什么您认为需要选择DOM元素并使用它们执行操作，例如添加样式，也许？许多jQuery程序是扭曲的代码缠结，以各种奇怪的方式遍历DOM，并添加和删除和修改元素。你可以通过明智地使用CSS来完成你看到人们使用jQuery做的很多事情。由于较少的JS代码需要遍历DOM并对其进行操作，因此不需要语法糖，例如使jQuery着名的链接。

如果您选择提供某种模板语言的现代框架，您可以将JS中需要执行的直接DOM操作量减少到接近零。

通过vanilla js构建自己的Object函数

1 个答案: