소개하다
브리지 모드는 구현 부품에서 추상 부품을 분리하여 모두 독립적으로 다양 할 수 있도록합니다.
텍스트
브리지 모드는 이벤트 모니터링에서 가장 일반적으로 사용됩니다. 먼저 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
addevent (요소, '클릭', getBeerById);
기능 getBeerByid (e) {
var id = this.id;
Asyncrequest ( 'get', 'beer.uri? id =' + id, function (resp) {
// 콜백 응답.
Console.log ( '요청 된 맥주 :' + resp.Responsetext);
});
}
위의 코드에는 GetBeerById가 내부적으로 사용하기 때문에 브라우저 컨텍스트를 사용할 수 있어야하는 문제가 있습니다. 컨텍스트가 사용되지 않으면 중지됩니다. 따라서 일반적으로 경험이 풍부한 프로그래머는 프로그램을 다음 형식으로 변환합니다.
코드 사본은 다음과 같습니다.
함수 getBeerByid (id, 콜백) {
// ID를 통해 요청을 보내고 데이터를 반환합니다.
Asyncrequest ( 'get', 'beer.uri? id =' + id, function (resp) {
// 콜백 응답
콜백 (Resp.Responsetext);
});
}
더 실용적입니까? 첫째, ID는 마음대로 전달 될 수 있으며 사용자 정의 처리 기능에 대한 콜백 기능도 제공됩니다. 그러나 이것이 브리징과 어떤 관련이 있습니까? 이것이 다음 코드가 반영 할 것입니다.
코드 사본은 다음과 같습니다.
addevent (요소, '클릭', GetBeerByIdBridge);
기능 getBeerByIdBridge (e) {
getBeerByid (this.id, function (맥주) {
Console.log ( '요청 된 맥주 :'+맥주);
});
}
여기서 GetBeerByIdbridge는 우리가 정의하는 다리이며, 추상 클릭 이벤트를 연결하고 getBeerById를 연결하는 데 사용되며 동시에 이벤트 소스의 ID와 사용자 정의 된 통화 함수 (console.log output)를 getBeerById 함수로 전달합니다.
이 예제는 조금 간단 해 보입니다. 또 다른 복잡한 실용적인 예를 들어 보겠습니다.
실제 XHR 연결 큐
우리는 대기열에 많은 Ajax 요청을 저장하는 대기열을 만들고 싶습니다. 대기열 사용은 주로 결합 된 요청이 먼저 처리되도록해야하기 때문입니다. 언제든지 각 요청에 대한 요청을 일시 중지하고 요청을 삭제하고 요청 및 구독 이벤트를 지원할 수 있습니다.
기본 핵심 기능
공식 시작하기 전에 여러 코어 캡슐화 기능을 정의해 봅시다. 첫째, 첫 번째는 비동기 요청의 함수 캡슐화입니다.
코드 사본은 다음과 같습니다.
var asyncrequest = (function () {
함수 handlereadystate (o, 콜백) {
var poll = window.setinterval (
기능 () {
if (o && O.readystate == 4) {
Window.ClearInterval (폴링);
if (콜백) {
콜백 (O);
}
}
},
50
);
}
var getxhr = function () {
var http;
노력하다 {
http = 새로운 xmlhttprequest;
getxhr = function () {
새로운 xmlhttprequest를 반환합니다.
};
}
캐치 (e) {
var msxml = [
'msxml2.xmlhttp.3.0',
'msxml2.xmlhttp',
'microsoft.xmlhttp'
];
for (var i = 0, len = msxml.length; i <len; ++ i) {
노력하다 {
http = new activexobject (msxml [i]);
getxhr = function () {
New ActiveXobject (msxml [i])를 반환합니다.
};
부서지다;
}
캐치 (e) {}
}
}
반환 http;
};
반환 함수 (메소드, URI, 콜백, PostData) {
var http = getxhr ();
http.open (method, uri, true);
http, 콜백);
http.send (postdata || null);
반환 http;
};
}) ();
캡슐화 된 자체 이행 함수는 일반적인 Ajax 요청 기능이며 Ajax 속성을 가진 사람은 누구나 이해할 수 있다고 생각합니다.
다음으로 메소드 (함수)를 추가하는 일반적인 방법을 정의합니다.
코드 사본은 다음과 같습니다.
function.prototype.method = function (name, fn) {
this.prototype [name] = fn;
이것을 반환하십시오;
};
마지막으로 배열에 대한 두 가지 방법을 추가하고 하나는 트래버스와 필터링 용입니다.
코드 사본은 다음과 같습니다.
if (! array.prototype.foreach) {
Array.method ( 'foreach', function (fn, thisobj) {
var scope = thisobj || 창문;
for (var i = 0, len = this.length; i <len; ++ i) {
fn.call (범위,이 [i], i, this);
}
});
}
if (! array.prototype.filter) {
Array.Method ( '필터', 함수 (fn, thisobj) {
var scope = thisobj || 창문;
var a = [];
for (var i = 0, len = this.length; i <len; ++ i) {
if (! fn.call (범위, this [i], i, this)) {
계속하다;
}
A.push (이 [i]);
}
반환 a;
});
}
일부 새로운 브라우저는 이미이 두 기능 (또는 일부 클래스 라이브러리가 이미 지원)을 지원하기 때문에 먼저 이미 지원되는지 판단해야하며 이미 지원되는 경우 더 이상 처리되지 않습니다.
관찰자 시스템
관찰자는 대기열의 이벤트 과정에서 중요한 역할을하며 대기열 (성공, 실패, 보류 중)시 이벤트를 구독 할 수 있습니다.
코드 사본은 다음과 같습니다.
Window.ded = Window.ded || {};
ded.util = ded.util || {};
ded.util.observer = function () {
this.fns = [];
}
ded.util.observer.prototype = {
구독 : 기능 (fn) {
this.fns.push (fn);
},
수신 취소 : 기능 (fn) {
this.fns = this.fns.filter (
함수 (el) {
if (el! == fn) {
el el;
}
}
);
},
화재 : 기능 (O) {
this.fns.foreach (
함수 (el) {
el (o);
}
);
}
};
큐의 주요 구현 코드
먼저 대기열의 주요 속성 및 이벤트 대의원을 구독합니다.
코드 사본은 다음과 같습니다.
ded.queue = function () {
// 요청 대기열이 포함되어 있습니다.
this.queue = [];
// 3 개의 다른 상태에서 관찰 가능한 객체를 사용하여 언제든지 이벤트를 구독 할 수 있습니다.
this.oncomplete = new ded.util.observer;
this.onfailure = new ded.util.observer;
this.onflush = new ded.util.observer;
// 외부 호출 중에 코어 속성을 설정할 수 있습니다
this.retrycount = 3;
this.currentry = 0;
this.paused = false;
this.timeout = 5000;
this.conn = {};
this.timer = {};
};
그런 다음 MED.QUEUE.METHOD OF DED.QUEUE.METHOD를 통해 대기열에 사용 가능한 많은 방법이 추가됩니다.
코드 사본은 다음과 같습니다.
ded.queue.
메소드 ( 'flush', function () {
// 플러시 방법
if (! this.queue.length> 0) {
반품;
}
if (this.paused) {
this.paused = false;
반품;
}
var that = this;
this.currentry ++;
var abort = function () {
that.conn.abort ();
if (that.currentretry == that.retryCount) {
that.onfailure.fire ();
that.currentry = 0;
} 또 다른 {
that.flush ();
}
};
this.timer = window.settimeout (Abort, this.timeout);
var Callback = function (o) {
Window.ClearTimeout (That.Timer);
that.currentry = 0;
that.queue.shift ();
that.onflush.fire (o.responsetext);
if (that.queue.length == 0) {
that.oncomplete.fire ();
반품;
}
// 다시 플러시로 호출합니다
that.flush ();
};
this.conn = Asyncrequest (
this.queue [0] [ 'method'],
this.queue [0] [ 'uri'],
콜백,
this.queue [0] [ 'params']
);
}).
메소드 ( 'setretryCount', function (count) {
this.retrycount = count;
}).
메소드 ( 'settimeout', function (time) {
this.timeout = time;
}).
메소드 ( 'add', function (o) {
this.queue.push (o);
}).
메소드 ( '일시 정지', function () {
this.paused = true;
}).
메소드 ( 'dequeue', function () {
this.queue.pop ();
}).
메소드 ( 'clear', function () {
this.queue = [];
});
코드는 많이 보이며 접히면 플러시, SetRetryCount, Settimeout, Add, Add, Pause, Dequeue 및 Clear Methods를 사용하여 큐에 실제로 정의되어 있음을 알 수 있습니다.
간단한 전화
코드 사본은 다음과 같습니다.
var q = 새로운 ded.queue;
// 느린 연결에 대처하기 위해 레트리 수를 조금 더 높이 설정
Q.SetRetryCount (5);
// 시간 초과 시간을 설정합니다
Q. 세트 타임 아웃 (1000);
// 2 개의 요청을 추가합니다.
q.add ({
방법 : 'get',
uri : '/path/to/file.php?ajax=true'
});
q.add ({
방법 : 'get',
uri : '/path/to/file.php?ajax=true&woe=me'
});
// 플러시 큐
q.flush ();
// 대기열을 일시 중지하고 나머지를 저장하십시오
Q. 페이지 ();
// 분명한.
Q.clear ();
// 2 개의 요청을 추가합니다.
q.add ({
방법 : 'get',
uri : '/path/to/file.php?ajax=true'
});
q.add ({
방법 : 'get',
uri : '/path/to/file.php?ajax=true&woe=me'
});
// 큐에서 마지막 요청을 삭제합니다.
Q.dequeue ();
// 다시 플러시합니다
q.flush ();
다리는 어디에 있습니까?
위의 통화 코드에는 브리지가 없으므로 다리는 어떻습니까? 아래의 전체 예를 살펴보면 모든 곳에 다리가 있음을 알 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.01 // en"
"http://www.w3.org/tr/html4/strict.dtd">
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> ajax 연결 큐 </title>
<script src = "utils.js"> </script>
<script src = "queue.js"> </script>
<script type = "text/javaScript">
addevent (창, '로드', function () {
// 성취하다.
var q = 새로운 ded.queue;
Q.SetRetryCount (5);
Q. 세트 타임 아웃 (3000);
var 항목 = $ ( '항목');
var results = $ ( 'results');
var queue = $ ( 'queue-items');
// 클라이언트에 대한 요청 추적 저장
var requests = [];
// 플러시 요청 후, 특수 처리 단계를 구독하십시오.
q.onflush.subscribe (function (data) {
results.innerhtml = data;
requests.shift ();
queue.innerhtml = requests.toString ();
});
// 구독 시간 처리 단계
q.onfailure.subscribe (function () {
results.innerhtml += '<span style = "color : red;"> 연결 오류! </span>';
});
// 모든 성공적인 처리 단계 x
q.oncomplete.subscribe (function () {
results.innerhtml += '<span style = "color : green;"> 완성! </span>';
});
var actiondispatcher = function (요소) {
스위치 (요소) {
케이스 '플러시':
q.flush ();
부서지다;
사례 'Dequeue':
Q.dequeue ();
requests.pop ();
queue.innerhtml = requests.toString ();
부서지다;
사례 '일시 정지':
Q. 페이지 ();
부서지다;
CASE 'CLEAR':
Q.clear ();
요청 = [];
queue.innerhtml = '';
부서지다;
}
};
var addRequest = function (요청) {
var data = request.split ( '-') [1];
q.add ({
방법 : 'get',
uri : 'Bridge-Connection-queue.php? ajax = true & s =' + data,
매개 변수 : null
});
requests.push (데이터);
queue.innerhtml = requests.toString ();
};
addevent (항목, '클릭', 함수 (e) {
var e = e || Window.event;
var src = e.target || e.srcelement;
노력하다 {
e.preventDefault ();
}
캐치 (예) {
e.returnvalue = false;
}
ActionDispatcher (src.id);
});
var adders = $ ( 'adders');
addevent (adders, 'click', function (e) {
var e = e || Window.event;
var src = e.target || e.srcelement;
노력하다 {
e.preventDefault ();
}
캐치 (예) {
e.returnvalue = false;
}
addRequest (src.id);
});
});
</스크립트>
<스타일 유형 = "text/css"media = "screen">
몸
{
글꼴 : 100% 조지아, 시간, 세리프;
}
H1, H2
{
글꼴 중량 : 정상;
}
#대기열 항목
{
높이 : 1.5em;
}
#추가
{
패딩 : .5EM;
배경 : #ddd;
테두리 : 1px 솔리드 #BBB;
}
#결과-영역
{
패딩 : .5EM;
테두리 : 1px 솔리드 #BBB;
}
</스타일>
</head>
<바디 ID = "예">
<div id = "doc">
<H1>
비동기 결합 요청 </h1>
<div id = "queue-items">
</div>
<div id = "Add-Stuff">
<H2> 대기열에 새 요청을 추가하십시오 </h2>
<ul id = "adders">
<li> <a href = "#"id = "action-01"> 큐에 "01"을 추가 </a> </li>
<li> <a href = "#"id = "action-02"> 큐에 "02"를 추가 </a> </li>
<li> <a href = "#"id = "action-03"> 큐에 "03"을 추가 </a> </li>
</ul>
</div>
<H2> 견적 제어 </h2>
<ul id = '항목'>
<li> <a href = "#"id = "flush"> flush </a> </li>
<li> <a href = "#"id = "dequeue"> dequeue </a> </li>
<li> <a href = "#"id = "pause"> pause </a> </li>
<li> <a href = "#"id = "clear"> Clear Clear </a> </li>
</ul>
<div id = "results-area">
<H2>
결과:
</h2>
<div id = "results">
</div>
</div>
</div>
</body>
</html>
이 예에서는 플러시 대기열, 일시 정지 대기열, 큐 요청 삭제, 대기열 등과 같은 다양한 작업을 수행 할 수 있습니다. 동시에 모든 사람이 다리의 힘을 경험했다고 생각합니다.
요약
브리지 모드의 장점도 분명합니다. 몇 가지 주요 장점 만 나열합니다.
1. 인터페이스 및 구현 부품을 분리하십시오. 구현은 항상 인터페이스에 바인딩되지 않을 수 있습니다. 런타임에 Abstract Class (함수)의 구현을 구성 할 수 있으며 객체는 런타임에서 구현을 변경할 수도 있습니다. 또한 추상화와 구현을 완전히 분리하여 계층화에 도움이되므로 더 나은 구조화 된 시스템을 생성합니다.
2. 확장 성 향상
3. 구현 세부 사항은 고객에게 투명하며 고객의 구현 세부 정보를 숨길 수 있습니다.
동시에 브리지 모드에는 자체 단점이 있습니다.
많은 수업으로 인해 개발 비용이 증가하고 성능을 줄일 수도 있습니다.