Chainability com Javascript
Tulio Faria10 de novembro de 2017
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!
Autor
Tulio Faria10 de novembro de 2017