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'的上下文中执行回调函数来完成类似的操作。

干：让所有功能“归还”

3 个答案: