يقدم
كما يوحي الاسم ، يقوم الوكلاء بمساعدة الآخرين على فعل الأشياء. يحدد GOF نموذج الوكيل على النحو التالي:
يوفر وضع الوكيل (الوكيل) وكيلًا للكائنات الأخرى للتحكم في الوصول إلى هذا الكائن.
يسمح وضع الوكيل للكائن الوكيل بالتحكم في مرجع كائن معين. يمكن أن يكون الوكيل أي كائن تقريبًا: ملف أو مورد أو كائن في الذاكرة أو شيء يصعب نسخه.
نص
دعونا نعطي مثالا بسيطا. إذا أرادت دودو إرسال الورود الزبادي والبنات الصغيرة ، لكنها لا تعرف معلومات الاتصال الخاصة بها أو كانت محرجة ، وتريد أن تعهد بالعم إلى إرسال هذه الورود ، فإن العم هو وكيل (في الواقع ، إنه جيد جدًا ، يمكنك خصم بعض الزهور لزوجتك) ، فكيف يمكننا القيام بذلك؟
نسخة الكود كما يلي:
// إعلان الجمال أولاً
var girl = function (name) {
this.name = name ؛
} ؛
// هذا هو دودو
var dudu = function (girl) {
this.girl = فتاة ؛
this.sendgift = وظيفة (هدية) {
ALERT ("HI" + Girl.Name + "، Dudu يمنحك هدية:" + هدية) ؛
}
} ؛
// العم هو الوكيل
var proxytom = function (girl) {
this.girl = فتاة ؛
this.sendgift = وظيفة (هدية) {
(New Dudu (فتاة)). sendgift (هدية) ؛ // إرسال الزهور لدودو
}
} ؛
طريقة الاتصال بسيطة للغاية:
نسخة الكود كما يلي:
var proxy = new ProxyTom (فتاة جديدة ("Girl Yogurt")) ؛
proxy.sendgift ("999 الورود") ؛
معركة عملية
من خلال الكود أعلاه ، أعتقد أن الجميع واضح جدًا بشأن وضع الوكيل. دعنا نأخذ القتال الفعلي: لدينا قائمة تشغيل بسيطة ، ونحن بحاجة إلى عرض مقدمة أغنية الفيديو وزر التشغيل أسفل الاتصال عند النقر على اتصال واحد (أو تحديد الكل). عند النقر فوق زر التشغيل ، يتم تشغيل الفيديو. هيكل القائمة كما يلي:
نسخة الكود كما يلي:
<h1> ديف ماثيوز فيدس </h1>
<p> <span id = "Toggle-All"> حدد All/Reselect </span> </p>
<ol id = "vids">
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/--2158073 "> gravedigger </a> </li>
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/--4472739"> حفظني </a> </li>
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/-- 45286339"> crush </a> </li>
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/--2144530"> لا تشرب الماء </a> </li>
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/--217241800"> مضحك الطريق </a> </li>
<li> <input type = "checkbox" checked> <a href = "http://new.music.yahoo.com/videos/--2144532"> ماذا ستقول </a>
</li>
</ol>
دعنا أولاً نحلل ما يلي. أولاً ، لا نراقب فقط حدث Click of Connection A ، ولكن أيضًا نراقب حدث Click of "Select All/Anti-Select" ، ثم طلب الخادم للاستعلام عن معلومات الفيديو وتجميع معلومات HTML لعرضه في الموضع الأخير من عنصر LI. التأثير على النحو التالي:
ثم راقب حدث Click of the Play Connection ، وابدأ اللعب بعد النقر. التأثير على النحو التالي:
حسنًا ، ابدأ ، بدون jQuery ، دعنا نخصص المحدد:
نسخة الكود كما يلي:
var $ = function (id) {
return document.getElementById (id) ؛
} ؛
نظرًا لأن خدمة JSON الخاصة بـ Yahoo توفر معلمات رد الاتصال ، فإننا نمر في رد الاتصال المخصص لدينا لقبول البيانات. رمز تجميع سلسلة الاستعلام المحددة كما يلي:
نسخة الكود كما يلي:
var http = {
Makerequest: وظيفة (IDS ، رد الاتصال) {
var url = 'http://query.yahooapis.com/v1/public/yql؟q=' ،
SQL = 'SELECT * from music.video.id حيث IDS في ("٪ ID ٪") "،
Format = "Format = json" ،
Handler = "Callback =" + Callback ،
script = document.createElement ('script') ؛
sql = sql.replace ('٪ id ٪' ، ids.oin ('"،"')) ؛
SQL = EncodeUricOpmonent (SQL) ؛
url + = sql + '&' + format + '&' + handler ؛
script.src = url ؛
document.body.appendchild (script) ؛
}
} ؛
كائن الوكيل هو كما يلي:
نسخة الكود كما يلي:
var proxy = {
IDS: [] ،
التأخير: 50 ،
مهلة: فارغة ،
رد الاتصال: لاغ ،
السياق: لاغ ،
// قم بتعيين المعرف المطلوب والاسترداد لتشغيل رد الاتصال أثناء التشغيل
makerequest: وظيفة (معرف ، رد الاتصال ، السياق) {
// أضف إلى قائمة الانتظار DD إلى قائمة الانتظار
this.ids.push (id) ؛
this.callback = رد الاتصال ؛
this.context = السياق ؛
// تعيين مهلة
if (! 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 (يوجد رد اتصال آخر في الداخل)
// مهلة واضحة في قائمة الانتظار
this.timeout = null ؛
this.ids = [] ؛
} ،
معالج: وظيفة (بيانات) {
var i ، max ؛
// استدعاء رد الاتصال للحصول على فيديو واحد
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: Function (id) {
العودة '' +
'<كائن id = "uvp_fop" leftfullScreen = "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 & enablelScreen = 0 & shareenable = 1" ///>' +
'<param name = "wmode" value = "Transparent" ///>' +
'<embed' +
"الارتفاع =" 255 "" +
"العرض =" 400 "" +
"id =" UVP_FOP "" +
"lemetfullScreen =" 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 & enablelscreen = 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] .rl + '" ///>' ؛
html + = '<h2>' + data.title + '<// h2>' ؛
html + = '<p>' + data.copyrightyear + '،' + data.label + '<// p>' ؛
if (data.album) {
html + = '<p> الألبوم:' + data.album.release.title + '،' + data.album.release.releaseear + '<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) ؛
} ،
// احصل على المعلومات وعرضها
getInfo: function (id) {
var info = $ ('info' + id) ؛
إذا (! معلومات) {
proxy.makerequest (id ، videos.updatelist ، videos) ؛ // تنفيذ مسؤوليات الوكيل وتمرير في مقاطع الفيديو.
يعود؛
}
if (info.style.display === "none") {
info.style.display = '' ؛
} آخر {
info.style.display = 'none' ؛
}
}
} ؛
الآن يمكننا التعامل مع التعليمات البرمجية لنقر فوق أحداث. نظرًا لوجود العديد من الاتصالات ، إذا كان كل اتصال مرتبطًا بحدث ما ، فمن الواضح أن هناك مشكلة في الأداء. لذلك نحن نربط الحدث بعنصر <ol> ثم اكتشف ما إذا كان الاتصال الذي تم النقر عليه هو اتصال. إذا كان ذلك يعني أن النقر هو عنوان الفيديو ، ثم يمكن تشغيله:
نسخة الكود كما يلي:
$ ('vids'). onClick = function (e) {
var src ، id ؛
e = e || window.event ؛
src = e.target || E.Srcelement ؛
// إذا لم يكن اتصالًا ، فلن أستمر في المعالجة
if (src.nodename.touppercase ()! == "A") {
يعود؛
}
// توقف الفقاعة
if (typeof e.preventDefault === "function") {
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) ؛ // هذا هو رمز المعالجة لعرض معلومات الفيديو عند النقر لأول مرة
} ؛
تتشابه رموز اختيار الكل وعدم الإصلاح ، لذلك لن نشرح:
نسخة الكود كما يلي:
$ ('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 إعادة تدويره.
المرجع: "نمط تصميم الكلام الكبير"