Используете ли вы js шаблонизатор?

dremora

Захожу иногда
461
48 / 12

Используете ли вы js шаблонизатор?

« : 22.07.2014, 13:42:09 »

Я тут присматриваюсь к doT.js и Mustashe

Причина в том, что рендерить через "+=" или через "''.concat()" не удобно...
Шаблонизатор именно нужен прежде всего для удобства шаблонизации, а не для просто так...

Записан

Всё что не анархия, то фашизм...

AlekVolsk

Гуру
6913
416 / 4

Re: Используете ли вы js шаблонизатор?

« Ответ #1 : 22.07.2014, 16:09:24 »

Цитировать

Используете ли вы js шаблонизатор?

Хмм, правильно ли я понял, клиенту передается не готовая разметка, а скрипт для ее формирования уже браузером?
А смысл? Разгрузить сервер - не разгрузишь, скрипт явно будет весить больше готовой разметки - время на трафик, браузер получит двойную нагрузку: сначала формирует разметку скриптом, а потом ее же парсит, а если машина у клиента тормознутая -соответствующие подвисания, как следствие - негатив к сайту. Не, я против подобного механизма.
Или я неправильно Вас понял?

Записан

Личка | Вкусняшки

dremora

Захожу иногда
461
48 / 12

Re: Используете ли вы js шаблонизатор?

« Ответ #2 : 22.07.2014, 16:45:19 »

Цитата: AlekVolsk от 22.07.2014, 16:09:24

Хмм, правильно ли я понял, клиенту передается не готовая разметка, а скрипт для ее формирования уже браузером?
А смысл? Разгрузить сервер - не разгрузишь, скрипт явно будет весить больше готовой разметки - время на трафик, браузер получит двойную нагрузку: сначала формирует разметку скриптом, а потом ее же парсит, а если машина у клиента тормознутая -соответствующие подвисания, как следствие - негатив к сайту. Не, я против подобного механизма.
Или я неправильно Вас понял?

Можно по разному сделать, с подгрузкой шаблонов по AJAX, а можно чтобы загружался разово. В любом случае, когда делаешь сложный AJAX проект, то чтобы не запутаться, лучше использовать шаблоны js. А информацию передавать через json.
Просто щас изучаю Питон и там есть хорошая штука с подстановкой значений. Делаешь любой текст в тройных одинарных кавычках, а слоты для переменных помечаются специальными символами. В общем очень удобно... Когда понял что в JavaScript такого нету был разочарован.

Формировать на сервере AJAX страницу - плохая идея, поскольку иногда нужно обработать разметку ещё js логикой. Кроме того, это растратно постоянно передавать и рендерить страницу. Трафик экономится очень сильно... Напомню, что из-за минимализма json в сумме используется чаще чем XML!

Записан

Всё что не анархия, то фашизм...

AlekVolsk

Гуру
6913
416 / 4

Re: Используете ли вы js шаблонизатор?

« Ответ #3 : 22.07.2014, 16:59:47 »

Да, кэш браузера будет весить как весь сайт )) а про AJAX не подумал, возможно, json - это хорошее решение.

Записан

Личка | Вкусняшки

fsv

Живу я здесь
2787
413 / 2

Re: Используете ли вы js шаблонизатор?

« Ответ #4 : 22.07.2014, 17:01:04 »

Пробежал сейчас по http://olado.github.io/doT/index.html
Напомнило jQuery Templates plugin. Читал о нем в "jQuery для профессионалов. Фримен Адам", с примерами, объяснениями. Но только так и не понял его прелести, поэтому пока не приходилось использовать. Так и не понял, что мешает мне Data задать в виде объекта а-ля json (или в коде, в т.ч. и расширяя/изменяя его по ходу пьесы, или подгружать с сервера), создать в js один универсальный шаблон, и в зависимости от ситуации подставлять в него из Data нужные значения, в том числе и размножать исходный шаблон в цикле (вывод товаров категории).
Речь о клиенте. Интересно было бы увидеть конкретные навороченные примеры, в которых шаблоны (в качестве доп.библиотеки) реально облегчают жизнь.

Записан

Веб-разработка: заказ. Только новая разработка.

dremora

Захожу иногда
461
48 / 12

Re: Используете ли вы js шаблонизатор?

« Ответ #5 : 22.07.2014, 17:38:57 »

Ну вот например я хочу эту балду сделать через шаблон:

Код

var cmedititemrender = (function(data)
                        {
                         roles=data.roles;
                         var selectroles = [];
                         var selected = '';
                         for(i=0;i<allroles.length;i++) {
                            selected = '';
                            if(roles.indexOf(allroles[i][0])!= '-1')
                            {
                                selected = ' selected="selected"';
                            }
                            else
                            {
                                selected = '';
                            }
                            <?python exception1 = "selectroles[i] = '<option value=\"'+allroles[i][0]+'\" '+selected+' >'+allroles[i][1]+'</option>'" ?>
                            ${structure: exception1}
                         }
                         
                         var result = ''.concat(
'<form id="editform" class="nice validate"><div class="row editsavemenu"><div class="eight columns"><div class="opheader"><h5>Редактировать</h5></div><div class="opstatus"></div></div><div class="four columns">',
'<div class="gh_button-group">',
'<a href="javascript: void(0);" id="saveitem" class="gh_button primary pill">Сохранить</a>',
'<a href="javascript: void(0);" id="restoreitem" class="gh_button pill">Сбросить</a></div></div></div><div class="row">',
'<div class="eight columns"><div class="formRow elVal"><div class="row"><div style="float:left;"><label for="nice_text_medium">Системное имя пользователя:</label>',
'<input type="text" id="setusername" name="setusername" value="'+data.username+'" class="input-text medium" />',
'</div><div class="ttipform"><span class="ttip_r" title="Lorem ipsum dolor sit amet"><img src="img/ico/icSw2/16-Info-_-About.png" /></span></div></div></div>',
'<div class="formRow elVal"><div class="row"><div style="float:left;"><label for="nice_text_medium">Полное имя пользователя:</label>',
'<input type="text" id="setfullname" name="setfullname" value="'+data.fullname+'" class="input-text medium" />',
'</div><div class="ttipform"><span class="ttip_r" title="Lorem ipsum dolor sit amet"><img src="img/ico/icSw2/16-Info-_-About.png" />',
'</span></div></div></div><div class="formRow elVal"><div class="row"><div style="float:left;"><label for="nice_text_medium">Электронная почта:</label>',
'<input type="text" id="setemail" name="setemail" value="'+data.email+'" class="input-text medium" />',
'</div><div class="ttipform"><span class="ttip_r" title="Lorem ipsum dolor sit amet"><img src="img/ico/icSw2/16-Info-_-About.png" />',
'</span></div></div></div><div id="changepassword" class="formRow"><a href="javascript: void(0);">Изменить пароль?</a></div>',
'<span id="ifchangepassword"><div class="formRow elVal"><div class="row"><div class="three columns">',
'<label for="nice_text_medium">Пароль:</label><input type="password" id="setpassword" name="setpassword" value="" class="input-text medium" />',
'</div><div class="five columns"><a id="generatepassword" href="javascript: void(0);">Сгенерировать пароль:</a>',
'</div></div></div><div class="formRow elVal"><div class="row"><div style="float:left;"><label for="nice_text_medium">Пароль ещё раз:</label>',
'<input type="password" id="setpasswordconfirm" name="setpasswordconfirm" value="" class="input-text medium" /></div>',
'<div class="ttipform"><span class="ttip_r" title="Lorem ipsum dolor sit amet"><img src="img/ico/icSw2/16-Info-_-About.png" />',
'</span></div></div></div></span></div>',
'<div class="four columns"><label class="sepH_b">Список ролей:</label>',
'<select id="setroles" data-placeholder="Список доступных ролей" style="width:300px;" class="chzn-select" multiple tabindex="6">',
''.concat(selectroles),
'</select></div></div><input type="hidden" id="edititemid" value="'+data.id+'" /></form>'
                         );
                         editrestore = result;
                         return result;
                        }
                      );

<?python - это потому что у меня ещё сам js рендерит сервер и выводит через Chameleon.

Т.к. нервов нет править это потом в самом скрипте, что случись...

Записан

Всё что не анархия, то фашизм...

fsv

Живу я здесь
2787
413 / 2

Re: Используете ли вы js шаблонизатор?

« Ответ #6 : 22.07.2014, 21:27:00 »

Цитата: dremora от 22.07.2014, 17:38:57

Ну вот например я хочу эту балду сделать через шаблон:...
Т.к. нервов нет править это потом в самом скрипте, что случись...

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

Я не против шаблонов. Просто пока не понял фишку. Этот пример не убедил.

Записан

Веб-разработка: заказ. Только новая разработка.

dremora

Захожу иногда
461
48 / 12

Re: Используете ли вы js шаблонизатор?

« Ответ #7 : 22.07.2014, 22:23:33 »

Цитата: fsv от 22.07.2014, 21:27:00

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

Я не против шаблонов. Просто пока не понял фишку. Этот пример не убедил.

Ну это как бы "шаблон шаблонов")))
просто я по типу него буду другое делать много раз. На каждую таблицу такой вот шаблон. И его надо будет постоянно править, что-то добавлять, убирать...

А dot.js я сделал вот так вот:

Код

<div class="hidehtml">
		
		
		<div id="edittpl">
			<form id="editform" class="nice validate">
				<div class="row editsavemenu">
					<div class="eight columns">
						<div class="opheader">
							<h5>Редактировать</h5>
						</div>
						<div class="opstatus"></div>
					</div>
					<div class="four columns">
						<div class="gh_button-group">
							<a href="javascript: void(0);" id="saveitem" class="gh_button primary pill">Сохранить</a>
							<a href="javascript: void(0);" id="restoreitem" class="gh_button pill">Сбросить</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="eight columns">
						<div class="formRow elVal">
							<div class="row">
								<div style="float:left;">
									<label for="nice_text_medium">Системное имя пользователя:</label>
									<input type="text" id="setusername" name="setusername" value="{{=it.username}}" class="input-text medium" />
								</div>
								<div class="ttipform">
									<span class="ttip_r" title="Lorem ipsum dolor sit amet">
										<img src="img/ico/icSw2/16-Info-_-About.png" />
									</span>
								</div>
							</div>
						</div>
						<div class="formRow elVal">
							<div class="row">
								<div style="float:left;">
									<label for="nice_text_medium">Полное имя пользователя:</label>
									<input type="text" id="setfullname" name="setfullname" value="{{=it.fullname}}" class="input-text medium" />
								</div>
								<div class="ttipform">
									<span class="ttip_r" title="Lorem ipsum dolor sit amet">
										<img src="img/ico/icSw2/16-Info-_-About.png" />
									</span>
								</div>
							</div>
						</div>
						<div class="formRow elVal">
							<div class="row">
								<div style="float:left;">
									<label for="nice_text_medium">Электронная почта:</label>
									<input type="text" id="setemail" name="setemail" value="{{=it.email}}" class="input-text medium" />
								</div>
								<div class="ttipform">
									<span class="ttip_r" title="Lorem ipsum dolor sit amet">
										<img src="img/ico/icSw2/16-Info-_-About.png" />
									</span>
								</div>
							</div>
						</div>
						<div id="changepassword" class="formRow">
							<a href="javascript: void(0);">Изменить пароль?</a>
						</div>
						<span id="ifchangepassword">
							<div class="formRow elVal">
								<div class="row">
									<div class="three columns">
										<label for="nice_text_medium">Пароль:</label>
										<input type="password" id="setpassword" name="setpassword" value="" class="input-text medium" />
									</div>
									<div class="five columns">
										<a id="generatepassword" href="javascript: void(0);">Сгенерировать пароль:</a>
									</div>
								</div>
							</div>
							<div class="formRow elVal">
								<div class="row">
									<div style="float:left;">
										<label for="nice_text_medium">Пароль ещё раз:</label>
										<input type="password" id="setpasswordconfirm" name="setpasswordconfirm" value="" class="input-text medium" />
									</div>
									<div class="ttipform">
										<span class="ttip_r" title="Lorem ipsum dolor sit amet">
											<img src="img/ico/icSw2/16-Info-_-About.png" />
										</span>
									</div>
								</div>
							</div>
						</span>
					</div>
					<div class="four columns">
						<label class="sepH_b">Список ролей:</label>
						<select id="setroles" data-placeholder="Список доступных ролей" style="width:300px;" class="chzn-select" multiple tabindex="6">
							{{=it.htmlroles}}
						</select>
					</div>
				</div>
				<input type="hidden" id="edititemid" value="{{=it.id}}" />
			</form>
		</div>
		
		
	</div>

потом беру этот код в скрытом диве в переменную

Код

edittpl = $('#edittpl').html();

Потом использую этот код по старой схеме почти:

Код

var cmedititemrender = (function(data)
                        {
                         roles=data.roles;
                         var selectroles = [];
                         var selected = '';
                         for(i=0;i<allroles.length;i++) {
                            selected = '';
                            if(roles.indexOf(allroles[i][0])!= '-1')
                            {
                                selected = ' selected="selected"';
                            }
                            else
                            {
                                selected = '';
                            }
                            <?python exception1 = "selectroles[i] = '<option value=\"'+allroles[i][0]+'\" '+selected+' >'+allroles[i][1]+'</option>'" ?>
                            ${structure: exception1}
                         }
                         
                         data.htmlroles = ''.concat(selectroles);
                         var templateFunction = doT.template(edittpl);
                         var result = templateFunction(data);
                         editrestore = result;
                         return result;
                        }
                      );

И читабельность кода значительно повышается, при относительно высокой скорости обработки шаблона и рендеринга...

Записан

Всё что не анархия, то фашизм...

AlekVolsk

Гуру
6913
416 / 4

Re: Используете ли вы js шаблонизатор?

« Ответ #8 : 22.07.2014, 22:35:16 »

Сори за флуд, а чего топик-то во флейме? В общие разработки бы тогда уж, и название поменять на "разработка js-шаблонизатора"

Записан

Личка | Вкусняшки

Используете ли вы js шаблонизатор? - Флейм

Новости Joomla

Вышли релизы Joomla 6.1 и Joomla 5.4.5: новые возможности и стабильность

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

dremora

Используете ли вы js шаблонизатор?

AlekVolsk

Re: Используете ли вы js шаблонизатор?

dremora

Re: Используете ли вы js шаблонизатор?

AlekVolsk

Re: Используете ли вы js шаблонизатор?

fsv

Re: Используете ли вы js шаблонизатор?

dremora

Re: Используете ли вы js шаблонизатор?

fsv

Re: Используете ли вы js шаблонизатор?

dremora

Re: Используете ли вы js шаблонизатор?

AlekVolsk

Re: Используете ли вы js шаблонизатор?

Похожие темы