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

-1

如何构建自己的函数以通过纯javascript调用定义的对象？ Jquery表现得像这样，我想知道如何。这里是一个小样本，显示了我想做的事：通过vanilla js构建自己的对象函数

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>

来源

2016-09-29 Fantasterei

jQuery是[开源]（https://github.com/jquery/jquery）。被警告说，jQuery的做法稍微复杂一些。另外：通过一些JavaScript教程，你应该开始了解如何做这种事情（提示：jQuery是一个**包装器**，它不直接返回querySelectorAll或querySelector的结果）。 –

它被称为原型继承。至少这是JS使用的继承模型，这是一种非常普遍的方法，但不是唯一的方法。这是jQuery使用的。 [MDN的继承和原型链]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain） – 2016-09-29 17:56:15

谢谢@squint也许你可以给我一个例子吗？ – Fantasterei

在您的代码：

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来完成。随着更少的JS代码需要绕过DOM并对其进行操作，就不再需要语法糖，例如让jQuery出名的链接。

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

来源

2016-09-29 18:13:16

非常感谢，男士！ – Fantasterei

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

回答

相关问题