javascript - JS：将单参数函数变成可链接的

Question

采用任何 1 参数函数并将其链接到另一个函数的最简单方法是什么？

所以这看起来像......

red = function (target) {target.$.style.backgroundColor("red");}
blue = function (target) {target.$.style.backgroundColor("blue");}
body = $("body");
red(body);
#body is now red
makeFunctionChainable(blue);
body.blue()
#body is now blue

Answer 1

如果我了解您要做什么，您实际上可以为 Object 原型定义一个全局扩展，它允许您调用red()或blue()在任何对象上。

Object.prototype.red = function()
{
    $(this).css('background-color', 'red');
    return this;
};

Object.prototype.blue = function()
{
    $(this).css('background-color', 'blue');
    return this;
};

然后你可以像这样使用它：

$('body').red().blue();

我应该注意，这是一种不好的做法，您只想将其与 jQuery 元素一起使用。
相反，您应该为它编写一个 jQuery 扩展。

Answer 2

仅当 function1 返回的元素具有 function2 时，才可能进行链接

例子

var obj = {
  red: function(target) {target.$.style.backgroundColor("red");return this;},
  blue: function(target) {target.$.style.backgroundColor("blue");return this;}
};

并使用

obj.red(body).blue(body);

Answer 3

您可以通过返回使其可链接的东西来进行链接，例如this

var setColors = (function(){
    var target = null;
    var setTarget = function(t) {
        target = t;
        return this;
    };
    var color = function (colorChange) {
        target.$.style.backgroundColor(colorChange);
        return this;
    };
    return {setTarget: setTarget, setColor: color};
})();

var body = $("body");
//sets the red than blue immediately 
setColors.setTarget(body).setColor('red').setColor('blue');