通过香草js构建自己的对象函数

Build own Object-functions via vanilla js

本文关键字：自己的 对象 函数 构建 js 香草      更新时间：2023-09-26

如何通过纯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>

在你的代码中:

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

调用doc.qS('#id')后，me包含一个DOM元素，该元素没有定义q5方法。如果您希望像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，添加、删除和修改元素。您看到人们使用jQuery做的很多事情都可以通过明智地使用CSS来完成。随着需要在DOM周围走动和操作它的JS代码的减少，对语法糖(如使jQuery出名的链接)的需求也减少了。

如果你选择一个提供某种模板语言的现代框架，你可以将你需要在JS中进行的直接DOM操作的数量减少到几乎为零。

相关文章：