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

Опубликовал: admin Friday, May 31, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

В составе библиотеки jQuery есть замечательная вспомогательная функция, которая подойдет для решения такой задачи, — $.proxy(function, context) или

$.proxy(context, name). Она может принимать аргументы в двух вариантах — функция и контекст ее выполнения или контекст выполнения и имя функции. А возможности иллюстрирует пример, код которого приведен в листинге 10.3.4.

Листинг 1 0 .3 .4 . Использование вспомога те л ьной ф ун к ции $.proxy()

<!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" lang="ru" xml:lang="ru">
<head>
<title>example-10-3-4</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { var obj1 = {
name: "John", surname: "Resig", test: function() {
$("#log").append('<p>' + this.name + ' ' + this.surname + '</p>');
}
};
var obj2 = { name: "Yehuda", surname: "Katz"
};
var obj3 = { name: "Jörn",
surname: "Zaefferer", test3: function() {
$("#log").append('<p>' + this.surname + ', ' + this.name
+ '</p>');
}
};
$("#test1").click($.proxy(obj1.test, obj1));
$("#test2").click($.proxy(obj1.test, obj2));
$("#test3").click($.proxy(obj3, 'test3'));
});
</script>
</head>
<body>
<button id="test1">Объект 1</button>
<button id="test2">Объект 2</button>
<button id="test3">Объект 3</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-10-3-4</title>

$(function () { var obj1 = {

name: "John", surname: "Resig", test: function() {

$("#log").append('<p>' + this.name + ' ' + this.surname + '</p>');

}

};

var obj2 = { name: "Yehuda", surname: "Katz"

};

var obj3 = { name: "Jörn",

surname: "Zaefferer", test3: function() {

$("#log").append('<p>' + this.surname + ', ' + this.name

+ '</p>');

}

};

$("#test1").click($.proxy(obj1.test, obj1));

$("#test2").click($.proxy(obj1.test, obj2));

$("#test3").click($.proxy(obj3, 'test3'));

});

</script>

</head>

<body>

<button id="test1">Объект 1</button>

<button id="test2">Объект 2</button>

<button id="test3">Объект 3</button>

</body>

</html>

Обсуждение

Сначала разберем простейшую HTML-разметку, приведенную в листинге 10.3.4. Три кнопки, при нажатии на которые будем выполнять некоторые действия, и элемент div с идентификатором log — сюда будем добавлять результаты.

Теперь изучим JavaScript-код. В начале создаем три объекта. Каждый из них содержит свойства name и surname с разными значениями. Кроме этого первый и третий объекты имеют свойства test и test3, которые являются функциями.

Функция test добавляет значения свойств name и surname в элемент p и вставляет его в элемент с идентификатором log. Функция test3 выполняет похожие действия, только вставляет значения свойств name и surname в элемент p в другом порядке и через запятую.

Далее следуют три обработчика для трех кнопок — Объект 1, Объект 2, Объект 3. На этом подготовительная часть закончена и дальше мы попробуем разобраться,

что же такого интересного есть в этом примере.

Итак, нажимаем кнопку Объект 1 — передаем вспомогательной функции $.proxy() функцию test, которую необходимо выполнить, и контекст ее выполнения — объект obj1. Получаем результат — "John Resig". Следовательно, функция, определенная как свойство объекта obj1, выполнилась в контексте этого объекта.

Нажмем кнопку Объект 3 — вспомогательной функции $.proxy() будут переданы в качестве аргументов контекст выполнения obj3 и строка с именем функции test3. Результат — "Zaefferer, Jörn". Следовательно, функция, определенная как свойство объекта obj3, выполнилась в контексте этого объекта. Просто мы передавали ей аргументы в другом виде.

А теперь нажимаем кнопку Объект 2, чтобы заставить функцию test, определенную в объекте obj1, выполниться в контексте другого объекта — obj2. Ожидаем результат "Yehuda Katz" и действительно его получаем!

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

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

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply