Question

让我们说我写了一个jquery插件，它有一个方法可以添加两个值并将html设置为该值。我可以用一种方式链接它，但不能用另一种方式链接它，我想知道为什么，以及如何确保我可以双向链接。

$.fn.foo = function() {
    this.result = 0;

    this.doMath= function(a, b) {
        this.result = a + b;
        this.html(this.val);
        return this;
    }

    return this;
}

var link = '<a href="#">Link</a>'
// works as expexted
var a = $(link).foo().doMath(1,2).appendTo('body')
// does not work, likely because appendTo returns jquery
var b = $(link).foo().appendTo('body').doMath(1,2)

https://jsfiddle.net/j7ut1f30/1/

Answer 1

经过两周的尝试，我终于实现了目标。

class $Util {

    static $wrapper(self) {
        if (!self.$wrapper)
            throw new ReferenceError('$Util.$wrapper: $wrapper not defined in context of first argument');
        $.each($Util.jqueryPrototype, function(i, e) {
            self[e] = function() {
                self.$wrapper[e](...arguments);
                return self;
            }
        });
    }
}

$Util.jqueryPrototype = Object.getOwnPropertyNames($.prototype);

class foo {
    constructor() {
        this.$wrapper = $('p')
        $Util.$wrapper(this);
        return this;
    }
    test() {
        console.log('j')
        return this;
    }
}
var s = new foo();
s.css('color', 'red').test().appendTo('body').test().css('color','green')

https://jsfiddle.net/24r6uxs1/

jquery插件中的链非jquery方法

1 个答案: