JavaScript - замена document.write

Great Rash · July 19, 2010

У меня вот тут возникла довольно специфическая проблема - вставить контент, генерируемый скриптом, в определенное место на странице. Контент генерируется при помощи методов DOM createElement и appendChild поэтому вставить на странице его при помощи document.write не получится. Долго придумывал решение и наконец придумал такое:

1) назначаем скрипту id

2) в самом скрипте находим его же по id

3) вставляем нужный контент при помощи insertBefore

Как это выглядит в коде:

<body>

	<!-- задаем id скрипту -->
	<script type="text/javascript" id="script">
		// ищем самого себя
		var self = document.getElementById('script');

		// создаем тестовый элемент
		var test = document.createElement('div');
		test.appendChild(document.createTextNode('я новый элемент!'));

		// вставляем новый элемент на место скрипта
		self.parentNode.insertBefore(test, self);
	</script>

	<div>какой-то элемент</div>

</body>

Все круто! Кроме того, что нужно скрипту задавать id, что не совсем удобно. Поэтому я начал гуглить в поисках более красивого решения... И я его нашел! Автором является некий Андрей Кузнецов:

<head>
	...
	<script type="text/javascript">
		function thisElement() {
			var obj = document.documentElement;
			while (obj.lastChild) obj = obj.lastChild;
			return obj.parentNode;
		}
	</script>
</head>
<body>

	<script type="text/javascript" id="script">
		// ищем самого себя
		var self = thisElement();

		// создаем тестовый элемент
		var test = document.createElement('div');
		test.appendChild(document.createTextNode('я новый элемент!'));

		// вставляем новый элемент на место скрипта
		self.parentNode.appendChild(test);
	</script>

	<div>какой-то элемент</div>

</body>

Вот ссылка на оригинал

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

Надеюсь вам это элегантное решение будет так же полезно как и мне.

Колос · July 19, 2010

Я в таком случае обычно ставлю в код метки в виде пустых div. А потом заменяю их нужными данными.

Не знал, что можно так, как ты делаешь.

Great Rash · July 19, 2010

Вот и я не знал что можно, поэтому начал экспериментировать. Лишние дивы ой как не хотелось создавать. А тут на такое красивое решение наткнулся, что вот спешу делиться с народом. Думаю у многих такая проблема возникала.

s0rr0w · July 19, 2010

Вот и я не знал что можно, поэтому начал экспериментировать. Лишние дивы ой как не хотелось создавать. А тут на такое красивое решение наткнулся, что вот спешу делиться с народом. Думаю у многих такая проблема возникала.

Не вижу особо плюсов в данном способе вообще.

Почему? Все очень просто.

Давайте разберем не способы вставки контента, а сам факт вставки контента. У меня возникает резонный вопрос, зачем контент добавлять при помощи JS, если это может сделать тот же php? В пхп в тысячи раз больше вариантов работы с текстом, и почти все из них гораздо удобнее, чем работа на уровне JS.

Хорошо, мы придумали задачу, которая требует вставки кода именно через JS. Тогда возникает второй резонный вопрос, а почему бы нам не сделать эту вставку уже после того, как вся страница загружена? Почему вставку нужно делать незамедлительно при загрузке страницы? Чтобы избавиться от идентификаторов? Ну так страница совершенно без идентификаторов тоже не решение. Гораздо проще, быстрее и дешевле использовать идентификатор, чем городить огород из скриптов поиска нужных контейнеров для контента.

Идентификатор позволит повторно сделать запрос, эмулятор document.write - нет. Однако есть варианты, когда идентификаторы зло - например для контейнеров перечисляемых данных. Но это уже не относится к данному коду.

Так что этот способ носит чисто академический интерес, реальное же применение его весьма сомнительно.

Great Rash · July 20, 2010

А вот и нет. Когда я работал над интранет-проектом (строили интерфейс), там было очень много генерируемого на клиенте контента, в частности там были огромные, изменяющиеся по ходу заполнения, формы. Была куча страниц которые генерились на сервере полностью или получали часть контента аяксом и для них приходилось генерить айдишники, чтобы потом элементы искать - это было очень не удобно. Знай я об этом методе раньше мне бы очень это пригодилось, кучу лишней работы делать бы не пришлось.

Опять же сейчас (так для себя) делаю один проект в котором этот метод пришелся весьма кстати.

s0rr0w · July 20, 2010

А вот и нет. Когда я работал над интранет-проектом (строили интерфейс), там было очень много генерируемого на клиенте контента, в частности там были огромные, изменяющиеся по ходу заполнения, формы. Была куча страниц которые генерились на сервере полностью или получали часть контента аяксом и для них приходилось генерить айдишники, чтобы потом элементы искать - это было очень не удобно. Знай я об этом методе раньше мне бы очень это пригодилось, кучу лишней работы делать бы не пришлось.
Опять же сейчас (так для себя) делаю один проект в котором этот метод пришелся весьма кстати.

По поводу форм. А зачем ее нужно генерировать при помощи JS, если ее можно генерировать на стороне сервера? На странице генерируется одна огромная форма, и включается/выключается ее контент по мере заполнения. Это же интранет, размер страницы почти не играет роли.

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

Простой пример. Есть раздел статистики, например. В нем есть несколько блоков: календарь, типы статистических отчетов, контент отчета. Календарь и контент отчета делается перезагружаемым, потому что есть начало и конец работы пользователя, а значит и нужно показывать на календаре его период работы.

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

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

Приведу пример.

function loadCalendar( options ) {

// загрузка календаря в контейнер calendarContainer

}

function loadStatReport( filter ) {

// загрузка отчета в контейнер statReportContainer

}

И если в коде мне нужно будет перезагрузить календарь, то достаточно будет вызвать функцию loadCalendar, и нужное действие будет выполнено, независимо от того, в каком месте вызывалась функция.

Загрузилась статическая страница отчетов, вызвали две функции, и дальше пользователь будет сам управлять дальнейшим функционалом и запрашивать данные при помощи двух функций. А программист будет точно знать, что есть всего две функции, при помощи чего генерируется контент.

Great Rash · July 20, 2010

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

s0rr0w · July 20, 2010

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

А я тебе могу сказать, что формы там примитивные. Да, там примерно полторы тысячи полей, но все они крутятся вокруг одного и того же.

Генерировать их можно спокойно все на стороне сервера, единственное отличие - некоторые формы динамически повторяются, поэтому там нужно использовать html-темплейтирование. Нам тоже предстоит их скоро делать. Не увидел там ничего сверх-сложного.

Sign In

JavaScript - замена document.write

Recommended Posts

Great Rash

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Обсуждения

Forums

Important Information