如何在javascript中定义速记函数

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

例如：

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

允许您：

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

我想知道的是如何创建一个定制的.something（以类似于jQuery have.val的方式）

例如呼叫：

abc('#someID').doSomething;

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

---

提前感谢。

要做到这一点，您必须返回一个对象（最简单的解决方案）或扩展原型（高级解决方案）

返回一个对象 您可以返回

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

---

Jquery将您的选择保存在一个内部属性中，并使用有助于显示is DOM的方法装饰该属性

几乎每次它都返回相同的对象，这样您就可以链接方法调用

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

关于选择和操作DOM元素的简单示例 注意这里我存储了对

document.querySelector

和

document.queryselectoral

的引用，它们与jquery选择机制（Sizzle）非常相似

---

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

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

让我们尝试创建一个简单的jQuery实现。对于这一点，我们首先应该扩大范围

jQuery函数是一个包装器。它将保存对DOM中节点的引用，并提供一个数组函数，该数组函数将“操作”该节点

大多数函数（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>

---

请参阅使用原型示例的JSFIDLE

。如果我使用abc（“#someID”）。doSomething（'hello'）；我收到一个javascript错误，说函数不存在？谢谢你的回复。是的，这是因为构造函数中的返回值。这是一个简单的例子，向你们展示了如何用两种不同的方式来实现它，但我看到你们接受了另一个更完整的答案。在这个答案中，您可以看到如何实例化dom元素，然后使用方法处理它。示例完全相同，但我的代码只是一个演示如何制作的示例，而不是一个函数示例。如果你想让我解释更多这个答案，告诉我，我试试。非常感谢。这是有效的，并且得到了很好的解释。谢谢你抽出时间。

<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());
});