Question

如何编写可链接的函数但不污染$ .fn？编写函数仅用于在我的插件中使用。有可能吗？

$('.myclass').makeSomething().andOneMoreFunction().andLast();

这是正确的方法吗？

UPD。我的最佳解决方案是扩展方法：

String.prototype.getMyLength = function(){return this.length;}

现在我可以将此函数应用于任何字符串：

var mystring = "test";
mystring.getMyLength();

或者

"teststring".getMyLength()

让它可以链接：

String.prototype.getMe = function(){return this;}
"string".getMe().getMe().getMe().getMe().getMe();

感谢您的回答！

Answer 1

你可以链接你想要的一切。如果您自己定义$.fn，那么在您运作结束时return this就很重要。

如果你想自己写一些javascript，你也可以链！这取决于你的回归。因此，如果您返回其他对象，则可以从该对象链接。返回值用于此。

示例

var obj = { test : function(){ alert("Y"); return this; }, test2 : function(){ alert("2"); return this; } } obj.test().test2(); // And so on since it returns this

jQuery插件API

$.fn.test = function(){ var methods = { method0 : function(){ alert("method0"); return this; } }; return methods; } var api = $("obj").test(); // Returns methods api.method0(); // Calling a function from the returned methods. // OR $("obj").test().method0();

上面的函数不再是jQuery可链接的。因此，您无法使用$("obj").test().addClass("test")因为您返回自己的API！

Answer 2

您可以使用插件函数的第一个参数指定选择的方法来避免污染;例如

(function () {
    var o = { // object holding your methods
        'bar': function () {console.log('bar', this); return this;},
        'foobar': function () {console.log('foobar', this); return this;}
    };
    $.fn.foo = function (method /*, args*/) {
        return o[method].apply(
            this,
            Array.prototype.slice.call(arguments, 1) // pass your args
        );
    };
}());

然后

$('something').foo('bar').foo('foobar');
/*
bar, thisobj
foobar, thisobj
*/

这样你也可以正常访问jQuery对象。

Answer 3

当您致电a.foo()时，调用foo函数并将this设置为a。你可以利用这个优势。

还要记住，表达式 a.foo()会根据函数内的任何return来计算。

所以，只需返回this 。

然后a.foo()评估回a，(a.foo()).bar()等同于调用a.foo()然后调用a.bar() ...即{{1}上的链式操作}}！

a并不是特别神奇 - 它只是以你想要的方式使用上述逻辑。

如何为本地使用编写jquery可链接函数？

3 个答案: