Orientação a Objetos com JavaScript | Encapsulamento – É Possível?
O que é Encapsulamento?
Encapsulamento é o processo de esconder a implementação interna de um objeto e permitir o acesso aos dados somente por meio de interfaces bem definidas. Isso significa que os detalhes internos do objeto não são visíveis ou acessíveis fora da sua definição, mantendo a integridade e coesão do código.
Encapsulamento é um dos conceitos fundamentais da programação orientada a objetos (POO) e desempenha um papel crucial na criação de código limpo, organizado e de fácil manutenção.
O JavaScript é uma linguagem versátil e dinâmica, também suporta os princípios da orientação a objetos, incluindo encapsulamento.
Sim, é possível implementar encapsulamento em JavaScript.
Embora JavaScript seja uma linguagem de programação que originalmente não possui suporte direto para encapsulamento como algumas linguagens orientadas a objetos, existem técnicas que podem ser utilizadas para alcançar esse objetivo.
Neste artigo exploramos o que é encapsulamento em JavaScript e como aplicá-lo, especialmente para iniciantes. No exemplo de hoje utilizaremos funções construtoras e o conceito de this podemos criar instâncias com métodos privados e públicos.
ENCAPSULAMENTO.JS
export default class Usuario{
constructor(login, senha){
this.login = login;
let _senha = senha;
this.getSenha = () => _senha;
}
logar(){
if(this.login === 'admin' && this.getSenha() === '123'){
window.open('https://desvendandoocodigo.com.br/');
}else{
window.open('./Error.html');
}
}
}ERROR.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error</title>
<style>
div{
padding: 20px;
font-size: 20pt;
font-weight: bold;
width: 50%;
background-color: rgb(222, 251, 251);
margin: auto;
}
body{
background-color: black;
}
input{
display: flex;
height: 40px;
}
</style>
</head>
<body>
<div>
<h1>Login ou Usuário Inválido!</h1>
</div>
</body>
</html>
INDEX.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encapsulamento com JavaScript</title>
<style>
div{
padding: 20px;
font-size: 20pt;
font-weight: bold;
width: 50%;
background-color: rgb(222, 251, 251);
margin: auto;
}
body{
background-color: black;
}
input{
display: flex;
height: 40px;
}
</style>
</head>
<body>
<div>
<form>
<p>
Usuário:
<input type="text" id="inUsuario">
</p>
<p>
Senha:
<input type="text" id="inSenha">
</p>
<input type="submit">
</form>
</div>
<script type="module">
import Usuario from './encapsulamento.js'
const frm = document.querySelector('form');
frm.addEventListener('submit',()=>{
const user = frm.inUsuario.value;
const senha = frm.inSenha.value;
const usuario1 = new Usuario(user, senha);
usuario1.logar();
})
</script>
</body>
</html>Conclusão
O encapsulamento é uma prática essencial para escrever código JavaScript limpo, modular e de fácil manutenção. Ao encapsular propriedades e métodos, podemos garantir a integridade dos nossos objetos e reduzir o acoplamento entre diferentes partes do código. Espero que este artigo tenha fornecido uma compreensão básica de como aplicar encapsulamento em JavaScript, especialmente para iniciantes. Experimente praticar esses conceitos em seus próprios projetos para aprimorar suas habilidades de desenvolvimento!
2 Comments
DAVI DA SILVA OLIVEIRA
Top! Muito bom o aprendizado, obrigado
Marcos
Obrigado David, bons estudos.