Оберните все функции jQuery в класс

Question

Я хочу, чтобы все функции jQuery's DOM выполнялись для класса js, но эти функции имеют дело только с одним свойством этого класса.

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>

Примечание заменяет Foo.prototype.constructor потому что JQuery будет иметь доступ к constructor свойствам экземпляра и вызвать его. Но классы ES6, такие как Foo, не подлежат вызову, и jQuery не должен звонить Foo.

Не уверен, что если столпотворение сможет правильно transpile, вот код ES5:

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

Одним из вариантов является использование ES2015 прокси, т.е. Proxy конструктора.

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 и класс методы могут быть сложными.