Question

我想知道如何在javascript中为速记选择器设置速记函数。如果不是正确的termonolgy，我道歉。

示例：

var abc = function (selector) {
  return document.querySelector(selector);
};

允许您：

var temp = abc('#someID').value;

我想知道你是如何创建自定义的.something（以类似于jQuery的方式.val）？

例如致电：

abc('#someID').doSomething;

doSomething命令允许您以与.val等类似的方式更新值（或将其拉回）。

提前谢谢。

Answer 1

为此，您必须返回一个对象（最简单的解决方案）或扩展原型（高级解决方案）。

返回对象

您可以返回doSomething()方法：

var abc = function (selector) {
  return {
        doSomething: function() {caller()},
        dom: document.querySelector(selector);
  }
};

它有效：

var temp = abc("#someID").dom.value;
var doSome = abc("#someID").doSomething();

扩展原型

您可以向对象原型添加一个函数：

var abc = function(sel){
     return document.querySelector(sel);
}
abc.prototype.doSomething = function() {
    caller();
};

它有效

var temp = new abc("#someID");
temp.doSomething(); //doSomething() method
temp.value; // value attribute of element

Answer 2

嗯，这是一个非常好的JS代码设计问题。

让我们尝试创建一个简单的jQuery实现。为此，我们首先应该做好准备。

jQuery函数是一个包装器。它将保存对DOM中节点的引用，它将提供一个将运行＆＃34;在节点上。
大多数函数（setter，更具体）应该返回一个指向包装器本身的指针，这样你就可以进行链接操作。

您可以通过定义您的功能来首先定义wapper。

// Here we define the constructor.
var q = function(selector){
    this._node = document.querySelector(selector);

    // Add more private stuff here if you like
}; 

//Now we can add functionality to the function prototype.
q.prototype.hide = function(){
    this._node.style.visibility = 'hidden';        
    return this;
};    

q.prototype.show = function(){
   this._node.style.visibility = 'visible';  
   return this;
};

q.prototype.val = function(){
   return this._node.value;
};

q.prototype.click = function(callback){
   this._node.onclick = callback;
   return this;
};

// This is just for not having to call new every-time we want a new instance
var $q = function(selector){
   return new q(selector);
};

现在让我们玩一下

<label for="name"> Hey I'm a text box</label>
<input id="name" value="" />
<button id="clickMe"> Click me </button>

我们会在按钮上附加一个点击处理程序，当用户点击时，我们会显示文本框包含的值，然后我们会隐藏文本框。全部在一行（链式命令）。

$q('#clickMe').click(function(){
    alert($q('#name').hide().val());
});

参见JsFiddle https://jsfiddle.net/4Lfangj4/

Answer 3

Jquery将您的选择保留在内部属性中，并使用可以帮助DOM存在的方法来修饰该属性。

几乎每次它都返回相同的对象，所以你可以链接方法调用。

关键是你不能避免保留对所选DOM元素和装饰部分的引用

关于选择和操作DOM元素的简单示例请注意，我存储了对var w = (x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length)); var sectionWidth = availableWidth/(bars.enter()[0].length - 1); if(bars.enter().length == 2) return 'translate(' + ((i-1)*w + i*w + (i*(sectionWidth - 2*w))) + ',0)'; else return 'translate(' + ((i-0.5)*w + i*(sectionWidth - w)) + ',0)';和document.querySelector 的引用，这与jquery选择机制（Sizzle）非常相似

document.querySelectorAll

当然jQuery是一个非常复杂和复杂的库，适用于所有类型的用例，但上面的代码可以帮助您入门

如何在javascript中定义速记函数

3 个答案:

返回对象

扩展原型