Question

我不知道它叫什么，但在画布库中，我正在使用你通过调用

对纹理应用滤镜

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

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

我想知道的是，如果我能以某种方式将“if”语句添加到过滤器的“train”中，如下所示：

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

等等。

很抱歉，如果我不是很清楚，我不知道调用过滤器“火车”是什么，你可以在一行之后在彼此之后应用过滤器。

Answer 1

您在问题中显示的构造称为 function chaining 。函数filter1，filter2，... filterN只会修改相同的画布对象，并在函数末尾返回相同的对象。

您可以很好地包含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

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

1 个答案: