Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

If you’ve ever used jQuery, you’ll be familiar with the following code:

$(".testNode")
    .css('color'.'red')
    .show(200)
    .removeClass('class1');
Copy the code

Array folks will be familiar with the following code:

[1.2.3.4]
    .filter(filterFn)
    .map(mapFn)
    .join("")

Copy the code

Folks, here’s an example of Promise:

fetch(url)
    .then(res= >res.json())
    .then(result= >{... }) .then(result= >{... })Copy the code

Yeah, it’s a classic case of chain calls, all the way through. Go down, it’s cool, it’s easy to read, what’s the magic behind it?

The nature of a link call

nature

  1. Returns an object of the same type
  2. Returns the current instance itself
  • The then of a Promise is typically an instance that returns an object of the same type, Promise,
  • Array returns an instance of the same type
  • JQuery is a combination of the two and, depending on the case, returns either the current instance itself or an object of the same type.

Let’s look at an example of returning itself:

const EventEmitter = require("events");
const emitter = new EventEmitter();

emitter.on("message".function(){
    console.log("message")
}).on("message1".function(){
    console.log("message1")
})


emitter.emit("message"); // message
emitter.emit("message1"); // message1
Copy the code

That’s right, it’s going back to itself.

The pros and cons of chain calls

advantages

  • Reduce the amount of code because the previous variable is omitted.
  • Logic clear method to see the meaning of the name, easy to understand logic. Map, filter, some and so on. Yeah.
  • Easy to maintain the code less, logic clear, natural convenient maintenance.

disadvantages

  • Complexity gets higher
  • Troubleshooting becomes more difficult

Implement a MyMath library together

class Calculator {

    constructor(val) {
        this.val = val;
    }

    double() {
        this.val = this.val * 2;
        return this
    }

    add(num){
        this.val = this.val + num;
        return this
    }

    minus(num){
        this.val = this.val - num;
        return this
    }

    multi(num){
        this.val = this.val* num;
        return this
    }

    divide(num){
        this.val = this.val / num;
        return this 
    }

    pow(num){
        this.val = Math.pow(this.val, num);
        return this 
    }

    get value() {
        return this.val; }}Copy the code

Test code:

const cal = new Calculator(10);

const val = cal.add(10) / / 20
    .minus(5) / / 15
    .double() / / 30
    .multi(10) / / 300
    .divide(2) / / 150
    .pow(2)   / / 2250
    .value;
console.log(val); / / 2250
Copy the code

Doesn’t it look easy? 666.

Suitable scene

Data flow processing and centralized processing. After all, functions are all about processing data.

Pipe combination

Chain calls actually reduce code reuse to a certain extent, yes! So there’s another programming concept, pipeline composition.

Pipeline composition, you don’t have to write the data processing functions on the same object or class, just arrange them together, and then execute them according to the flow, 666 ah really.

The pipeline combination realizes Calculator

Wait for you to do it

summary

Link call is an idea, pipeline composition is also an idea, thought back, flexible use is the key. Are you right? Did you harvest anything today?