Главная

Javascript в декларативном стиле

2012-03-14 в 20:11, admin, рубрики: html, javascript, Веб-разработка, метки: html, javascript

Может, для гуру javascript данная статья будет не интересна, а вот для начинающих разработчиков, наверняка — полезна.
Сразу оговорюсь, что в статье будет использоваться только чистый javascript без подключения сторонних фреймворков (например jquery).

Писать javascript в декларативном стиле гораздо удобнее:

Возможность привязать конкретному html-блоку нужный javascript функционал
Возможность писать javascript код наподобие css (к объекту привязывать свойства)
Улучшить читаемость кода, перенеся логику, связанную с конкретными html-блоками, в отдельные файлы
И много чего ещё. Попробуйте и сами все увидите.

Итак, приступим.

Для начала заведём 3 файла:

index.html — файл, содержащий html блоки, которые и будем обрабатывать
index.js — файл, содержащий функции инициализации привязанных к блокам функций
init.js — файл, содержащий логику обработки привязанных блоков

Содержимое файла index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="init.js"></script>   <!-- Подключаем файл с набором функционала для блоков -->   
  <script type="text/javascript" src="index.js"></script>  <!-- Подключаем файл c функцией-инициализатором -->  
</head>

<style type="text/css">
div
{
    margin:30px;
    padding:10px;
    background: #ccc;
    border:solid 1px #666;
    font-family:arial;
    font-size:12px;
}
</style>
    
<body>
  
    <div class="b-block init_block1">  <!-- Первый блок -->
      Привет, ХабрЮзер)))
    </div>
    
    <div class="init_block2"> <!-- Второй блок -->
      А я говорю..привееет)))
    </div>    
    
</body>
    
</html>

Файл index.js:

/**
 * Функция, позволяющая навешивать обработчик события элементу 
 * (по сути отношение к статье не имеет, добавлена просто для удобства)
 * @param object elem - элемент, к которому будем привязывать событие
 * @param string evType - тип события (например: "click","mouseover")
 * @param function call - функция-обработчик (можно анонимную)
 */
function addEvent(elem,evType,call)
{
     if(elem.addEventListener)
     {  
        elem.addEventListener(evType, call, false);
     } 
     else if(elem.attachEvent) 
     {  
        elem.attachEvent('on' + evType, call); 
     }                
}  

/**
 * Функция, обеспечивающая инициализацию функционала блоков
 */
function initStart()
{
     var arrayElem = document.getElementsByTagName('*');

     var arrayElemLength = arrayElem.length;
     
     for(var i=0;i<arrayElemLength;i++)
      {
         if(arrayElem[i])
          {
            var attr = arrayElem[i].className;
            if(attr)
             {
                if(attr.indexOf('init_') !== -1)
                 {
                    var initText = attr.substr(attr.indexOf('init_'));
                    
                    try
                    {                
                       if(eval("initObject."+initText)) eval("initObject."+initText+"(arrayElem[i])");
                    }
                    catch(e){alert(e);}
                 }
             }
   
          }
      }
}

/* Как только страница загрузится, инициализируем наши функции для блоков */
addEvent(window,'load',initStart);

Файл init.js:

/**
 * Объект, содержащий функции для обработки привязанных блоков
 */
var initObject = 
{
   /**
    * Привязываем к html-элементу, содержащему class "init_block1" функционал
    * @param object elem - сам html-объект (передаётся из функции-обработчика)
    */
   init_block1: function(elem)
   {
       elem.innerHTML += ' Опа...Отработала привязанная к блоку функция';
   },
   
   /**
    * Привязываем к html-элементу, содержащему class "init_block2" функционал
    * @param object elem - сам html-объект (передаётся из функции-обработчика)
    */
   init_block2: function(elem)
   {
       elem.innerHTML += ' Отработала и у этого блока. А теперь кликни тут';
       
       addEvent(elem,'click',function(){
           
           alert('Работает!');
           
       });
       
   }   
}

Итак все подключили, теперь объясню.

Для того чтобы привязать определенную логику к какому-нибудь блоку на странице, необходимо в классе этого элемента указать метод объекта initObject.
В метод передаётся сам html-элемент (точнее ссылка на него), с ним вы можете делать всё, что угодно: привязать событие, передать данные в ajax, изменить свойство и т.д.

Таким нехитрым способом мы можем привязывать определенную логику нужным объектам на странице.

Стоит отметить, что функция initStart не совсем идеальна — есть что доработать.
Но это учебный пример, поэтому я не стал делать все «с иголочки», думаю, общая концепция и так понятна.

Как это работает, вы можете посмотреть здесь.
Скачать одним архивом пример.

Автор: antonre