Question

我痛苦地试图将jquery扩展到ES6类，然后用Babel进行转换。除了每次调用继承的jQuery函数之外，其他所有东西都有效，jQuery似乎每次都调用构造函数。这在这个小提琴中很明显。 trigger似乎也被召唤了4次。

（已编译的代码） https://jsfiddle.net/w3bbzgrn/1/

这是源代码

class Popup extends jQuery.fn.init {
  constructor(t) {
    super(t);
    this.init(t);
    return this;
  }

    test(){
      this.trigger('test', 55)
      return this
    }
}

class Foo extends Popup{
  constructor(t){
    super(t)
    console.log("I get called")
      return this

  }
}

var t = $('<div>hi</div>')
var f = new Foo(t);
f.on('test', function(e,args){
  console.log(args)
})
f.appendTo('body').test().slideUp()

Answer 1

您可以使用var stack = new Error().stack转储当前调用堆栈，并查看构造函数被调用两次的原因。请参阅更新的JSFiddle：https://jsfiddle.net/w3bbzgrn/3/

打印到控制台：

PRINTING CALL STACK
Error
    at new Foo (VM149:90)
    at window.onload (VM149:102)
I get called
PRINTING CALL STACK
Error
    at new Foo (https://fiddle.jshell.net/_display/:90:15)
    at Foo.pushStack (https://code.jquery.com/jquery-3.0.0.js:141:32)
    at Foo.jQuery.fn.(anonymous function) [as appendTo] (https://code.jquery.com/jquery-3.0.0.js:5920:15)
    at window.onload (https://fiddle.jshell.net/_display/:106:3)
I get called
55

所以，它在两种不同情况下被召唤两次：

第一次因为var f = new Foo(t);
第二次使用f.appendTo('body')时。看起来它试图在追加它之前创建该元素的副本。

也许尝试使用google搜索"jquery append creates duplicates"之类的内容。

在每个方法调用上扩展jQuery调用构造函数

1 个答案: