5

如何编写可链接的函数但不污染 $.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();

感谢您的回答！

4

3 回答 3

5

你可以链上你想要的一切。如果您定义$.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！

于 2013-02-22T16:58:35.610 回答
3

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

(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 对象。

于 2013-02-22T17:16:15.557 回答
0

当您调用 时a.foo()，将调用该函数foo并this设置为a。你可以利用它来发挥你的优势。

还记得表达式 a.foo()的计算结果是您return在函数中的任何内容。

所以，只需返回this。

然后a.foo()返回a, 并(a.foo()).bar()等效于调用a.foo()then 调用a.bar()... 即在a!

$.fn并不是特别神奇 - 它只是以您将要使用的相同方式使用上述逻辑。

于 2013-02-22T17:00:52.837 回答