javascript - 如何在函数链中有条件地调用函数？

Question

我不知道它叫什么，但在我使用的 Canvas 库中，您可以通过调用将滤镜应用于纹理

canvas.draw(texture).filter1().filter2().filter3().filter4();

如果值不是默认值，我试图只绘制某些过滤器，但我不能用常规的 if 语句来做，因为纹理只能设置一次，如果我尝试再次设置它，之前的过滤器将被重置。

我想知道我是否可以通过某种方式将“if”语句添加到过滤器的“序列”中，如下所示:

canvas.draw(texture).if(something){filter1()}.if(somethingelse){filter2()}.if(something){filter3()};

等等。

抱歉，如果我不是很清楚，我不知道过滤器“train”叫什么，你在一行中一个接一个地应用过滤器。

Answer 1

您在问题中展示的构造称为函数链接。函数 filter1, filter2, ... filterN 只会修改相同的 Canvas 对象并在函数结束时返回相同的对象。

你可以很好地包含 if 条件，就像这样

var canvasObject = canvas.draw(texture);

if (condition1) {
    canvasObject = canvasObject.filter1();
}

if (condition2) {
    canvasObject = canvasObject.filter2();
}

...

一个简单的例子，看起来像这样

function Canvas() {

    actualCanvas = "";

    return {
        filter1: function() {
            actualCanvas += "filter1 ";
            return this;               // return the same object
        },
        filter2: function() {
            actualCanvas += "filter2 ";
            return this;               // return the same object
        },
        filter3: function() {
            actualCanvas += "filter3 ";
            return this;               // return the same object
        },
        getActualCanvas: function() {
            return actualCanvas;
        }
    }
}

然后像这样调用函数

var canvasObject = new Canvas();

if (1 === 1) {
    canvasObject = canvasObject.filter1();
}

if (1 !== 1) {
    canvasObject = canvasObject.filter2();
}

if (2 === 2) {
    canvasObject = canvasObject.filter3();
}

console.log(canvasObject.getActualCanvas());
// filter1 filter3 

console.log(new Canvas().filter1().filter2().filter3().getActualCanvas());
// filter1 filter2 filter3