すべてのjQuery関数をクラスにラップします

Question

jQuery's jsクラスのDOM関数をすべてラップしますが、それらの関数はそのクラスの単一のプロパティのみを処理します。

class Foo { 
    constructor() { 
    this.$wrapper = $('<div>wrapper</div>') 
    } 
} 

var f = new Foo(); 

// have to call this 
f.$wrapper.appendTo($('body')); 
// want to call this 
f.appendTo($('body')); 

私は、各jQueryのメソッドで同じ名前のメソッドを作成することによって、長い年月を取り、単に常にthis.$wrapperにそれを適用することになる、手動でこれを行うことができます。しかし、これを行う簡単な方法があるのだろうかと思います。

https://jsfiddle.net/gy9tLyk2/

Answer 1

はい、ちょうどjQuery.fn.initを拡張し、superコールを使用します。

class Foo extends jQuery.fn.init { 
 
    constructor() { 
 
    super('<div>wrapper</div>'); 
 
    } 
 
} 
 
Foo.prototype.constructor = jQuery; 
 
new Foo().appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意jQueryのインスタンスのconstructorプロパティにアクセスし、それを呼び出しますので、私はFoo.prototype.constructorを交換します。しかし、FooのようなES6クラスは呼び出すことができず、jQueryはFooを呼び出す予定ではありません。

function Foo() { 
 
    this.init('<div>wrapper</div>'); 
 
} 
 
Foo.prototype = Object.create(jQuery.fn); 
 
new Foo().appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

1つのオプションは、すなわちProxyコンストラクタ、ES2015プロキシを使用しています。

class Foo { 
    constructor() { 
    this.$wrapper = $('<div>wrapper</div>'); 
    return new Proxy(this, { 
     get: function(target, prop, receiver) { 
     if (target.hasOwnProperty(prop)) { 
      return target[prop]; 
     } 
     return function() { 
      let ret = target.$wrapper[prop](...arguments); 
      if (ret !== target.$wrapper) return ret; 
      return receiver; 
     } 
     } 
    }); 
    } 
} 

var f = new Foo(); 
var a = f.appendTo($('body')).text('changed').prop('tagName'); 

しかし、それはいくつかの理由でお勧めできません：

1. ブラウザのサポート
2. プロキシが
3. 遅いjQueryのは、ゲッターとセッターを持っており、ハンドルのすべてのjQueryとクラスよりも、プロキシハンドラを作成しますメソッドは難しいかもしれません。