2

jQuery の動作と同様に、実際の DOM を拡張せずに独自の DOM メソッドを作成するコードをいくつか試しています。これはこれまでの私のプロトタイプです:

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ご覧のとおり、メソッドをチェーンできるようにするには、戻り続ける必要があります。私の脳は今死んでいます。これを自動化する方法が思いつきません。助言がありますか？

4

3 に答える 3

2

...これを自動化することの本当の利点はわかりません。

各メソッドが _each で実行する関数のみを定義していることを考えると、おそらく実際の質問に答える可能性があるため、それを攻撃します。_each関数を受け取り、生成された関数をプロトタイプに名前を付けて追加する関数ジェネレーターは、両方の問題を解決する可能性があります。

私は実装について確信が持てませんが。

于 2013-01-11T00:08:59.273 に答える
1

return ステートメントを「自動化」しないでください。これは、if-else によく似た制御ロジックです (関数レベルのみ)。

実際に「自動化」したい場合は、CoffeeScript などとは異なり、基本的に JavaScript コード ジェネレーターを要求しています。

于 2013-01-10T23:54:51.847 に答える
1

連鎖可能性を実現するには、各メソッド呼び出しから「this」を返す必要があります。

または、「this」のコンテキストでコールバック関数を適用または呼び出して実行することで、同様のことを実現できます。

于 2013-01-10T23:56:16.133 に答える