Executando verificação de segurança...
1
estevaog3
1 min de leitura ·

[DICA] Javascript: prefira efeitos atômicos sempre que possível

Fala, galera! Tudo bem com vocês?

Nestes dias estou trabalhando em um projeto com Javascript e JQuery e gostaria de compartilhar essa dica. Saca só.

Prefira efeitos atômicos sempre que possível

Considere uma sidebar que deve ter 3 comportamentos: toggle (abrir/fechar), adicionar uma animação e enviar uma notificação.

Para implementar esses efeitos de forma atômica, seria assim:

$(document).ready(() => {
  $(".sidebar").on("click", function() => {
    $(this).toggleClass("closed");
    $(".sidebar .item").toggleClass("closed--foo-bar");
  });

  $(".sidebar").on("click", function() => {
    addAnimationFooBarComponent();
  });

  $(".sidebar").on("click", () => {
    if(localStorage.getItem("foo") == "bar") {
      sendNotification()
    }
  });
});

Com isso, não teremos grandes problemas se quisérmos remover algum dos efeitos por algum motivo.

Agora veja como seria difícil se os efeitos estivessem todos numa só função:

$(document).ready(() => {
  $(".sidebar").on("click", function() => {
    $(this).toggleClass("closed");
    $(".sidebar .item").toggleClass("closed--foo-bar");
    addAnimationFooBarComponent();
    if(localStorage.getItem("foo") == "bar") {
      sendNotification()
    }
  });

});

A manutenção de algum deles iria requerer bem mais tempo de análise, até mesmo neste exemplo simples.

Perguntas

E aí, o que acharam? Será que isso escala? Vocês já viram isso em algum lugar? Mas pera, isso ao menos faz sentido?

Carregando publicação patrocinada...
3
johnhenrique

comparando visualmente, parece fazer sentido sim, fica mais simples de analisar e compreender.

por outro lado, costumo programar JavaScript usando notação, ao meu ver é mais simples ainda...

o código fica grande mas, ao meu ver, fica organizado como nas classes em PHP usando OOP.

class SidebarHandler {
  constructor() {
    this.sidebar = $(".sidebar");
    this.items = $(".sidebar .item");
    this.init();
  }
  // Inicializa os eventos
  init() {
    $(document).ready(() => {
      this.sidebar.on("click", () => this.handleSidebarClick());
    });
  }
  // Função que manipula o clique na sidebar
  handleSidebarClick() {
    this.toggleSidebarClasses();
    this.addAnimationFooBarComponent();
    this.checkAndSendNotification();
  }
  // Alterna as classes da sidebar e dos itens
  toggleSidebarClasses() {
    this.sidebar.toggleClass("closed");
    this.items.toggleClass("closed--foo-bar");
  }
  // Adiciona animação ao componente
  addAnimationFooBarComponent() {
    // Lógica da animação
  }
  // Verifica a condição e envia uma notificação
  checkAndSendNotification() {
    if (localStorage.getItem("foo") === "bar") {
      this.sendNotification();
    }
  }
  // Função para enviar notificação
  sendNotification() {
    // Lógica de envio de notificação
  }
}
// Instancia a classe para ativar a funcionalidade
const sidebarHandler = new SidebarHandler();
1
estevaog3
Autor
Autor

Ahh, muito bom oh!

Vê se entendi direito, o construtor em questão é o do SidebarHandler ne?

class SidebarHandler {
    constructor(){
        // ... init, elements
    }
    
    // ... funções

}

const sidebarHandler = new SidebarHandler();
1