Javasript에서 프록시와 대의원이 종종 나타납니다.
그래서 어떤 상황에서 실제로 사용합니까? 그 원칙은 무엇입니까?
여기에서 우리는 JavaScript 대의원의 사용법과 원칙뿐만 아니라 Dojo, JQuery 등과 같은 프레임 워크의 대의원의 인터페이스를 소개합니다.
JavaScript 이벤트 프록시
이벤트 프록시는 JS 세계에서 매우 유용하고 흥미로운 기능입니다. 여러 요소에 이벤트를 추가해야 할 때는 상위 노드에 이벤트를 추가하고 이벤트를 부모 노드에 위임하여 처리 기능을 트리거 할 수 있습니다.
이것은 주로 브라우저의 이벤트 버블 메커니즘 때문입니다. 이 기능을 사용하는 방법을 설명하기위한 구체적인 예를 들어 보겠습니다.
이 예제는 주로 David Walsh의 관련 기사 (JavaScript 이벤트 대표가 작동하는 방법)에서 가져온 것입니다.
많은 LI 어린이를 포함하는 UL 부모 노드가 있다고 가정합니다.
<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 id = "li-5"> li 5 </ul>
마우스가 Li로 이동하면이 LI에 대한 관련 정보를 얻고 떠 다니는 창 밖으로 떠 다니기 위해 자세한 정보를 표시하거나 LI를 클릭하면 해당 처리 이벤트를 트리거해야합니다.
우리의 일반적인 작문 방법은 OnMouseOver와 같은 이벤트 모니터링을 추가하거나 각 LI에 클릭하는 것입니다.
함수 addListenersli (lielement) {lilement.onclick = function clickhandler () {// todo}; lielement.onmouseOver = function mouseOverHandler () {// todo}} window.onload = function () {var inglement = document.getElementById ( "list"); var lielements = allement.getElementByTagName ( "li"); for (var i = laelements.length.length-1; i> = 0; i-) {addlistenersli (lielements [i]); }}이 UL의 LI 하위 요소가 자주 추가되거나 삭제되면 LI를 추가 할 때마다 각 LI 노드에 대한 이벤트 처리 기능을 추가 할 때마다 AddListenersli 메소드를 호출해야합니다.
이로 인해 추가 또는 제거 프로세스에서 복잡성과 오류가 발생할 수 있습니다.
문제에 대한 해결책은 이벤트 프록시 메커니즘을 사용하는 것입니다. 이벤트가 더 높은 수준의 부모 노드에 던져지면 이벤트의 대상 객체를 확인하여 이벤트 소스 LI를 판단하고 얻습니다.
다음 코드는 원하는 효과를 달성 할 수 있습니다.
/Parent Node를 가져 와서 IT Document.getElementById ( "List")에 클릭 추가를 추가합니다. addEventListener ( "Click", Function (e) {// 이벤트 소스 E.Targe가 li if (e.target && e.target.nodename.toupperCase == "li") {// // on Clice " }});부모 노드에 클릭 이벤트를 추가하십시오. 하위 노드를 클릭하면 클릭 이벤트가 하위 노드에서 기포됩니다. 상위 노드가 이벤트를 잡으면 e.target.nodename을 판단하여 처리 해야하는 노드인지 여부를 결정합니다. 클릭 된 Li 노드는 e.target을 통해 얻었습니다. 따라서 해당 정보를 얻고 처리 할 수 있습니다.
이벤트 버블 및 캡처
브라우저의 이벤트 버블 메커니즘, 다른 브라우저 제조업체는 이벤트 캡처 및 처리를위한 처리 메커니즘이 다릅니다. 여기서 우리는 DOM2.0에 대해 W3C에 정의 된 표준 이벤트를 소개합니다.
DOM2.0 모델은 이벤트 처리 프로세스를 3 단계로 나눕니다.
1. 이벤트 캡처 스테이지,
2. 이벤트 대상 단계,
3. 이벤트의 버블 링 단계.
아래 그림과 같이 :
이벤트 캡처 : 요소가 이벤트 (예 : OnClick)를 트리거 할 때, 최상위 객체 문서는 이벤트 스트림을 방출하여 이벤트가 실제로 발생하는 대상 요소가 도달 할 때까지 DOM 트리의 노드로 대상 요소 노드로 흐르면 이벤트 스트림을 방출합니다. 이 과정에서 이벤트의 해당 청취 기능은 트리거되지 않습니다.
이벤트 대상 : 대상 요소에 도달 한 후 대상 요소의 이벤트의 해당 처리 기능이 실행됩니다. 경계 리스너 기능이 없으면 실행되지 않습니다.
이벤트 버블 : 대상 요소로 시작하여 상단 요소로 전파하십시오. 노드가 해당 이벤트 처리 기능을 바인딩하면 이러한 기능은 한 번에 트리거됩니다. 이벤트가 버블 링되는 것을 방지하려면 e.StopPropagation () (Firefox) 또는 e.cancelbubble = true (IE)를 사용하여 이벤트의 버블 스프레드를 구성 할 수 있습니다.
jQuery 및 Dojo의 대표 기능
Dojo 및 JQuery에서 제공되는 이벤트 프록시 인터페이스를 사용하는 방법을 살펴 보겠습니다.
jQuery :
$ ( "#list"). delegate ( "li", "click", function () {// "$ (this)"는 console.log를 클릭 한 노드입니다 ( "링크를 클릭했습니다!", $ (this);});JQuery Delegate 메소드에는 세 가지 매개 변수, 선택기, 시간 이름 및 이벤트 핸들러가 필요합니다.
jQuery와 Dojo의 유사성은 두 가지 간의 프로그래밍 스타일의 차이입니다.
요구 ([ "dojo/query", "dojox/nodelist/delegate"], function (query, delegate) {query ( "#list"). delegate ( "li", "onclick", function (event) {this.node "는 console.log ("당신의 링크! ");});Dojo의 대표 모듈은 dojox.nodelist에 있으며 제공된 인터페이스는 jQuery와 동일하며 매개 변수는 동일합니다.
대표단을 통해 이벤트 대표단을 개발에 사용하는 데있어 몇 가지 이점에 감사 할 수 있습니다.
1. 관리 기능이 적습니다. 각 요소에 대한 리스너 기능을 추가 할 필요가 없습니다. 동일한 상위 노드에서 유사한 자식 요소의 경우, 이벤트는 상위 요소에 위임 된 청취 기능을 통해 처리 할 수 있습니다.
2. 요소를 동적으로 추가하고 수정하기 쉽고 요소 변경으로 인해 이벤트 바인딩을 수정할 필요가 없습니다.
3. JavaScript와 DOM 노드 사이의 상관 관계가 감소되어 원형 참조로 인한 메모리 누출 가능성이 줄어 듭니다.
JavaScript 프로그래밍에서 프록시 사용
위의 내용은 DOM 이벤트를 처리 할 때 이벤트 프록시를 DOM 요소에 추가하기 위해 브라우저 버블 메커니즘의 사용을 소개합니다. 실제로 순수한 JS 프로그래밍 에서이 프로그래밍 패턴을 사용하여 대상 객체를 작동하기 위해 프록시 객체를 만들 수도 있습니다.
var delegate = function (client, clientmethod) {return function () {return ClientMethod.Apply (클라이언트, 인수); }} var apple = function () {var _color = "red"; return {getColor : function () {console.log ( "색상 :" + _color); }, setColor : function (color) {_color = color; }}; }; var a = new Apple (); var b = 새로운 Apple (); a.getColor (); A.SetColor ( "녹색"); a.getColor (); // Proxy 호출 var d = delegate (a, a.setcolor); d ( "파란색"); // 실행 프록시 a.getColor (); //b.getColor ();위의 예에서, a의 수정은 delegate () 함수에 의해 생성 된 프록시 함수 d를 호출하여 작동한다.
이 메소드는 호출 객체를 전송하기 위해 적용 (호출도 사용될 수 있음)을 사용하지만 프로그래밍 모드에서 특정 객체를 숨기는 것을 구현하여 이러한 객체에 액세스하고 수정되지 않도록 보호 할 수 있습니다.
대의원의 개념은 많은 프레임 워크에서 참조되어 메소드의 작동 범위를 지정합니다.
전형적인 예는 extjs의 dojo.hitch (범위, 메소드) 및 CreateLegate (obj, args)입니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.