07.04.2018 16:12:47
Разбираем некоторые ошибки (JS)
Из-за того, что на одном из ресурсов случился бедлам из-за смены руководства, периодически поступают мне просьбы убрать какой-нибудь код с сайта. Я этих людей понимаю, ибо пока ресурс не приведут в порядок, там всякое может со сторонним кодом случиться, вплоть до полной подмены содержимого на что-нибудь левое (любой сторонний ресурс потенциально небезопасен, а если без HTTPS - то туда ещё и провайдер может рекламку запендюрить для полного счастья), но речь в статье не о том. В нашем примере разберём один из подобных кривоватых скриптов:
1) Код содержит ошибку. Догадайтесь, какую. Правильно, обращение к нулевому указателю. Что будет, если у пользователя нет привилегии на фразы входа/выхода? Нужные поля формы присутствовать не будут, и document.getElementById('enter_mess') вернёт null. А у null нет поля .value. Javascript простит вам этот косяк и всё, что сделает - выбросит исключение и напишет о нём в логе ошибок. Вы выстрелили себе в ногу, поздравляю.
2) Код содержит множество дублирования. Не знаю, как для вас, а для меня это выглядит некрасиво. Желательно вынести в отдельную функцию.
3) Мы сравниваем строковое значение с нулём. Серьёзно??? Да, оно сработает, потому что тип будет преобразован, но из хлеба тоже можно сделать троллейбус.
После небольшого исправления получилось так:
Мы рассмотрели, как можно улучшить функцию, а теперь рассмотрим ещё одну проблему. Данная функция требует правок в шаблоне. Она требует, чтобы на кнопку было назначено событие, вызывающее функцию addNick при нажатии. А также требует, чтобы элементам формы был назначен id, дублирующий в принципе атрибуты name. Соответственно, зачем эти поля добавлять? Мы можем просто повесить на нашу форму событие отправки, а также обращаться к полям по name. Соответственно, для этого нам и не надо даже получать эти поля, мы же можем к ним обращаться как к полям формы. В итоге получим что-то вроде этого (не работает в древних версиях IE, но хоть кто-то их в чатах использует?):
В качестве бонуса:
function addNick() {
var form1 = document.getElementById('enter_mess').value;
var check1 = form1.indexOf("NICK");
var form2 = document.getElementById('quit_mess').value;
var check2 = form2.indexOf("NICK");
if (check1 == -1 && form1 != 0) {
document.getElementById('enter_mess').value = "NICK " + form1;
}
if (check2 == -1 && form2 != 0) {
document.getElementById('quit_mess').value = "NICK " + form2;
}
}
Удивительно, код работает. Не работал бы, админы его не ставили, но в нём есть парочку НО:var form1 = document.getElementById('enter_mess').value;
var check1 = form1.indexOf("NICK");
var form2 = document.getElementById('quit_mess').value;
var check2 = form2.indexOf("NICK");
if (check1 == -1 && form1 != 0) {
document.getElementById('enter_mess').value = "NICK " + form1;
}
if (check2 == -1 && form2 != 0) {
document.getElementById('quit_mess').value = "NICK " + form2;
}
}
1) Код содержит ошибку. Догадайтесь, какую. Правильно, обращение к нулевому указателю. Что будет, если у пользователя нет привилегии на фразы входа/выхода? Нужные поля формы присутствовать не будут, и document.getElementById('enter_mess') вернёт null. А у null нет поля .value. Javascript простит вам этот косяк и всё, что сделает - выбросит исключение и напишет о нём в логе ошибок. Вы выстрелили себе в ногу, поздравляю.
2) Код содержит множество дублирования. Не знаю, как для вас, а для меня это выглядит некрасиво. Желательно вынести в отдельную функцию.
3) Мы сравниваем строковое значение с нулём. Серьёзно??? Да, оно сработает, потому что тип будет преобразован, но из хлеба тоже можно сделать троллейбус.
После небольшого исправления получилось так:
function addNick() {
function addNickToInput(id) {
var el = document.getElementById(id);
if (el && el.value && el.value.indexOf('NICK') < 0) {
el.value = 'NICK ' + el.value;
}
}
addNickToInput('enter_mess');
addNickToInput('quit_mess');
}
Тут всё стало намного понятнее - для начала получаем элемент. Затем по-очереди проверяем: его наличие, непустоту у него поля .value, а также отсутствие в нём подстроки NICK. Если есть - добавляем туда NICK. Всё намного проще, чем в коде от Да Винчи. Конечно, вы можете ещё как-нибудь упростить его или по другому расписать, а можете и вообще прогнать через минификатор, будет работать.function addNickToInput(id) {
var el = document.getElementById(id);
if (el && el.value && el.value.indexOf('NICK') < 0) {
el.value = 'NICK ' + el.value;
}
}
addNickToInput('enter_mess');
addNickToInput('quit_mess');
}
Мы рассмотрели, как можно улучшить функцию, а теперь рассмотрим ещё одну проблему. Данная функция требует правок в шаблоне. Она требует, чтобы на кнопку было назначено событие, вызывающее функцию addNick при нажатии. А также требует, чтобы элементам формы был назначен id, дублирующий в принципе атрибуты name. Соответственно, зачем эти поля добавлять? Мы можем просто повесить на нашу форму событие отправки, а также обращаться к полям по name. Соответственно, для этого нам и не надо даже получать эти поля, мы же можем к ним обращаться как к полям формы. В итоге получим что-то вроде этого (не работает в древних версиях IE, но хоть кто-то их в чатах использует?):
<script>
document.forms[0].addEventListener('submit', function addNick(event) {
function addNickToInput(el) {
if (el && el.value && el.value.indexOf('NICK') < 0)
el.value = 'NICK ' + el.value;
}
addNickToInput(event.target.enter_mess);
addNickToInput(event.target.quit_mess);
});
</script>
Данный код уже работает безо всяких других правок в дефолтном шаблоне, просто скопировал в низ шаблона и вставил. А лучше даже не в низ, а внутри блока %PHRASES_PANEL<<<END, дабы он выводился только у тех, у кого есть действительно привилегия (но не критично, при отсутствии нужных полей он просто ничего не будет делать).document.forms[0].addEventListener('submit', function addNick(event) {
function addNickToInput(el) {
if (el && el.value && el.value.indexOf('NICK') < 0)
el.value = 'NICK ' + el.value;
}
addNickToInput(event.target.enter_mess);
addNickToInput(event.target.quit_mess);
});
</script>
В качестве бонуса:
Скрытый текст
1) В виде data uri (скопировал в шаблон и вставил, нет небходимости грузить на сервер):
<script src="data:text/javascript;base64,ZG9jdW1lbnQuZm9ybXNbMF0uYWRkRXZlbnRMaXN0ZW5lcignc3VibWl0JyxmdW5jdGlvbihiKXtmdW5jdGlvbiBjKGQpe2QmJmQudmFsdWUmJjA+ZC52YWx1ZS5pbmRleE9mKCdOSUNLJykmJihkLnZhbHVlPSdOSUNLICcrZC52YWx1ZSl9YyhiLnRhcmdldC5lbnRlcl9tZXNzKSxjKGIudGFyZ2V0LnF1aXRfbWVzcyl9KTsg"></script>
2) Для фанатов стрелочных функций (не работает в старых браузерах):<script src="data:text/javascript;base64,ZG9jdW1lbnQuZm9ybXNbMF0uYWRkRXZlbnRMaXN0ZW5lcignc3VibWl0JyxhPT57bGV0IGI9YS50YXJnZXQ7W2IuZW50ZXJfbWVzcyxiLnF1aXRfbWVzc10uZm9yRWFjaChjPT5jJiZjLnZhbHVlJiYwPmMudmFsdWUuaW5kZXhPZignTklDSycpJiYoYy52YWx1ZT0nTklDSyAnK2MudmFsdWUpKX0p"></script>