Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.10.2016, 21:10
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Оптимизировать или упростить код
Всем доброго времени суток.
Есть вопрос по оптимизации кода.
Делаю велосипед (очередную валидацию формы), но вопрос только по куску кода.
Задача такая
Есть поля формы,
<input type="text" class="form-control " pattern="" placeholder="">

нужно перебрать все поля и если в поле есть атрибут pattern то нужно его обернуть в обертку и добавить еще несколько блоков. Должно получится так
<div class="val-wrapInput">
			<input type="text" class="form-control " placeholder="">
			<div class="val-wrapSuccess">
				<div class="val-success">
					<span class="val-leftSuccess"></span>
					<span class="val-rightSuccess"></span>
				</div>
			</div>
			<div class="val-wrapError">
				<div class="val-error">
					<div class="val-leftError"></div>
					<div class="val-rightError"></div>
				</div>
			</div>
		</div>

Сделал так (код на Typescript, но там все понятно, даже понятнее чем на JS):
Метод createElements запускается один раз при загрузке и создает нужные элементы
createElements(){
		this.wrapper = document.createElement('div');
		this.wrapper.className = 'val-wrapInput';
		this.success = document.createElement('div');
		this.success.className = 'val-wrapSuccess';
		this.success.innerHTML = '<div class="val-success">'
					+'<span class="val-leftSuccess"></span>'
					+'<span class="val-rightSuccess"></span>'
				+'</div>';
		this.error = document.createElement('div');
		this.error.className = 'val-wrapError';
		this.error.innerHTML = '<div class="val-error">'
					+'<span class="val-leftError"></span>'
					+'<span class="val-rightError"></span>'
				+'</div>';
	}

А метод addHtml перебирает поля формы клонирует уже созданные элементы предыдущим методом и оборачивает нужные поля в обертку и добавляет дополнительные блоки:
addHtml(){
		let input = this.form.getElementsByTagName('input');

		for (var i = 0; i < input.length; i++) {
			if(input[i].hasAttribute('pattern')) {
				let wrapper = this.wrapper.cloneNode(true);
				let success = this.success.cloneNode(true);
				let error = this.error.cloneNode(true);
				wrapper.innerHTML = input[i].outerHTML;
				input[i].parentNode.replaceChild(wrapper, input[i]);
				wrapper.appendChild(success);
				wrapper.appendChild(error);
			}
		}
	}

Все работает, но как то громоздко получилось, или это я к jQuery больше привык не знаю
Буду признателен за подсказки!
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2016, 11:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Bond,
input.insertAdjacentHTML('afterend', '<div class="val-wrapInput"><div class="val-wrapSuccess">...</div>...</div>');
input.nextSibling.insertBefore(input, input.nextSibling.firstChild);
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2016, 16:23
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Rise,
Спасибо Вам, удалось сократить код на целую гору операций и удалить лишний метод.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кастомный селект, чекбокс, радио vostok Ваши сайты и скрипты 0 12.08.2013 00:33
javascript обфускатор или как правильно скрыть код syegorius Общие вопросы Javascript 1 19.09.2012 02:58
Оптимизировать код -=1100=- Общие вопросы Javascript 8 28.06.2012 18:24
Оптимизировать код adrian16 Events/DOM/Window 9 09.06.2011 16:42
Стоит ли пользоваться библиотеками или лучше писать свой код? lancer Общие вопросы Javascript 5 24.03.2008 19:31