Chainability com Javascript

Escrito por

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:

1$(".opa")
2 .attr("", "")
3 .css("", "")
4 .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:

1const calculador = (initial = 0) => {
2 const obj = {
3 total: initial,
4
5 add: num => {},
6
7 sub: num => {},
8
9 div: num => {},
10
11 mult: num => {},
12 }
13
14 return obj
15}

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:

1const calculador = (initial = 0) => {
2
3 const obj = {
4 total: initial,
5
6 add: (num) => {
7 obj.total+=num
8
9 return obj
10 },
11
12 sub: (num) => {
13 obj.total-=num
14
15 return obj
16 },
17
18 div: (num) => {
19 obj.total/=num
20
21 return obj
22 },
23
24 mult: (num) => {
25 obj.total*=num
26
27 return obj
28 }
29
30 out: () => {
31 console.log(obj.total)
32
33 return obj
34 }
35 }
36
37 return obj
38
39}

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

1calculadora()
2 .add(10)
3 .sub(5)
4 .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:

Deixe suas dúvidas e sugestões nos comentários. 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!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium