แนะนำ
โหมดบริดจ์จะแยกชิ้นส่วนที่เป็นนามธรรมออกจากชิ้นส่วนการใช้งานเพื่อให้พวกเขาสามารถเปลี่ยนแปลงได้อย่างอิสระ
ข้อความ
โหมดบริดจ์มักใช้ในการตรวจสอบเหตุการณ์มากที่สุด ก่อนอื่นให้ดูที่รหัสชิ้นหนึ่ง:
การคัดลอกรหัสมีดังนี้:
addevent (องค์ประกอบ, 'คลิก', getBeerById);
ฟังก์ชั่น getBeerById (e) {
var id = this.id;
asyncRequest ('get', 'beer.uri? id =' + id, ฟังก์ชั่น (resp) {
// การตอบกลับการโทรกลับ
console.log ('เบียร์ที่ร้องขอ:' + resp.responsetext);
-
-
มีปัญหากับรหัสข้างต้นที่ GetBeerById ต้องมีบริบทของเบราว์เซอร์ที่จะใช้เพราะใช้คุณสมบัตินี้ภายใน หากบริบทไม่ได้ใช้มันจะหยุด ดังนั้นโดยทั่วไปโปรแกรมเมอร์ที่มีประสบการณ์เล็กน้อยจะเปลี่ยนโปรแกรมเป็นแบบฟอร์มต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getBeerById (id, callback) {
// ส่งคำขอผ่าน ID และส่งคืนข้อมูล
asyncRequest ('get', 'beer.uri? id =' + id, ฟังก์ชั่น (resp) {
// การตอบกลับการโทรกลับ
การโทรกลับ (resp.responsetext);
-
-
ใช้งานได้จริงมากขึ้นใช่มั้ย ก่อนอื่น ID สามารถส่งผ่านได้ตามต้องการและฟังก์ชั่นการโทรกลับมีให้สำหรับฟังก์ชั่นการประมวลผลที่กำหนดเอง แต่สิ่งนี้เกี่ยวข้องกับการเชื่อมโยง? นี่คือสิ่งที่รหัสต่อไปนี้จะสะท้อน:
การคัดลอกรหัสมีดังนี้:
addevent (องค์ประกอบ, 'คลิก', getBeerByidBridge);
ฟังก์ชั่น getBeerByidBridge (e) {
getBeerById (this.id, function (เบียร์) {
console.log ('เบียร์ที่ร้องขอ:'+เบียร์);
-
-
ที่นี่ GetBeerByidBridge เป็นสะพานที่เรากำหนดซึ่งใช้ในการเชื่อมต่อเหตุการณ์ Abstract Click และ GetBeerById และในเวลาเดียวกันผ่าน ID ของแหล่งเหตุการณ์และฟังก์ชั่นการโทรที่กำหนดเอง
ตัวอย่างนี้ดูเรียบง่ายนิดหน่อยลองใช้ตัวอย่างที่ซับซ้อนอีกอย่างหนึ่ง
คิวการเชื่อมต่อ XHR ที่เกิดขึ้นจริง
เราต้องการสร้างคิวซึ่งเก็บคำขอ AJAX จำนวนมากในคิว การใช้คิวส่วนใหญ่เป็นเพราะเราจำเป็นต้องตรวจสอบให้แน่ใจว่าคำขอที่เข้าร่วมจะถูกประมวลผลก่อน เมื่อใดก็ตามที่เราสามารถหยุดการร้องขอลบคำขอลองคำขอลองใหม่และสนับสนุนกิจกรรมการสมัครสมาชิกสำหรับแต่ละคำขอ
ฟังก์ชั่นหลักพื้นฐาน
ก่อนที่จะเริ่มอย่างเป็นทางการให้กำหนดฟังก์ชั่นการห่อหุ้มหลักหลายอย่าง ประการแรกคือฟังก์ชั่นการห่อหุ้มของคำขอแบบอะซิงโครนัส:
การคัดลอกรหัสมีดังนี้:
var asyncRequest = (function () {
ฟังก์ชั่น HandlerEadyState (O, Callback) {
var poll = window.setInterval (
การทำงาน () {
ถ้า (o && o.readystate == 4) {
window.clearinterval (แบบสำรวจ);
ถ้า (โทรกลับ) {
การโทรกลับ (O);
-
-
-
50
-
-
var getXhr = function () {
var http;
พยายาม {
http = ใหม่ xmlhttprequest;
getXhr = function () {
ส่งคืน xmlhttprequest ใหม่;
-
-
จับ (e) {
var msxml = [
'msxml2.xmlhttp.3.0'
'msxml2.xmlhttp'
'microsoft.xmlhttp'
-
สำหรับ (var i = 0, len = msxml.length; i <len; ++ i) {
พยายาม {
http = new ActiveXObject (msxml [i]);
getXhr = function () {
ส่งคืน ActiveXObject ใหม่ (msxml [i]);
-
หยุดพัก;
-
จับ (e) {}
-
-
กลับ http;
-
ฟังก์ชั่นส่งคืน (วิธีการ, uri, callback, postdata) {
var http = getxhr ();
http.open (วิธีการ, uri, true);
HandlerEadyState (http, callback);
http.send (postdata || null);
กลับ http;
-
-
ฟังก์ชั่นการดำเนินการที่ถูกห่อหุ้มด้วยตนเองเป็นฟังก์ชั่นคำขอ AJAX ทั่วไปและฉันเชื่อว่าทุกคนที่มีแอตทริบิวต์ AJAX สามารถเข้าใจได้
ต่อไปเรากำหนดวิธีการทั่วไปเพื่อเพิ่มวิธีการ (ฟังก์ชั่น):
การคัดลอกรหัสมีดังนี้:
function.prototype.method = function (ชื่อ, fn) {
this.prototype [ชื่อ] = fn;
คืนสิ่งนี้;
-
ในที่สุดเพิ่ม 2 วิธีเกี่ยวกับอาร์เรย์หนึ่งสำหรับ Traversal และอีกวิธีหนึ่งสำหรับการกรอง:
การคัดลอกรหัสมีดังนี้:
if (! array.prototype.foreach) {
array.method ('foreach', ฟังก์ชั่น (fn, thisobj) {
var scope = thisobj || หน้าต่าง;
สำหรับ (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 = [];
สำหรับ (var i = 0, len = this.length; i <len; ++ i) {
ถ้า (! fn.call (ขอบเขต, [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) {
ถ้า (el! == fn) {
return el;
-
-
-
-
ไฟ: ฟังก์ชั่น (o) {
this.fns.foreach (
ฟังก์ชั่น (EL) {
El (O);
-
-
-
-
รหัสการใช้งานหลักของคิว
ก่อนอื่นคุณสมัครสมาชิกแอตทริบิวต์หลักและผู้แทนกิจกรรมของคิว:
การคัดลอกรหัสมีดังนี้:
ded.queue = function () {
// มีคิวสำหรับคำขอ
this.queue = [];
// ใช้วัตถุที่สังเกตได้ใน 3 สถานะที่แตกต่างกันเพื่อให้คุณสามารถสมัครรับเหตุการณ์ได้ตลอดเวลา
this.oncomplete = ใหม่ ded.util.observer;
this.onfailure = ใหม่ ded.util.observer;
this.onflush = ใหม่ ded.util.observer;
// คุณสมบัติหลักสามารถตั้งค่าระหว่างการโทรภายนอก
this.retryCount = 3;
this.currentRetry = 0;
this.paused = false;
this.timeout = 5000;
this.conn = {};
this.timer = {};
-
จากนั้นผ่านการเรียกร้องของ dev.queue.method วิธีการที่มีอยู่จำนวนมากจะถูกเพิ่มเข้าไปในคิว:
การคัดลอกรหัสมีดังนี้:
DED.QUEUE
วิธี ('flush', function () {
// วิธีการล้าง
if (! this.queue.length> 0) {
กลับ;
-
if (this.paused) {
this.paused = false;
กลับ;
-
var that = this;
this.currentretry ++;
var abort = function () {
That.conn.abort ();
if (that.currentRetry == That.retryCount) {
That.onfailure.fire ();
นั่นคือ currentretry = 0;
} อื่น {
that.flush ();
-
-
this.timer = window.settimeout (ยกเลิก, this.timeout);
var callback = function (o) {
window.cleartimeout (that.timer);
นั่นคือ currentretry = 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', ฟังก์ชัน (นับ) {
this.retryCount = นับ;
-
วิธี ('settimeout', ฟังก์ชั่น (เวลา) {
this.timeout = เวลา;
-
วิธี ('เพิ่ม', ฟังก์ชัน (o) {
this.queue.push (o);
-
วิธี ('หยุดชั่วคราว', function () {
this.paused = true;
-
วิธีการ ('dequeue', function () {
this.queue.pop ();
-
วิธีการ ('ชัดเจน', function () {
this.queue = [];
-
รหัสดูมากและหลังจากการพับคุณจะพบว่ามันถูกกำหนดไว้ในคิวด้วยการล้าง, setretryCount, setTimeout, เพิ่ม, หยุดชั่วคราว, dequeue และวิธีการที่ชัดเจน
โทรง่าย
การคัดลอกรหัสมีดังนี้:
var Q = ใหม่ ded.Queue;
// ตั้งค่าจำนวนการลองใหม่ขึ้นเล็กน้อยเพื่อรับมือกับการเชื่อมต่อที่ช้า
Q.SetRetryCount (5);
// กำหนดเวลาหมดเวลา
Q.Settimeout (1,000);
// เพิ่ม 2 คำขอ
Q.Add ({
วิธี: 'รับ',
URI: '/path/to/file.php?ajax=true'
-
Q.Add ({
วิธี: 'รับ',
uri: '/path/to/file.php?ajax=true&woe=me'
-
// ฟลัชคิว
Q.Flush ();
// หยุดคิวชั่วคราวและบันทึกคนที่เหลืออยู่
Q.Pause ();
// ชัดเจน.
Q.Clear ();
// เพิ่ม 2 คำขอ
Q.Add ({
วิธี: 'รับ',
URI: '/path/to/file.php?ajax=true'
-
Q.Add ({
วิธี: 'รับ',
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>
<head>
<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.Settimeout (3000);
รายการ var = $ ('รายการ');
ผลลัพธ์ var = $ ('ผลลัพธ์');
var queue = $ ('queue-items');
// บันทึกติดตามคำขอของคุณบนไคลเอนต์
คำขอ var = [];
// หลังจากคำขอ Flush แต่ละครั้งสมัครรับข้อมูลขั้นตอนการประมวลผลพิเศษ
Q.onflush.subscribe (ฟังก์ชั่น (ข้อมูล) {
results.innerhtml = ข้อมูล;
requests.shift ();
queue.innerhtml = requests.toString ();
-
// ขั้นตอนการประมวลผลเวลาการสมัครสมาชิก
Q.onfailure.subscribe (function () {
Results.innerhtml += '<span style = "สี: สีแดง;"> ข้อผิดพลาดการเชื่อมต่อ! </span>';
-
// สมัครสมาชิกขั้นตอนการประมวลผลที่ประสบความสำเร็จทั้งหมด x
Q.oncomplete.subscribe (function () {
Results.innerhtml += '<span style = "สี: สีเขียว;"> เสร็จสิ้น! </span>';
-
var actionDispatcher = ฟังก์ชั่น (องค์ประกอบ) {
สวิตช์ (องค์ประกอบ) {
กรณี 'ฟลัช':
Q.Flush ();
หยุดพัก;
กรณี 'dequeue':
Q.Dequeue ();
requests.pop ();
queue.innerhtml = requests.toString ();
หยุดพัก;
กรณี 'หยุดชั่วคราว':
Q.Pause ();
หยุดพัก;
กรณี 'ชัดเจน':
Q.Clear ();
คำขอ = [];
queue.innerhtml = '';
หยุดพัก;
-
-
var addRequest = function (คำขอ) {
var data = request.split ('-') [1];
Q.Add ({
วิธี: 'รับ',
URI: 'Bridge-connection-queue.php? ajax = true & s =' + data,
params: null
-
requests.push (ข้อมูล);
queue.innerhtml = requests.toString ();
-
AddEvent (รายการ, 'คลิก', ฟังก์ชั่น (e) {
var e = e || window.event;
var src = e.target || E.Srelement;
พยายาม {
E.preventDefault ();
-
จับ (อดีต) {
E.returnValue = FALSE;
-
ActionDispatcher (SRC.ID);
-
var adders = $ ('adders');
AddEvent (Adders, 'คลิก', ฟังก์ชั่น (e) {
var e = e || window.event;
var src = e.target || E.Srelement;
พยายาม {
E.preventDefault ();
-
จับ (อดีต) {
E.returnValue = FALSE;
-
AddRequest (SRC.ID);
-
-
</script>
<style type = "text/css" media = "หน้าจอ">
ร่างกาย
-
แบบอักษร: จอร์เจีย 100%, Times, Serif;
-
H1, H2
-
Font-Weight: ปกติ;
-
#คิว-รายการ
-
ความสูง: 1.5em;
-
#add-stuff
-
Padding: .5EM;
ความเป็นมา: #DDD;
ชายแดน: 1px Solid #BBB;
-
#พื้นที่ผลลัพธ์
-
Padding: .5EM;
ชายแดน: 1px Solid #BBB;
-
</style>
</head>
<body 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 = "หยุดชั่วคราว"> หยุดชั่วคราว </a> </li>
<li> <a href = "#" id = "Clear"> Clear Clear </a> </li>
</ul>
<div id = "results-area">
<H2>
ผลลัพธ์:
</h2>
<div id = "ผลลัพธ์">
</div>
</div>
</div>
</body>
</html>
ในตัวอย่างนี้คุณสามารถดำเนินการต่าง ๆ เช่นคิวฟลัชคิวหยุดชั่วคราวลบคำขอในคิวคิวที่ชัดเจน ฯลฯ ในเวลาเดียวกันฉันเชื่อว่าทุกคนยังได้สัมผัสกับพลังของสะพาน
สรุป
ข้อดีของโหมดบริดจ์ก็ชัดเจนเช่นกัน เราจะแสดงรายการข้อดีหลักสองสามข้อเท่านั้น:
1. แยกอินเทอร์เฟซและชิ้นส่วนการใช้งาน การใช้งานอาจไม่ผูกพันกับอินเทอร์เฟซอย่างต่อเนื่อง การใช้งานคลาสนามธรรม (ฟังก์ชั่น) สามารถกำหนดค่าได้ที่รันไทม์และวัตถุสามารถเปลี่ยนการใช้งานได้ที่รันไทม์ นอกจากนี้ยังสามารถแยกแยะสิ่งที่เป็นนามธรรมและการใช้งานได้อย่างเต็มที่ซึ่งเอื้อต่อการฝังรากลึกดังนั้นจึงสร้างระบบที่มีโครงสร้างที่ดีขึ้น
2. ปรับปรุงความยืดหยุ่น
3. รายละเอียดการใช้งานมีความโปร่งใสต่อลูกค้าและสามารถซ่อนรายละเอียดการใช้งานจากลูกค้า
ในขณะเดียวกันโหมดบริดจ์ก็มีข้อเสียของตัวเองด้วย:
ชั้นเรียนจำนวนมากจะนำไปสู่ค่าใช้จ่ายในการพัฒนาที่เพิ่มขึ้นและอาจลดประสิทธิภาพ