Расширения DOM в Prototype

Большинство расширений DOM содержатся в объекте Element. Methods и дополнительно копируются в объект Element для удобства использования.

Метод Element. extend()

Большинство расширений DOM содержатся в объекте Element. Methods и дополнительно копируются в объект Element для удобства использования. Все эти методы в качестве первого параметра принимают идентификатор элемента, с которым будут производиться операции:

 

Element. hide(‘comments’);

var div_height = Element. getHeight(my_div);

Element. addClassName(‘contactform’, ‘pending’);

Этот код довольно легок и читаем, но мы можем сделать его еще лучше. Если вы передадите элемент, с которым собираетесь работать, в метод Element. extend(), то в него будут скопированы все дополнительные методы. Например:

 

var my_div = document. createElement(‘div’);

 

Element. extend(my_div);

my_div. addClassName(‘pending’). hide();

 

// вставляем элемент в документ

document. body. appendChild(my_div);

Таким образом, вызовы методов становятся короче и более интуитивны. Как уже упоминалось выше, Element. extend() копирует все методы из Element. Methods в наш элемент, который автоматически становится их первым аргументом.

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

 

Element. extend() так же добавляет методы объекта Form. Methods в элементы FORM и методы Form. Element. Methods в элементы INPUT, TEXTAREA и SELECT:

 

var contact_data = $(‘contactform’). serialize();

var search_terms = $(’search_input’). getValue();

Имейте ввиду, что элементы автоматически расширяются не только в функции $()! Element. extend() так же вызывается в document. getElementsByClassName, Form. getElements, на элементах, возвращаемых функцией $$() (элементы, соответствующие определенному CSS-селектору), и др. - так что вам вряд ли придется вызывать метод Element. extend() самостоятельно.

 

Добавление пользовательских методов с помощью Element. addMethods()

Если вам нужно добавить к элементам помимо предоставляемых Prototype свои собственные методы - никаких проблем! Для этого в Prototype так же есть специальный механизм. Если у вас есть объект, содержащий набор функций, просто передайте его в Element. addMethods():

 

var MyUtils = {

    truncate: function(element, length){

        element = $(element);

        return element. update(element. innerHTML. truncate(length));

    },

    updateAndMark: function(element, html){

        return $(element). update(html). addClassName(‘updated’);

    }

}

 

Element. addMethods(MyUtils);

 

// теперь вы можете:

$(‘explanation’). truncate(100);

Единственное, за чем стоит следить - это за тем, чтобы первый аргумент обязательно был модифицируемым элементом. В ваших методах вы так же можете возвращать переданный элемент для того, чтобы делать “цепочки” методов (например, $('element'). updateAndMark(someText). truncate()).