В Javasript часто появляются прокси и делегат .
Итак, при каких обстоятельствах он на самом деле использует? Каков его принцип?
Здесь мы представляем использование и принципы делегата JavaScript, а также интерфейс делегата в рамках, таких как Dojo, jQuery и т. Д.
JavaScript Event Proxy
Прокси Event Proxing - очень полезная и интересная особенность в мире JS. Когда нам нужно добавить события во многие элементы, мы можем запустить функцию обработки, добавив события в их родительский узел и делегируя события в родительский узел.
Это в основном связано с механизмом пузырьков событий браузера. Давайте приведем конкретный пример, чтобы объяснить, как использовать эту функцию.
Этот пример в основном взят из связанных статей Дэвида Уолша (как работает делегирование событий JavaScript).
Предположим, есть родительский узел UL, который содержит много детей LI:
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"> li 5 </li> </ul>
Когда наша мышь переезжает в LI, нам необходимо получить соответствующую информацию об этом LI и выплыть из плавающего окна, чтобы отобразить подробную информацию, или когда LI нажимается, необходимо запустить соответствующее событие обработки.
Наш обычный способ написания - добавить какой -то мониторинг событий, такие как Onmouseover или Onclick в каждый LI.
функция addListenersli (lielement) {lielement.onclick = function clickhandler () {// todo}; lielement.onmouseover = function mouseoverhandler () {// todo}} window.onload = function () {var ulelement = document.getElementById ("list"); var lielesments = ulElement.getElementbytagname ("li"); for (var i = lilements.length-1; i> = 0; i--) {addlistenersli (lilements [i]); }}Если элементы ребенка в этом UL будут добавляться или удалять часто, нам нужно вызывать метод AddListenersli каждый раз, когда мы добавляем LI, чтобы добавить функции обработки событий для каждого узла LI.
Это может создать сложность и возможность ошибок в процессе добавления или удаления.
Решение проблемы состоит в том, чтобы использовать механизм прокси события. Когда событие будет брошено на родительский узел более высокого уровня, мы судим и получаем источник события LI, проверив целевой объект события.
Следующий код может достичь желаемого эффекта:
/Получить родительский узел и добавить событие Click To Document.getElementById ("List"). AddEventListener ("click", function (e) {// Проверить, является ли источник события e.targe li if (e.target && e.target.nodename.touppercase == "li") {/// toDoSosle.Log ("List.Id. нажал! ");}});Добавьте событие Click в родительский узел. Когда нажимается дочерний узел, событие Click будет пузыриться вверх от детского узла. После того, как родительский узел улавливает событие, он определяет, является ли это узел, который мы должны обрабатывать, оценив e.target.nodeName. И щелкнутый узел LI был получен через E.Target. Следовательно, соответствующая информация может быть получена и обработана.
Пузырь и захват событий
Механизм пузырьков событий браузера, различные производители браузеров имеют различные механизмы обработки для захвата и обработки событий. Здесь мы представляем стандартные события, определенные W3C для Dom2.0.
Модель DOM2.0 делит процесс обработки событий на три этапа:
1. Стадия захвата событий,
2. Стадия целевого события,
3. Пузырьковая стадия события.
Как показано на рисунке ниже:
Захват событий: когда элемент запускает событие (например, OnClick), документ объекта верхнего уровня будет издавать поток событий, поступая в узел целевого элемента с узлом дерева DOM до достижения целевого элемента, где фактически происходит событие. В этом процессе соответствующая функция слушания события не будет запускаться.
Цель события: после достижения целевого элемента выполняется соответствующая функция обработки события целевого элемента. Если нет связанной функции слушателя, то она не будет выполнена.
Пузырьки событий: начните с целевого элемента и распространяйте в верхний элемент. Если узел связывает соответствующую функцию обработки событий на пути, эти функции будут запускаться одновременно. Если вы хотите предотвратить пузырьковое событие, вы можете использовать e.stoppropagation () (firefox) или e.cancelbubble = true (т.е.) для организации пузырькового распространения события.
Делегатная функция в jQuery и Dojo
Давайте посмотрим, как использовать прокси -интерфейсы событий, предоставленные в Dojo и jQuery.
jQuery:
$ ("#list"). Delegate ("li", "click", function () {// "$ (this)" - это узел, который был нажал console.log («Вы нажали на ссылку!», $ (this));});Метод делегата JQUERY требует трех параметров, селектор, имя времени и обработчик событий.
Сходство додзё с jQuery - это просто разница в стилях программирования между ними:
Требуется (["Dojo/Query", "Dojox/Nodelist/Delegate"], Function (запрос, делегат) {Query ("#list"). Делегировать ("li", "Onclick", функция (событие) {// "this.node" - это узел, который был щелкнул консоль.Модуль делегата Dojo находится в Dojox.Nodelist, а предоставляемый интерфейс такой же, как jQuery, а параметры одинаковы.
Благодаря делегированию вы можете оценить несколько преимуществ использования делегирования событий для разработки:
1. Существует меньше функций. Нет необходимости добавлять функцию слушателя для каждого элемента. Для аналогичных детских элементов под тем же родительским узлом события могут обрабатываться с помощью функции прослушивания, делегированной родительским элементом.
2. Легко добавлять и модифицировать элементы динамически, и нет необходимости изменять привязку событий из -за изменений элемента.
3. Корреляция между узлами JavaScript и DOM уменьшается, что снижает вероятность утечек памяти, вызванных круглыми ссылками.
Использование прокси в программировании JavaScript
Вышеуказанное представляет использование механизма пузыря браузера для добавления прокси -сервера событий в элементы DOM при обработке событий DOM. На самом деле, в программировании Pure JS мы также можем использовать этот шаблон программирования для создания прокси -объектов для управления целевыми объектами.
var delegate = function (client, clientMethod) {return function () {return clientMethod.Apply (client, arguments); }} var apple = function () {var _color = "red"; return {getColor: function () {console.log ("color:" + _color); }, setColor: function (color) {_color = color; }}; }; var a = new Apple (); var b = new Apple (); A.GetColor (); A.SetColor ("зеленый"); A.GetColor (); // вызов прокси -сервера var d = делегат (a, a.setcolor); D ("синий"); // execution proxy a.getcolor (); //b.getColor ();В приведенном выше примере модификация A работает путем вызова функции прокси, созданной функцией Delegate ().
Хотя этот метод использует Apply (вызов также может быть использован) для передачи объекта вызова, он реализует скрытие определенных объектов из режима программирования, которые могут защитить эти объекты от доступного и измененного по желанию.
Концепция делегата ссылается во многих рамках для указания операции по объему метода.
Типичными примерами являются Dojo.hitch (Scope, Method) и Createlegate (obj, Args) Extjs.
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.