memperkenalkan
Seperti namanya, agen harus membantu orang lain melakukan sesuatu. GOF mendefinisikan model proxy sebagai berikut:
Mode proxy (proxy), menyediakan proxy untuk objek lain untuk mengontrol akses ke objek ini.
Mode proxy memungkinkan objek proxy untuk mengontrol referensi objek tertentu. Proxy dapat berupa objek apa pun: file, sumber daya, objek dalam memori, atau sesuatu yang sulit disalin.
teks
Mari berikan contoh sederhana. Jika Dudu ingin mengirim yogurt dan mawar gadis kecil, tetapi tidak tahu informasi kontaknya atau malu, dan ingin mempercayakan paman untuk mengirim mawar ini, maka pamannya adalah agen (sebenarnya, itu cukup bagus, Anda dapat mengurangi beberapa bunga kepada istri Anda), jadi bagaimana kami bisa melakukannya?
Salinan kode adalah sebagai berikut:
// menyatakan keindahan dulu
var girl = function (name) {
this.name = name;
};
// ini dudu
var dudu = function (girl) {
this.girl = girl;
this.sendGift = function (hadiah) {
alert ("hai" + girl.name + ", dudu memberi Anda hadiah:" + hadiah);
}
};
// pamannya adalah agen
var proxytom = function (girl) {
this.girl = girl;
this.sendGift = function (hadiah) {
(Dudu baru (gadis)). Sendgift (hadiah); // Kirim bunga untuk dudu
}
};
Metode panggilan sangat sederhana:
Salinan kode adalah sebagai berikut:
var proxy = proxytom baru (gadis baru ("yogurt girl"));
proxy.sendgift ("999 mawar");
Pertempuran praktis
Melalui kode di atas, saya percaya semua orang sangat jelas tentang mode proxy. Mari kita ambil pertempuran yang sebenarnya: kami memiliki daftar putar sederhana, dan kami perlu menampilkan tombol video pengantar dan putar di bawah koneksi saat mengklik satu koneksi (atau pilih semua). Saat mengklik tombol Putar, video diputar. Struktur daftar adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<h1> Dave Matthews Vids </h1>
<p> <span id = "toggle-all"> Pilih semua/seleksi </span> </p>
<ol id = "vids">
<li> <input type = "centang kotak" diperiksa> <a href = "http://new.music.yahoo.com/videos/--2158073"> Gravedigger </a> </li>
<li> <input type = "centang kotak" checked> <a href = "http://new.music.yahoo.com/videos/--4472739"> Save Me </a> </li>
<li> <input type = "centang kotak" diperiksa> <a href = "http://new.music.yahoo.com/videos/---45286339"> naksir </a> </li>
<li> <input type = "centang kotak" diperiksa> <a href = "http://new.music.yahoo.com/videos/--2144530"> Jangan minum air </a> </li>
<li> <input type = "centang kotak" checked> <a href = "http://new.music.yahoo.com/videos/--217241800"> lucu seperti itu </a> </li>
<li> <input type = "centang kotak" diperiksa> <a href = "http://new.music.yahoo.com/videos/--2144532"> Apa yang akan Anda katakan </a>
</li>
</ol>
Pertama -tama mari kita menganalisis yang berikut. Pertama, kami tidak hanya memantau peristiwa klik koneksi A, tetapi juga memantau acara klik "Pilih semua/anti-select", dan kemudian minta server untuk meminta informasi video dan merakit informasi HTML untuk menampilkannya pada posisi terakhir elemen LI. Efeknya adalah sebagai berikut:
Kemudian pantau acara klik dari koneksi Play, dan mulailah bermain setelah mengklik. Efeknya adalah sebagai berikut:
Oke, mulailah dengan, tanpa jQuery, mari kita sesuaikan pemilih:
Salinan kode adalah sebagai berikut:
var $ = function (id) {
return document.getElementById (id);
};
Karena layanan JSON Yahoo menyediakan parameter panggilan balik, kami masuk dalam panggilan balik khusus kami untuk menerima data. Kode perakitan string kueri spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var http = {
MakeRequest: function (ids, callback) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'pilih * dari music.video.id di mana id in ("%id%")',
format = "format = json",
handler = "callback =" + callback,
Script = Document.CreateElement ('Script');
sql = sql.replace ('%id%', ids.join ('","'));
sql = encodeuricomponent (sql);
url + = sql + '&' + format + '&' + handler;
script.src = url;
document.body.appendChild (skrip);
}
};
Objek proxy adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var proxy = {
IDS: [],
Tunda: 50,
Timeout: NULL,
Callback: NULL,
Konteks: NULL,
// Atur ID dan panggilan balik yang diminta untuk memicu panggilan balik selama pemutaran
MakeRequest: function (id, callback, konteks) {
// Tambahkan ke antrian DD ke antrian
this.ids.push (id);
this.callback = callback;
this.context = konteks;
// Atur batas waktu
if (! this.timeout) {
this.timeout = setTimeout (function () {
proxy.flush ();
}, this.delay);
}
},
// memicu permintaan, dan http.makeRequest dipanggil menggunakan tanggung jawab proxy
flush: function () {
// proxy.handler adalah panggilan balik saat meminta yahoo
http.makeRequest (this.ids, 'proxy.handler');
// Setelah meminta data, jalankan metode proxy.handler (ada panggilan balik lain yang ditetapkan di dalam)
// Hapus batas waktu dan antrian
this.timeout = null;
this.ids = [];
},
Handler: function (data) {
Var I, Max;
// panggilan balik panggilan untuk satu video
if (parseInt (data.query.count, 10) === 1) {
proxy.callback.call (proxy.context, data.query.results.video);
kembali;
}
// panggilan balik panggilan untuk beberapa video
untuk (i = 0, max = data.query.results.video.length; i <max; i += 1) {
proxy.callback.call (proxy.context, data.query.results.video [i]);
}
}
};
Modul pemrosesan video terutama memiliki tiga sub-fungsi: mendapatkan informasi, menampilkan informasi, dan memutar video:
Salinan kode adalah sebagai berikut:
var video = {
// inisialisasi kode pemain dan mulailah bermain
getplayer: function (id) {
kembali '' +
'<object id = "uvp_fop" SoftfullScreen = "true">' +
'<param name = "film" 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 & shareNable = 1" ///>' +
'<param name = "wmode" value = "transparent" ///>' +
'<embed' +
'Tinggi = "255"' +
'width = "400"' +
'id = "uvp_fop"' +
'SoftfullScreen = "true"' +
'src = "http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"' +
'type = "application/x-shockwave-flash"' +
'flashvars = "id = v' + id + '& Eid = 1301797 & lang = us & ympsc = 4195329 & enablefullscreen = 1 & shareteNable = 1"' +
'///' +
'<// objek>';
},
// Sambungkan informasi untuk menampilkan konten, dan kemudian menampilkannya di bagian bawah ditambahkan ke LI
UpdateList: function (data) {
var id,
html = '',
info;
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> album:' + data.album.release.title + ',' + data.album.release.releaseyear + '<br ///>';
}
html + = '<p> <a href = "http://new.music.yahoo.com/videos/--' + id + '"> »Play </a> <// p>';
info = document.createelement ('div');
info.id = "info" + id;
info.innerhtml = html;
$ ('v' + id) .AppendChild (info);
},
// Dapatkan informasi dan tampilkan
getInfo: function (id) {
var info = $ ('info' + id);
if (! info) {
proxy.makeRequest (id, video.updatelis, video); // Jalankan tanggung jawab proxy dan lulus dalam fungsi callback video.
kembali;
}
if (info.style.display === "none") {
info.style.display = '';
} kalau tidak {
info.style.display = 'none';
}
}
};
Sekarang kita dapat menangani kode untuk acara klik. Karena ada banyak koneksi, jika setiap koneksi terikat pada suatu peristiwa, jelas akan ada masalah dengan kinerja. Jadi kami mengikat acara ke elemen <Ol> dan kemudian mendeteksi apakah koneksi yang diklik adalah koneksi A. Jika itu berarti bahwa yang diklik adalah alamat video, dan kemudian dapat diputar:
Salinan kode adalah sebagai berikut:
$ ('vids'). onclick = function (e) {
var src, id;
E = E || window.event;
SRC = E.Target || E.Srcelement;
// Jika itu bukan koneksi, saya tidak akan terus memproses
if (src.nodename.touppercase ()! == "a") {
kembali;
}
// Berhenti gelembung
if (typeof e.preventDefault === "function") {
e.preventdefault ();
}
E.ReturnValue = false;
id = src.href.split ('-') [1];
// Jika Anda mengklik tautan bermain di area informasi video yang telah diproduksi, pemutaran akan dimulai
// lalu kembali tidak akan berlanjut
if (src.classname === "play") {
src.parentnode.innerHtml = videos.getplayer (id);
kembali;
}
src.parentnode.id = "v" + id;
videos.getInfo (id); // Ini adalah kode pemrosesan untuk menampilkan informasi video saat mengklik untuk pertama kalinya
};
Kode untuk memilih semua dan tidak seleksi serupa, jadi kami tidak akan menjelaskan:
Salinan kode adalah sebagai berikut:
$ ('sakelar-semua'). Onclick = function (e) {
var hrefs, i, max, id;
hrefs = $ ('vids'). GetElementsByTagname ('a');
untuk (i = 0, maks = hrefs.length; i <max; i += 1) {
// abaikan koneksi bermain
if (hrefs [i] .className === "play") {
melanjutkan;
}
// abaikan item yang tidak dipilih
if (! hrefs [i] .parentnode.firstchild.checked) {
melanjutkan;
}
id = hrefs [i] .href.split ('-') [1];
hrefs [i] .parentnode.id = "v" + id;
videos.getInfo (id);
}
};
Meringkaskan
Mode proxy umumnya cocok untuk situasi berikut:
1. Proxy jarak jauh, yaitu, untuk menyediakan representasi lokal untuk suatu objek di ruang alamat yang berbeda, sehingga fakta bahwa suatu objek ada di ruang alamat yang berbeda dapat disembunyikan, seperti kelas proxy di layanan web.
2. Agen virtual membuat objek dengan overhead tinggi sesuai kebutuhan, dan menggunakannya untuk menyimpan objek nyata yang membutuhkan waktu lama untuk membuat instantiate. Misalnya, ketika merender browser, masalahnya dapat ditampilkan terlebih dahulu, dan gambar dapat ditampilkan secara perlahan (yaitu, agen virtual menggantikan gambar yang sebenarnya. Pada saat ini, agen virtual menyimpan jalur dan ukuran gambar nyata.
3. Agen keamanan, digunakan untuk mengontrol izin saat mengakses objek nyata. Secara umum, objek harus memiliki izin akses yang berbeda.
4. Panduan Cerdas, hanya ketika objek sebenarnya disebut, agen menangani hal -hal lain. Misalnya, pengumpulan sampah di C# akan memiliki referensi saat menggunakan objek. Jika objek tidak memiliki referensi, GC dapat mendaur ulangnya.
Referensi: "Pola Desain Big Talk"