Organização de Seletores Jquery

Front-end
,
#1

Bem, estou partindo do back pro front end agora e, inclusive, trabalhando em um projeto pessoal pra aprender e praticar, utilizando Jquery. Acontece que me incomoda um pouco ficar sempre que quiser trabalhar um elemento chamando $("#id_do_elemento")…

Digamos que eu tenha duas telas (“registrar_usuario.html” e “registrar_profissao.html”) e dentro de cada formulario eu tenho um campo com o ID ‘nome’.
Se eu quiser tratar os dois campos no mesmo arquivo JS eu nao conseguiria porque iria conflitar por causa do Id igual… E encontrei uma forma de me organizar, criando um arquivo jquery_selectors.js:

    `const selectors = {
             user_register: {name: '#reg_user_name'},
             job_register: {name: '#reg_job_name'}
     }`

Logo quando no arquivo script.js eu chamar o seletor, ao inves de precisar especificar o ID apenas faço isso:

$(selectors.user_register.name).on('input', () => {})

Em opniões mais experientes em front end, isso é um tipo de organização exagerada, desnecessaria, inutil, etc… O que acham ?

#2

É um exagero sim, torna o desenvolvimento burocrático. Nāo entendi o incomodo, eu copio e colo o id que está no HTML.

Não tem haver com o tópico, mas por questoes de performance, o que voce deve evitar é fazer query mais de uma vez em um mesmo elemento, pelo menos durante uma ação do usuário. Somente quando acontecer isso, joga em uma variável antes.

Eu não costumo setar eventos dessa forma que postou, deixo declarado no HTML pra ficar mais claro o que aquele elemento vai fazer:

<input type="text" oninput="suaFuncaoJs(this)">

2 curtidas