на обычном javascript
window.globalName = "Максим"; // or: window.prompt('Введите ваше имя:');
// вывод нашего компонента в DOM
function messageComponent(name, text){
let currentDate = new Date();
let dateTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
return `
<div class="message-user">
<span class="messege-remove label error outline">Удалить</span>
<p class="name"><samp>${name}</samp><span class="time">${dateTime}</span></p>
<div>
${text}
</div>
</div>
`;
}
// отправка сообщения
function sendMessage(){
// получаем текст из textarea
let data = document.querySelector('.send-text').value.replace(/\n/g, "<br>");
document.querySelector('.send-text').value = "";
// записываем новый DOM
window.document.querySelector('.col-message').innerHTML += messageComponent(globalName, data);
// необходимо повесить событие удаления сообщения, когда добавили новый элемент
let message = window.document.querySelectorAll('.messege-remove');
Array.from(message).forEach(el => {
el.addEventListener('click', event => {
console.log('remove event');
event.target.parentNode.remove();
});
});
}
// событие клика по кнопке отправки сообщения
window.document.querySelector('.send-button').addEventListener("click", sendMessage);
window.document.querySelector('.send-text').addEventListener('keydown', e => {
if (e.keyCode === 13) {
if(e.ctrlKey) {
console.log('ctrl+enter');
sendMessage();
}
}
});
на jquery
window.globalName = "Максим"; // or: window.prompt('Введите ваше имя:');
// вывод нашего компонента в DOM
function messageComponent(name, text){
let currentDate = new Date();
let dateTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
return `
<div class="message-user">
<span class="messege-remove label error outline">Удалить</span>
<p class="name"><samp>${name}</samp><span class="time">${dateTime}</span></p>
<div>
${text}
</div>
</div>
`;
}
// отправка сообщения
function sendMessage(){
// получаем текст из textarea
let el = $('.send-text');
let data = el.val().replace(/\n/g, "<br>"); el.val('');
// записываем новый DOM
$('.col-message').append(messageComponent(globalName, data));
// необходимо повесить событие удаления сообщения, когда добавили новый элемент
$('.messege-remove').on('click', (event) => {
console.log('remove event');
event.target.parentNode.remove();
});
}
// событие клика по кнопке отправки сообщения
$('.send-button').on('click', sendMessage);
$('.send-text').keydown((e) => {
if(e.ctrlKey && e.keyCode == 13){
console.log('ctrl+enter');
sendMessage();
}
});
Я понимаю, что там незначительные скоростные значения, ибо jQuery все же обертка, но ведь нужно понять, что когда мы жертвуем производительностью в счет читабельности, ибо если мы возьмем Angular там будет еще лучше читаться код, ибо мы не работаем с DOM напрямую, но все же производительность будет и там падать в каких-то ситуациях.
