FreeCode.Academy

Стратегии обучения

Уроки

Технологии

Участники

Проекты

Задачи

Таймеры

Топики

Блоги

Офис

О проекте

Николай Ланец
Николай Ланец
28 июля 2013 г., 9:20

Пример мегаотстойного чанка...

Блин, не часто я публикую примеры из области «как не надо делать», но под катом очень достойный образец… А ведь это только чанк HEADER… Особое внимание обратите на кучу IF-ов, и жестко прописанные ID-шники. Это полнй ппц… 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>


 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`1,7` 
   &then=
   `





  <script src="/assets/evropa/js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="/assets/evropa/coin-slider/coin-slider.js"></script>
<link rel="stylesheet" src="/assets/evropa/coin-slider/coin-slider-styles.css">



<script>
		$(document).ready(function() {

			$('#slider-pics').coinslider({ 
			hoverPause: false,

	    width: 700,
	    height: 420,
	   navigation:false,
	   delay:5000


			});
		});

</script>




  <script type="text/javascript" src="/assets/evropa/js/m0_otzyvy.js"></script>
  <script type="text/javascript"  src="/assets/evropa/js/m0_questions.js"></script>
  <script type="text/javascript"  src="/assets/evropa/js/m0_spec.js"></script>
  <script type="text/javascript" src="/assets/evropa/js/m0_menu.js"></script>




<script>
		$(document).ready(function() {

	$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu11').hide();

		});
</script>











   `
   &else=
   `
   <link rel="stylesheet" href="/assets/evropa/css/jquery-ui.css" />
	<script src="/assets/evropa/js/jquery-1.9.1.js"></script>
	<script src="/assets/evropa/js/jquery-ui.js"></script>



  <script src="/assets/evropa/js/jquery.cookie.js"></script>

    <script src="/assets/evropa/js/m0_searching.js"></script>

  <script src="/assets/evropa/js/m0_otzyvy.js"></script>
  <script src="/assets/evropa/js/m0_questions.js"></script>
  <script src="/assets/evropa/js/m0_spec.js"></script>
  <script src="/assets/evropa/js/m0_menu.js"></script>

<!-- Для галереи -->
<link rel='stylesheet' type='text/css' href='/assets/evropa/css/highslide.min.css'/>
<link rel="stylesheet" href="/assets/evropa/colorbox-master/example1/colorbox.css" >

   `
 ]]









 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`3` 
   &then=
   `
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script src="/assets/evropa/colorbox-master/Lazyload.js"></script>

	<script src="/assets/evropa/colorbox-master/jquery.colorbox-min.js"></script>
    <script src="/assets/evropa/js/modernizr_2_6_1.js"></script>

	<script>

	$(document).ready(function () {
	$("img").lazyload({effect : "fadeIn"});
	$("a[rel='colorbox']").colorbox();

		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu11').hide();


	});
	</script>
   `
   &else=
   `
<script>
	$(document).ready(function () {


		$('#left_podmenu1').show();
		$('#left_podmenu2').show();
		$('#left_podmenu3').show();
		$('#left_podmenu4').show();
		$('#left_podmenu5').show();
		$('#left_podmenu6').show();
		$('#left_podmenu7').show();
		$('#left_podmenu8').show();
		$('#left_podmenu9').show();
		$('#left_podmenu10_1').show();
		$('#left_podmenu10').show();
		$('#left_podmenu11').show();
});

</script>

   `
 ]]




<title>[[*pagetitle]]  </title>

<link href="/assets/evropa/css/style.css" rel="stylesheet" type="text/css" />
<link href="/assets/evropa/css/ios_style.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />

[[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`1,7` 
   &then=
   `

   `
   &else=
   `

<script>
$(function() {

//$( "#tabs" ).tabs();

// инициализация вкладок
// (будет открыта первая вкладка)
var coact = $.cookie("tabs[[*id]]");
if(coact==''){ coact = 0;}
var $tabs = $('#tabs').tabs();
$("#tabs").tabs({
    show: { effect: "fadeIn", duration: 200 },
	hide: { effect: "fadeOut", duration: 100 },
	active: coact,
	activate: function(event, ui) {
		var act = $("#tabs").tabs("option", "active");
		$.cookie("tabs[[*id]]", act, {
  		expires: 1
		});
    }

  });




 // при нажатии на ссылку, сымитируем нажатие по нужной вкладке
$('#quip-comment-box-[[+idprefix]]').click(function() {
    $tabs.tabs('select', 2);
    return false;
});




	});
</script>

   `
 ]]










</head>

<body onload="init_questions(),init_otzyvy(),init_spec(),init_left_podmenu()">



<!--Для меню-->

		<script>
		$(document).ready(function() {



 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`2,9,10,11,12,13,14,72,73` 
   &then=
   ` 
$(str_tre_left_podmenu1).attr('class','tre_down_img');

        $('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
  ]]

 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`15,16,17,18,19,20,21,22,23` 
   &then=
   `

   $(str_tre_left_podmenu2).attr('class','tre_down_img');

		$('#left_podmenu1').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]



 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`24,25,26,27,28,29` 
   &then=
   `
   $(str_tre_left_podmenu3).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]


 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`47,48,49,50,51` 
   &then=
   `
   $(str_tre_left_podmenu4).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]




 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`30,31,32` 
   &then=
   `

   $(str_tre_left_podmenu5).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]




 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`52,53,54` 
   &then=
   `

   $(str_tre_left_podmenu6).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]




 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`55,56,57,58,59` 
   &then=
   `

   $(str_tre_left_podmenu7).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]




 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`61,62,63,64` 
   &then=
   `

   $(str_tre_left_podmenu9).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]



 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`65,66` 
   &then=
   `

   $(str_tre_left_podmenu10).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu11').hide();
   `
 ]]



 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`33` 
   &then=
   `

   $(str_tre_left_podmenu10_1).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu11').hide();
   `
 ]]


 [[!If? 
   &subject=`[[*id]]` &operator=`ia` 
   &operand=`37` 
   &then=
   `

   $(str_tre_left_podmenu11).attr('class','tre_down_img');


		$('#left_podmenu1').hide();
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu10').hide();
   `

 ]]


 [[!If? 
   &subject=`[[*parent]]` &operator=`ia` 
   &operand=`2,15,24,47,30,52,55,60,61,65,33,36` 
   &then=``
   &else=
   `
		//$('#left_podmenu1').hide();
		 $(str_tre_left_podmenu1).attr('class','tre_down_img');
		$('#left_podmenu2').hide();
		$('#left_podmenu3').hide();
		$('#left_podmenu4').hide();
		$('#left_podmenu5').hide();
		$('#left_podmenu6').hide();
		$('#left_podmenu7').hide();
		$('#left_podmenu8').hide();
		$('#left_podmenu9').hide();
		$('#left_podmenu10_1').hide();
		$('#left_podmenu10').hide();
		$('#left_podmenu11').hide();

   `
 ]]





		});

		</script>





<div class="all" >
  <div class="header">

      <div class="logo"><a href="http://evropa.klik-web.ru"><img  class="logo_img" src="/assets/evropa/img/logo.png"  alt="" /> </a></div>
      <div class="networks"> 
		<!--<img  class="networks_img" src="img/networks.png"  alt="" />	-->	
		<a href="http://instagram.com" target="_blank" class="tmenu_link"><img  class="like" src="/assets/evropa/img/in.png"  alt="" /></a>
		<a  href="http://twitter.com/home?status=" target="_blank" class="tmenu_link"><img  class="like" src="/assets/evropa/img/twitter.png"  alt="" /></a>
		<a href="http://www.livejournal.com/update.bml?subject=" target="_blank" class="tmenu_link"><img  class="like" src="/assets/evropa/img/lj.png"  alt="" /></a>

		<a href="http://www.facebook.com/sharer.php?u=http://evropa.klik-web.ru/" target="_blank" class="tmenu_link"><img  class="like" src="/assets/evropa/img/facebook.png"  alt="" /></a>

		<div  class="search" > 
		      <img  class="search_img" src="/assets/evropa/img/search.png"  alt="" />
			  

			  <form class="search-form" method="get" action="/[[~71]]" id="form">
			<input id="s_text" class="search-text" type="text" value="Поиск по сайту" onfocus="this.value=this.value=='Поиск по сайту'?'':this.value;" onblur="this.value=this.value==''?'Поиск по сайту':this.value" name="search"/>

<input type="submit"  class="search-button" value="" name="picture" src=""  >

<!--
onClick="searching()" убрано
			<input type="image" border="0" class="search-button" value="" name="picture" src="" />
-->





		  </form>

		</div>











	  </div>
	  <div class="search"> 				</div>
	  <div class="contacts"> 	<span class="phone">8 499 431-00-17 / 18 </span>
	<span class="adress"> Москва, Ленинский проспект, 104	</span>		</div>
	  <div class="top-menu"> 				
		<ul id="tmenu">


	  [[!Wayfinder? 
			&startId=`0`
			&outerTpl=`MenuOuterTop` 
			&rowTpl=`MenuRowTop` 
          
			&hereClass=`active` 
			&firstClass=`` 
			&lastClass =``
			&level =`1`
			&limit = `6`
			]]  


		</ul>
	 </div>

	  <div class="line"><img  class="line_img" src="/assets/evropa/img/line.png"  alt="" /></div>
  </div><!--header-->
UPD: Собрал шаблон со всеми чанками в один Smarty-шаблон. Пока еще не переделал его до правильного состояния, и это все дело выглядит так: gist.github.com/Fi1osof/48060b508d802de92762
Особое внимание обратите на формирование бокового меню: 
<ul class="left_menu">
    <li class="level1" id="left-punkt1" > 
		<span class="left-menu-text"> [[getResourceField? &id=`2`]] </span> 
		<img class="tre_right_img" src="{$template_url}img/0.png" id="tre_down_img1"  alt="">
	  </li>
			<div id="left_podmenu1">[[$Left-Menu-1]]</div>


	
    <li class="level1" id="left-punkt2" > 
	<span class="left-menu-text"> [[getResourceField? &id=`15`]] </span> 
	<img class="tre_right_img" src="{$template_url}img/0.png"  id="tre_down_img2"  alt="">
	</li>
		<div id="left_podmenu2">[[$Left-Menu-2]]</div>



		         <li class="level1" id="left-punkt3" > 
		<span class="left-menu-text"> [[getResourceField? &id=`24`]] </span> 
		<img class="tre_right_img" src="{$template_url}img/0.png" id="tre_down_img3"  alt="">
	</li>
		<div id="left_podmenu3">[[$Left-Menu-3]]</div>


	<li class="level1" id="left-punkt5" > 
		<span class="left-menu-text"> [[getResourceField? &id=`30`]] </span> 
		<img class="tre_right_img"  src="{$template_url}img/0.png" id="tre_down_img5"  alt="">
	</li>
		<div id="left_podmenu5">[[$Left-Menu-5]]</div>



				 <li class="level1" id="left-punkt10_1" > 
		<span class="left-menu-text"> [[getResourceField? &id=`33`]] </span> 
		<img class="tre_right_img"  src="{$template_url}img/0.png" id="tre_down_img10_1"  alt="">
	</li>
		<div id="left_podmenu10_1">[[$Left-Menu-10-1]]</div>

				 <li class="level1" id="left-punkt11" > 
		<span class="left-menu-text"> [[getResourceField? &id=`36`]] </span> 
		<img class="tre_right_img" src="{$template_url}img/0.png"  id="tre_down_img11"  alt="">
	</li>
		<div id="left_podmenu11">[[$Left-Menu-11]]</div>
</ul>
То есть мало того, что это не Wayfinder и вообще нет динамики меню, так еще это и куча сниппетов getResourceField (и запросов к БД), плюс еще и куча чанков, в каждом из которых вот такие вызовы WF: 
<ul class="left-podmenu" id="left-podmenu2">
[[!Wayfinder? 
    &startId=`15`
    &outerTpl=`MenuOuterLeft` 
    &rowTpl=`MenuRowLeft` 
    &firstClass=`` 
    &lastClass =``
    &level =`1`
    &limit = `0`
]]  
</ul>
И да, под каждый пункт меню не вызов одного и того же чанка с передачей ID родителя, а десяток чанков с одинаковым меню.
Резюме.
В общем, героев надо знать в лицо. Чудо веб-студия, которая клепает такие мегашедевры, это klik-web.ru/ Правда у них и у самих-то по сути сайта нет, но тем не менее. Особенно мне нравятся тизеры типа «КЛИК» — грамотный выбор! и Качество Опыт Репутация. Мда… Клиенты, наткнетесь на таких, обходите за 3 версты!
UPD: klik-web.ru извинились перед клиентом и компенсировали затраты, вину перед клиентом загладили. Основная версия этого неприятного инцидента — не повезло им с выбором фрилансера-исполнителя. Клиент претензий не имеет.
А чё. Если взять 24 ядерный на 24 гигагерца с 24 гигабайтами RАМ, то пойдет =)
?
А это еще не все. Там картинки есть 6-ти мегапиксельные. Общий вес главной страницы — 10 метров :-) В общем жесть полная.
Не, а че. Лет 15 назад ловили «еггогов» на калькуляторе MK, 10 строк ассемблера на Z80 и считали это верхом программирования. 12 лет назад сайты были на HTML и любая попытка разработать что-то приводила сразу к провалу. Где-то в 2005-2007 годах любая нагрузка на процессор была едва ли не главной бедой всех программ (то есть процы еще слабые, но средства программирования уже есть). Сейчас можно не следить особо за кодом и все работает довольно быстро, но оптимизация еще имеет место быть.
А что будет через 5-7 лет? Будет «визуальный программатор» любых логик и сложностей методом «перетащи и опусти». Насколько сложный код там будет — никого не будет волновать, потому что выполнение задачи программой и её быстрая развертка важнее. Половина будущих программистов это оценят. Половина оценит за скорость создания, а не за необходимость иметь знания. Разве не в том минус, что сегодняшняя вычислительная мощность просто еще далека до желаемой?
Кстати, это одно из направлений, куда следует смотреть.
PS. Если смотреть глубже, то сайты с собственным вебсервером к нему надо писать тупо на C (про ASM лучше промолчу), и ни в коем случае не на PHP. Скорость будет достаточная, возможности — безграничные почти. Но разработка будет долгая. Вероятность поломки мозгов высокая. Ну и так далее.
Главный барьер — недостаточная производительность при любом(!) кол-ве программного мусора.
Нет, ты все спутал. Речь не о производительности вообще. Речь о динамике сайта. Ты посмотри, там же везде прописаны жестко ID-шники документов. Где управляемость сайтом? Где динамика? Удали раздел, создай такой же, и что, будет работать? Нет. Потому что id-шники документов сменились. И такая же картина по всему сайту, в том числе и в подвале. Там все пункты меню вручную прописаны. В чем здесь вообще роль CMS? Это же почти что традиционный статический HTML-сайт.
Аааа, ты об этом =( А я маниакально везде вижу тормоза :~(
Вот такая фигня…
Но что интересно, сейчас вожусь с другим сайтом, и там примерно все тоже самое… Блин, фиг с ума сойдешь!
Правда там вообще отдельная песня. Там магазин на minishop2, и там за 30 секунд на modxcloud.com не успевает раздел открываться :-))) Переписываю на shopModx все.

Добавить комментарий