如何在JavaScript中定义缩写函数

Question

我想知道如何在JavaScript中为缩写选择器设置一个缩写函数。如果这不是正确的术语，请谅解。

示例：

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

允许您：

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

我想知道如何创建自定义的 .something （类似于 jQuery 的 .val 方法）。

例如，调用：

abc('#someID').doSomething;

通过使用 doSomething 命令，您可以以类似 .val 等方式更新值（或将其拉回）。

提前感谢您的帮助。

- user6048985

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

- Marcos Pérez Gude

---

使用您的原型示例。如果我使用abc("#someID").doSomething('hello');，我会收到一个JavaScript错误，说该函数不存在？谢谢您的回复。 - user6048985

是的，这是因为构造函数中的返回值。这是一个简单的示例，向您展示如何以两种不同的方式进行操作，但我看到您接受其他更完整的答案。在那个答案中，您可以看到如何实例化dom元素，然后使用方法进行操作。示例完全相同，但我的代码仅是一个示例以展示如何制作，而不是功能示例。如果您想让我更详细地解释这个答案，请告诉我并尝试一下。 - Marcos Pérez Gude

Answer 2

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

让我们尝试创建一个简单的jQuery实现。为此，我们首先需要范围界定。

1. jQuery函数是一个包装器。它将保存对DOM节点的引用，并提供一系列函数来“操作”该节点。
2. 大多数函数（具体说来是setter）应返回指向包装器本身的指针，以便您可以链接操作。

您可以通过定义函数来先定义包装器。

// 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/

- Adrian Salazar

---

非常感谢。这个方法很有效，并且解释得很清楚。感谢您的时间。 - user6048985

Answer 3

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

几乎每次它都返回相同的对象，因此您可以链式调用方法。

关键是您无法避免保留对所选 DOM 元素的引用和装饰部分。

一个简单的关于选择和操作 DOM 元素的示例 请注意，在此我存储对 document.querySelector 和 document.querySelectorAll 的引用，它们几乎与 jquery 选择机制（Sizzle）一样好。

var MyWrapper = (function(){
  var $ = document.querySelector.bind(document);
  var $$ = document.querySelectorAll.bind(document);
  var slice = Array.prototype.slice;
  var selection;

  var that = {
    select: select,
    remove: remove,
    html: html
  };

  function select(selector){
    selection = $(selector);
    return that;
  }

  function remove(){
    selection.parentNode.removeChild(selection);
    return undefined;
  }

  function html(htmlstring){
    if(typeof htmlstring == 'undefined'){
      return selection.innerHTML;
    } else {
      selection.innerHTML = htmlstring;
      return that;
    }
  }

  return that;
}())

当然，jQuery是一种非常复杂和精密的库，适用于各种用例，但上面的代码可以让您入门。

- eltonkamami