แนะนำ
ตามชื่อที่แนะนำตัวแทนจะช่วยให้ผู้อื่นทำสิ่งต่าง ๆ GOF กำหนดโมเดลพร็อกซีดังนี้:
โหมดพร็อกซี (พร็อกซี) ให้พร็อกซีสำหรับวัตถุอื่น ๆ เพื่อควบคุมการเข้าถึงวัตถุนี้
โหมดพร็อกซีอนุญาตให้วัตถุพร็อกซีควบคุมการอ้างอิงของวัตถุเฉพาะ พร็อกซีสามารถเป็นวัตถุได้เกือบทุกวัตถุ: ไฟล์ทรัพยากรวัตถุในหน่วยความจำหรือสิ่งที่ยากต่อการคัดลอก
ข้อความ
ยกตัวอย่างง่ายๆ หาก Dudu ต้องการส่งโยเกิร์ตและดอกกุหลาบตัวน้อย แต่ไม่ทราบข้อมูลการติดต่อของเธอหรืออายและต้องการมอบความไว้วางใจให้ลุงส่งกุหลาบเหล่านี้แล้วลุงเป็นตัวแทน (จริง ๆ แล้วมันค่อนข้างดีคุณสามารถหักดอกไม้ให้ภรรยาของคุณได้)
การคัดลอกรหัสมีดังนี้:
// ประกาศความงามก่อน
var girl = function (ชื่อ) {
this.name = ชื่อ;
-
// นี่คือ dudu
var dudu = function (girl) {
this.girl = girl;
this.sendGift = ฟังก์ชั่น (ของขวัญ) {
การแจ้งเตือน ("hi" + girl.name + ", Dudu ให้ของขวัญแก่คุณ:" + ของขวัญ);
-
-
// ลุงเป็นตัวแทน
var proxytom = function (girl) {
this.girl = girl;
this.sendGift = ฟังก์ชั่น (ของขวัญ) {
(ใหม่ dudu (สาว)). sendgift (ของขวัญ); // ส่งดอกไม้สำหรับ dudu
-
-
วิธีการโทรนั้นง่ายมาก:
การคัดลอกรหัสมีดังนี้:
var proxy = proxytom ใหม่ (สาวใหม่ ("สาวโยเกิร์ต"));
Proxy.sendgift ("999 Roses");
การต่อสู้ที่ใช้งานได้จริง
ผ่านรหัสข้างต้นฉันเชื่อว่าทุกคนชัดเจนมากเกี่ยวกับโหมดพร็อกซี มาใช้การต่อสู้จริง: เรามีเพลย์ลิสต์ที่เรียบง่ายและเราจำเป็นต้องแสดงการแนะนำเพลงวิดีโอและปุ่มเล่นด้านล่างการเชื่อมต่อเมื่อคลิกที่การเชื่อมต่อเดียว (หรือเลือกทั้งหมด) เมื่อคลิกปุ่มเล่นวิดีโอจะถูกเล่น โครงสร้างรายการมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<H1> Dave Matthews vids </h1>
<p> <span id = "toggle-all"> เลือก all/reselect </span> </p>
<ol id = "vids">
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/--2158073"> gravedigger </a> </li>
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/--4472739"> บันทึกฉัน </a> </li>
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/-- 45286339"> Crush </a> </li>
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/--2144530"> อย่าดื่มน้ำ </a> </li>
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/--217241800"> ตลกวิธี </a> </li>
<li> <อินพุต type = "ช่องทำเครื่องหมาย" ตรวจสอบ> <a href = "http://new.music.yahoo.com/videos/--2144532"> คุณจะพูดอะไร </a>
</li>
</ol>
ก่อนอื่นให้วิเคราะห์สิ่งต่อไปนี้ ก่อนอื่นเราไม่เพียงตรวจสอบเหตุการณ์การคลิกของการเชื่อมต่อ A แต่ยังตรวจสอบเหตุการณ์คลิกของ“ เลือกทั้งหมด/anti-select” จากนั้นขอให้เซิร์ฟเวอร์สอบถามข้อมูลวิดีโอและรวบรวมข้อมูล HTML เพื่อแสดงที่ตำแหน่งสุดท้ายขององค์ประกอบ LI เอฟเฟกต์มีดังนี้:
จากนั้นตรวจสอบเหตุการณ์คลิกของการเชื่อมต่อการเล่นและเริ่มเล่นหลังจากคลิก เอฟเฟกต์มีดังนี้:
ตกลงเริ่มต้นโดยไม่มี jQuery เรามาปรับแต่งตัวเลือก:
การคัดลอกรหัสมีดังนี้:
var $ = function (id) {
ส่งคืน document.getElementById (id);
-
เนื่องจากบริการ JSON ของ Yahoo ให้พารามิเตอร์การโทรกลับเราจึงส่งต่อการโทรกลับที่กำหนดเองเพื่อรับข้อมูล รหัสแอสเซมบลีสตริงแบบสอบถามเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var http = {
MakeRequest: function (ids, callback) {
var url = 'http://query.yahooapis.com/v1/public/yql?q='
sql = 'select * จาก music.video.id โดยที่ ids ใน ("%id%")'
format = "format = json",
handler = "callback =" + การโทรกลับ
script = document.createElement ('script');
sql = sql.replace ('%id%', ids.join ('","'));
SQL = encodeuricomponent (SQL);
url + = sql + '&' + รูปแบบ + '&' + handler;
script.src = url;
document.body.appendchild (สคริปต์);
-
-
วัตถุพร็อกซีมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var proxy = {
ids: [],
ล่าช้า: 50,
หมดเวลา: เป็นโมฆะ
การโทรกลับ: null,
บริบท: NULL,
// ตั้งค่า ID ที่ร้องขอและการโทรกลับเพื่อเรียกการโทรกลับระหว่างการเล่น
MakeRequest: function (id, callback, บริบท) {
// เพิ่มลงในคิว dd ไปยังคิว
this.ids.push (id);
this.callback = การโทรกลับ;
this.context = บริบท;
// ตั้งค่าหมดเวลา
ถ้า (! this.timeout) {
this.timeout = settimeout (function () {
Proxy.flush ();
}, this.delay);
-
-
// ทริกเกอร์คำขอและ http.makerequest ถูกเรียกโดยใช้ความรับผิดชอบพร็อกซี
Flush: function () {
// proxy.handler เป็นการโทรกลับเมื่อขอ yahoo
http.makerequest (this.ids, 'proxy.handler');
// หลังจากร้องขอข้อมูลให้ดำเนินการ proxy.handler method (มีชุดโทรกลับอีกครั้งภายใน)
// การหมดเวลาและคิวที่ชัดเจน
this.timeout = null;
this.ids = [];
-
ตัวจัดการ: ฟังก์ชั่น (ข้อมูล) {
var i, สูงสุด;
// โทรกลับสำหรับวิดีโอเดียว
if (parseint (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
กลับ;
-
// โทรกลับสำหรับหลาย ๆ วิดีโอ
สำหรับ (i = 0, max = data.query.results.video.length; i <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
-
-
-
โมดูลการประมวลผลวิดีโอส่วนใหญ่มีสามฟังก์ชั่นย่อย: การรับข้อมูลการแสดงข้อมูลและการเล่นวิดีโอ:
การคัดลอกรหัสมีดังนี้:
var videos = {
// เริ่มต้นรหัสผู้เล่นและเริ่มเล่น
getPlayer: ฟังก์ชัน (id) {
return '' +
'<object id = "uvp_fop" lewalfullscreen = "true">' +
'<param name = "Movie" value = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" /////////>' +
'<param name = "flashvars" value = "id = v' + id + '& eid = 1301797 & lang = us & enablefullscreen = 0 & shareenable = 1" ///>' +
'<param name = "wmode" value = "โปร่งใส" ///>' +
'<ฝัง' +
'ความสูง = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'NowlfullScreen = "true"' +
'src = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"' +
'type = "แอปพลิเคชัน/x-shockwave-flash"' +
'flashvars = "id = v' + id + '& eid = 1301797 & lang = us & ympsc = 4195329 & enablefullscreen = 1 & shareenable = 1" +
-
'<// Object>';
-
// ประกบข้อมูลเพื่อแสดงเนื้อหาจากนั้นแสดงที่ด้านล่างของภาคผนวกเป็น Li
updateList: function (data) {
var id,
html = ''
ข้อมูล;
if (data.Query) {
data = data.query.results.video;
-
id = data.id;
html + = '<img src = "' + data.image [0] .url + '" ///>';
html + = '<h2>' + data.title + '<// h2>';
html + = '<p>' + data.copyrightyear + ',' + data.label + '<// p>';
if (data.album) {
html + = '<p> อัลบั้ม:' + data.album.release.title + ',' + data.album.release.releaseyear + '<br ///>';
-
html + = '<p> <a href = "http://new.music.yahoo.com/videos/--' + id + '"> »เล่น </a> <// p>';
info = document.createElement ('div');
info.id = "info" + id;
info.innerhtml = html;
$ ('V' + ID) .AppendChild (ข้อมูล);
-
// รับข้อมูลและแสดง
getInfo: ฟังก์ชัน (id) {
ข้อมูล var = $ ('ข้อมูล' + id);
ถ้า (! ข้อมูล) {
Proxy.makerequest (id, videos.updatelist, วิดีโอ); // ดำเนินการตามความรับผิดชอบของพร็อกซีและส่งผ่านใน videos.updatelist callback function
กลับ;
-
if (info.style.display === "ไม่มี") {
info.style.display = '';
} อื่น {
info.style.display = 'ไม่มี';
-
-
-
ตอนนี้เราสามารถจัดการรหัสสำหรับเหตุการณ์คลิกได้ เนื่องจากมีการเชื่อมต่อมากมายหากการเชื่อมต่อแต่ละครั้งถูกผูกไว้กับเหตุการณ์จึงเห็นได้ชัดว่ามีปัญหากับประสิทธิภาพ ดังนั้นเราจึงผูกเหตุการณ์กับองค์ประกอบ <ol> จากนั้นตรวจสอบว่าการเชื่อมต่อที่คลิกเป็นการเชื่อมต่อ A หรือไม่ หากหมายความว่าที่อยู่วิดีโอที่คลิกนั้นสามารถเล่นได้:
การคัดลอกรหัสมีดังนี้:
$ ('vids'). onclick = function (e) {
var src, id;
E = E || window.event;
src = e.target || E.Srelement;
// ถ้าไม่ใช่การเชื่อมต่อฉันจะไม่ประมวลผลต่อไป
if (src.nodename.touppercase ()! == "a") {
กลับ;
-
// หยุดฟองสบู่
if (typeof e.preventDefault === "ฟังก์ชั่น") {
E.preventDefault ();
-
E.returnValue = FALSE;
id = src.href.split ('-') [1];
// หากคุณคลิกที่ลิงค์เล่นในพื้นที่ข้อมูลวิดีโอที่ผลิตขึ้นการเล่นจะเริ่มขึ้น
// จากนั้นส่งคืนจะไม่ดำเนินการต่อ
if (src.className === "play") {
src.parentNode.innerhtml = videos.getPlayer (id);
กลับ;
-
src.parentNode.id = "v" + id;
videos.getInfo (id); // นี่คือรหัสการประมวลผลสำหรับการแสดงข้อมูลวิดีโอเมื่อคลิกเป็นครั้งแรก
-
รหัสสำหรับการเลือกทั้งหมดและ unselecting นั้นคล้ายกันดังนั้นเราจะไม่อธิบาย:
การคัดลอกรหัสมีดังนี้:
$ ('toggle-all'). onclick = function (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). getElementsByTagname ('a');
สำหรับ (i = 0, max = hrefs.length; i <max; i += 1) {
// ละเว้นการเชื่อมต่อการเล่น
if (hrefs [i] .className === "play") {
ดำเนินการต่อ;
-
// ละเว้นรายการที่ไม่ได้เลือก
if (! hrefs [i] .parentNode.firstchild.Checked) {
ดำเนินการต่อ;
-
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentNode.id = "v" + id;
videos.getInfo (id);
-
-
สรุป
โหมดพร็อกซีมักจะเหมาะสำหรับสถานการณ์ต่อไปนี้:
1. พร็อกซีระยะไกลนั่นคือเพื่อให้การเป็นตัวแทนท้องถิ่นสำหรับวัตถุในพื้นที่ที่อยู่ต่างกันเพื่อให้ความจริงที่ว่าวัตถุมีอยู่ในพื้นที่ที่อยู่ต่างกันสามารถซ่อนได้เช่นเดียวกับคลาสพร็อกซีในบริการเว็บ
2. ตัวแทนเสมือนจริงสร้างวัตถุที่มีค่าใช้จ่ายสูงตามต้องการและใช้เพื่อจัดเก็บวัตถุจริงที่ใช้เวลานานในการสร้างอินสแตนซ์ ตัวอย่างเช่นเมื่อเรนเดอร์เบราว์เซอร์ปัญหาสามารถแสดงได้ก่อนและสามารถแสดงภาพได้อย่างช้าๆ (นั่นคือเอเจนต์เสมือนจริงแทนที่ภาพจริงในเวลานี้ตัวแทนเสมือนจริงจะบันทึกเส้นทางและขนาดของภาพจริง
3. ตัวแทนความปลอดภัยใช้เพื่อควบคุมการอนุญาตเมื่อเข้าถึงวัตถุจริง โดยทั่วไปวัตถุควรมีสิทธิ์การเข้าถึงที่แตกต่างกัน
4. คำแนะนำอัจฉริยะเฉพาะเมื่อมีการเรียกวัตถุจริงแล้วตัวแทนจัดการสิ่งอื่น ๆ ตัวอย่างเช่นการรวบรวมขยะใน C# จะมีการอ้างอิงเมื่อใช้วัตถุ หากวัตถุไม่มีการอ้างอิง GC สามารถรีไซเคิลได้
การอ้างอิง: "รูปแบบการออกแบบ Big Talk"