Всем привет!
Изучаю JavaScript последние пару месяцев и есть вопрос касаемо того как создать компонент или модуль без фворков.
Так получилось, что сначала я полностью увлёкся React и Vue, и только потом начал копать в сторону нативного языка.
Например нам нужно создать компонент модуль, где будет обращение к форме, методы для отправки и валидации, какие-либо промежуточные функции, например:
import React, { useState } from "react";
import { connect } from "react-redux";
import Proptypes from "prop-types";
// ACTIONS
import { login } from "../../store/actions/auth";
const Login = ({ login, isAuth }) => {
const [formData, setFormData] = useState({
email: "",
password: "",
});
const { email, password } = formData;
const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = async (e) => {
e.preventDefault();
login({ email, password });
};
return (
<form className="form" onSubmit={(e) => onSubmit(e)}>
<div className="form-group">
<input
type="email"
placeholder="Email Address"
name="email"
value={email}
onChange={(e) => onChange(e)}
/>
</div>
<div className="form-group">
<input
type="password"
placeholder="Password"
name="password"
value={password}
onChange={(e) => onChange(e)}
/>
</div>
<input type="submit" className="btn btn-primary" value="Login" />
</form>
);
};
Login.propTypes = {
login: Proptypes.func.isRequired,
isAuth: Proptypes.bool,
};
const mapStateToProps = (state) => ({
isAuth: state.auth.isAuth,
});
export default connect(mapStateToProps, { login })(Login);
Выше я создаю компонент Login в котором есть форма, к форме и к инпутам привязываются события, которые мы вызываем вне разметки jsx (onChange, onSubmit)...
В рамках реакта всё логично и понятно, как работать с компонентами, как обрабатывать события и e.t.c.
Вопрос состоит в том как реализовать такой модуль на нативном языке ?
Я понимаю что можно так:
1) Создать компонент:
class Login {
constructor() {
this.state = {
email: "",
password: "",
};
}
onChange(e) {
this.state[e.target.name] = e.target.value;
}
onSubmit(e) {
const { email, phone, password } = this.state;
const formData = {
email,
phone,
password,
};
console.log(formData);
}
isLoading() {
return !this.state.loading;
}
}
export const loginForm = new Login();
2) Импортить его в основной файл:
import {signIN} from './module/SignIn';
3) Обратиться к элементам на странице, привязать события и вызывать методы уже тут:
import {loginForm} from './module/SignIn';
const inputs = document.querySelectorAll('.input-form');
const form = document.querySelector('.form');
inputs.forEach((el) => {
el.addEventListener('input', function (e) {
loginForm.onChange(e)
})
});
form.addEventListener('submit', function (e) {
e.preventDefault()
loginForm.onSubmit(e)
})
Понимаю что можно привязать элементы ещё в конструкторе модуля, но вроде как так не делают...
Как подойти к реализации подобных компонентов ? (интересует именно подход и архитектура).
Help please
