javascript - DRY：使所有功能“返回这个”

Question

我正在尝试一些代码来创建我自己的 DOM 方法，但没有扩展实际的 DOM，类似于 jQuery 的工作方式。到目前为止，这是我的原型：

function Lib( selector ) {
  this.el = this._query( selector );
}

Lib.prototype = {
  _query: document.querySelectorAll.bind( document ),
  _each: function( fn ) {
    return [].forEach.call( this.el, fn );
  },
  hide: function() {
    this._each(function( el ) {
      el.style.display = 'none';
    });
    return this;
  },
  show: function() {
    this._each(function( el ) {
      el.style.display = 'block';
    });
    return this;
  },
  toggle: function() {
    this._each(function( el ) {
      var hidden = el.style.display == 'none';
      el.style.display = hidden ? 'block' : 'none';
    });
    return this;
  }
};

function $( selector ) {
  return new Lib( selector );
}

$('div').toggle();

如您所见，我必须不断返回this才能链接方法。我的大脑现在已经死了，我想不出一种自动化的方法。有什么建议么？

Answer 1

...我认为自动化没有真正的优势。

考虑到每个方法只定义一个在_each 中运行的函数，我会攻击它，因为它可能会回答你的实际问题。使用函数_each并将生成的函数添加到原型中的函数生成器可以解决这两个问题。

_{虽然我不确定实施。}

Answer 2

不要“自动化”返回语句。它是一个控制逻辑，很像 if-else（仅在功能级别上）。

如果你想真正“自动化”它，那么你基本上是在要求一个 JavaScript 代码生成器，这与 CoffeeScript 等不同。

Answer 3

您必须从每个方法调用中返回“this”以实现可链接性。

或者，您可以通过应用或调用并在“this”上下文中执行回调函数来完成类似的操作。