Chainability com Javascript

Hoje eu quero mostrar como podemos construir um pattern que é muito utilizado no Jquery. Apesar de não ser um pattern que muita gente gosta, é bastante interessante.

Vamos construir um para você ter uma ideia de como podemos fazer e também para entender um pouco da linguagem que está ali por trás.

Ele também pode ser utilizado em outras linguagens além do JavaScript.

Em jQuery, podemos fazer o seguinte:

$('.opa').attr('', '').css('', '').click()

Essa possibilidade de encadear coisas relacionadas a um elemento é chamado de Chainability, isso é bastante interessante para o JavaScript.

Como podemos ter um comportamento semelhante a esse?

Vamos criar uma calculadora para você ter uma ideia de como se utiliza:

const calculador = (initial = 0) => {
  const obj = {
    total: initial,

    add: (num) => {},

    sub: (num) => {},

    div: (num) => {},

    mult: (num) => {}
  }

  return obj
}

A calculadora foi construída, mas até agora não temos a possibilidade de fazer esse chain. O que permite a gente fazer isso é o seguinte:

const calculador = (initial = 0) => {

  const obj = {
    total: initial,

    add: (num) => {
      obj.total+=num

      return obj
    },

    sub: (num) => {
      obj.total-=num

      return obj
    },

    div: (num) => {
      obj.total/=num

      return obj
    },

    mult: (num) => {
      obj.total*=num

      return obj
    }

    out: () => {
      console.log(obj.total)

      return obj
    }
  }

  return obj

}

Só o fato de conseguirmos retornar o obj, já é possível fazer o seguinte:

calculadora().add(10).sub(5).out()

Assim já conseguimos saber qual é o retorno dele. A ideia do chainlability é que toda operação que ele faz ele vai retornar o próprio objeto. Isso faz muito sentido para o jQuery, já que mudamos o html de forma imperativa.

Confira o vídeo:

Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!