jquery обзор плагинов

Методы $.extend и $.data позволяют упростить процесс хранения и обработки данных json.

$.data, привязка данных к элементам DOM

$.data используется для хранения информации в web-приложениях в пределах одной страницы (данные доступны только до перезагрузки страницы, не сохраняются на стороне клиента). Цитата из jQuery API:

Для чего это может быть полезным? Давайте рассмотрим пример

Предположим, вам необходимо получить значения каких-то свойств, например, ширину, высоту и html-содержание. Теперь необходимо задать цикл, чтобы получить эти данные от всех элементов div на странице. Вместо многократного обращения к DOM, по три запроса для одного элемента (ширина, высота, html), вы можете добавить json объект для сохранения этих свойств. Json объект привязывается к элементу DOM при загрузке страницы и данные в нем меняются при изменении параметров DOM элемента.

Таким образом цикл для обхода элементов будет работать гораздо быстрее. Вы обращаетесь к одному элементу json и при этом получаете все данные.

1
2
3
4
5
6
7
8
9
10

// сохраняем в $.data
var width = $(DOMelement).width();
var height= $(DOMelement).height();
var html = $(DOMelement).html();
 
var saveObject = {"width":width, "height":height, "html": html };
$(DOMelement).data("currentContent", saveObject );
 
// получаем значения
var currentContent = $(DOMelement).data("currentContent");

В jQuery 1.4 есть возможность получить все данные, присвоенные объекту. Это делается при помощи $.data( element ).

Если вам необходимо хранить данные на странице то это хорошая альтернатива использованию обычных переменных.

$.extend, расширить любой объект (версия 1.1.4)

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

Сила $.extend заключается в том, что вы можете расширить любой объект, склеить два объекта в один. Посмотрим где это может быть полезно.

Предположим у вас есть два списка, которые необходимо объединить в один. Это можно сделать при помощи $.extend(true, objectReceiver, objectMerged).  objectReceiver получит все данные от objectMerged:

1
2
3
4
5
6
7
8
9
10

var object1 = {
   apple: 0,
   banana: {weight: 52, price: 100},
   cherry: 97
};
var object2 = {
   banana: {price: 200},
   durian: 100
};
$.extend(true, object1, object2);

результат:

1

object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, durian: 100}

Этот метод также можно использовать для создания объединенного объекта, без перезаписи исходных объектов:

1
2
3
4
5
6
7
8
9
10
11

var empty = {}
var defaults = { 
   validate: false, 
   limit: 5, 
   name: "foo" 
};
var options = { 
   validate: true, 
   name: "bar" 
};
var settings = $.extend(empty, defaults, options);

результат:

1
2

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }