Методы рефакторинга JavaScript: специфичные для общего кода

• Хранение строк в переменных поможет нам управлять ими из одного места.
• onchange события onchange проблематичен, поскольку его можно перезаписать. Мы должны рассмотреть использование addEventListener вместо этого.
• Свойство className перезапишет существующие имена классов. Мы должны рассмотреть возможность использования classList вместо этого.

После внесения всех этих улучшений мы получим код, который более устойчив к будущим изменениям и его легче обновлять. Итак, начнем …

Используйте переменные для предотвращения дублирования

Идентификатор выпадающего списка («location») и его значение триггера («loc5») являются полезными ссылками для сохранения вместе. Второй элемент <select> также упоминается дважды, который мы можем вывести в отдельную переменную, чтобы предотвратить беспорядок и обеспечить более легкое обслуживание .

Например, вместо двух ссылок на один и тот же элемент, который нужно было бы изменить, если изменился идентификатор элемента:

 // bad code if (...) { document.getElementById("second").className = "show"; } else { document.getElementById("second").className = ""; } 

Мы можем хранить ссылку на этот элемент в переменной, ограничивая будущие изменения только местом, где назначена переменная:

 // good code var target = document.getElementById("second"); if (...) { target.className = "show"; } else { target.className = ""; } 

Вытягивая эти строки вместе в верхнюю часть кода и выделяя части условия if, специфичная для универсального метода приводит к коду, который легче поддерживать как сейчас, так и в будущем. Если какой-либо из идентификаторов или значений параметров изменяется, их все можно легко найти в одном месте, вместо того, чтобы искать код для всех их вхождений.

 // improved code var source = document.getElementById("location"); var target = document.getElementById("second"); var triggerValue = "loc5"; source.onchange = function () { var selectedValue = this[this.selectedIndex].value; if (selectedValue === triggerValue) { target.className = "show"; } else { target.className = ""; } }; 

Улучшение обработки событий

Традиционные обработчики событий все еще довольно популярны (и в этом случае использовались правильно), но у них есть некоторые проблемы. Главным среди них является то, что при настройке обработчика события для элемента таким способом вы перезапишете любой предыдущий обработчик для того же события.

 // bad code source.onchange = function () { // ... }; 

В настоящее время приведенный выше код работает. Мы можем продемонстрировать это с помощью теста.

Краткое примечание о тестировании

Философия : тесты — отличный способ убедиться, что код, который вы пишете, ведет себя так, как вы ожидаете. Они уменьшают вероятность того, что изменения, внесенные вами в код, приведут к поломке чего-либо еще в другом месте кода. Введение в тестирование, к сожалению, выходит за рамки этой статьи (хотя в SitePoint есть много отличного контента по этой теме). Вы все равно сможете следовать, не написав тест в своей жизни.

Синтаксис : В следующих тестах используется среда тестирования Jasmine . Тесты Jasmine (также известные как specs) определяются путем вызова глобальной функции Jasmine it , которая принимает строку и дополнительную функцию в качестве аргументов. Строка — это заголовок спецификации, а функция — сама спецификация. Вы можете прочитать больше о Жасмин на домашней странице проекта .

Обратите внимание, что эта статья будет посвящена тестированию внешнего кода. Если вы ищете что-то сфокусированное на серверной части, обязательно ознакомьтесь с нашим курсом: Разработка через тестирование в Node.js

Запуск тестов

Учитывая предыдущее состояние нашего кода, пройдут следующие два теста:

 it("should add the 'show' class name when the 'loc5' option is selected", function() { changeSelectTo(source, "loc5"); expect(target.classList.contains("show")).toBe(true); }); it("should remove the 'show' class name when an option value different from 'loc5' is selected", function() { changeSelectTo(source, "loc2"); expect(target.classList.contains("show")).toBe(false); }); 

Функция changeSelectTo изменяет значение элемента <select> и ожидание (построенное с использованием функции ожидания Jasmine) устанавливает, что элемент имеет правильное имя класса.

Но как только onchange обработчик onchange — что может сделать любой другой код — функция, которая изменила имя класса, теряется, и вещи начинают работать неправильно. Мы можем продемонстрировать это с помощью дальнейшего теста:

 it("should toggle the class name even when the onchange event is replaced", function () { changeSelectTo(source, "loc2"); expect(target.classList.contains("show")).toBe(false); // Overwrite the onchange handler source.onchange = function doNothing() { return; }; changeSelectTo(source, "loc5"); expect(target.classList.contains("show")).toBe(true); // fails }); 

 // good code source.addEventListener("change", function (evt) { // ... }, false); 

 // improved code var source = document.getElementById("location"); var target = document.getElementById("second"); var triggerValue = "loc5"; source.addEventListener("change", function () { var selectedValue = this[this.selectedIndex].value; if (selectedValue === triggerValue) { target.className = "show"; } else { target.className = ""; } }, false); 

 //source.onchange = toggleShowOnSelectedValue; source.addEventListener("change", toggleShowOnSelectedValue, false); 

 // bad code target.className = "show"; 

 it("should retain any existing class names that were on the target element", function () { changeSelectTo(source, "loc2"); target.classList.add("indent"); expect(target.classList.contains("indent")).toBe(true); changeSelectTo(source, "loc5"); expect(target.classList.contains("indent")).toBe(true); // fails }); 

 // good code target.classList.add("show"); // ... target.classList.remove("show"); 

 // improved code var source = document.getElementById("location"); var target = document.getElementById("second"); var triggerValue = "loc5"; source.addEventListener("change", function () { var selectedValue = this[this.selectedIndex].value; if (selectedValue === triggerValue) { target.classList.add("show"); } else { target.classList.remove("show"); } }, false);