يجب أن يكون وضع Observer (المعروف أيضًا باسم وضع الناشر-Subscriber) أحد أكثر الأوضاع شيوعًا. يستخدم على نطاق واسع في العديد من اللغات ، بما في ذلك أحداث DOM التي عادة ما نتواصل معها. إنه أيضًا وضع مراقب يتم تنفيذه بين JS و DOM.
نسخة الكود كما يلي:
div.onclick = دالة انقر () {
تنبيه ("انقر")
}
طالما قمت بالاشتراك في حدث النقر فوق DIV ، سيتم تشغيل نقرة الوظيفة.
إذن ما هو وضع المراقب؟ دعونا نلقي نظرة على وضع المراقب في الحياة.
هناك قول مشهور في هوليوود. "لا تتصل بي ، سأتصل بك." تشرح هذه الجملة خصوصيات وعموميات نمط المراقب. من بينهم ، "أنا" هو الناشر و "أنت" هو المشترك.
اسمحوا لي أن أعطيك مثالا آخر. عندما أتيت إلى الشركة لإجراء مقابلة ، سيقول لي كل محاواة بعد أن انتهيت: "يرجى ترك معلومات الاتصال الخاصة بك ، وسوف نعلمك إذا كان هناك أي أخبار". هنا "أنا" هو المشترك والمقابلة هو الناشر. لذلك لا يتعين علي أن أسأل عن نتائج المقابلة كل يوم أو كل ساعة ، والمبادرة في التواصل في أيدي المقابلة. وأنا فقط بحاجة إلى تقديم معلومات الاتصال.
يمكن أن يحقق وضع Observer فك الارتباط بين الوحدتين جيدًا. إذا كنت أقوم بتطوير لعبة HTML5 في فريق ، عندما بدأت اللعبة ، يلزم تحميل بعض مواد الصورة. يتم تنفيذ منطق اللعبة فقط بعد تحميل هذه الصور. لنفترض أن هذا مشروع يتطلب من العديد من الأشخاص العمل معه. لقد أكملت وحدات اللاعب والخريطة ، وكتب زميلي A Loader LoadImage.
رمز LoadImage كما يلي:
نسخة الكود كما يلي:
loadImage (imgary ، function () {
map.init () ؛
gamer.init () ؛
})
عند تحميل الصورة ، يتم تقديم الخريطة ويتم تنفيذ منطق اللعبة. حسنًا ، البرنامج يعمل بشكل جيد. فجأة في يوم من الأيام ، تذكرت أنه يجب علي إضافة وظيفة صوتية إلى اللعبة. يجب أن أحصل على محمل الصورة إضافة سطر من التعليمات البرمجية.
نسخة الكود كما يلي:
loadImage (imgary ، function () {
map.init () ؛
gamer.init () ؛
sount.init () ؛
})
لكن زميلي أ ، الذي كتب هذه الوحدة ، ذهب في رحلة إلى الخارج. لذلك اتصلت به ، مهلا. أين وظيفة loadImage الخاصة بك؟ هل يمكنني تغييره؟ هل سيكون هناك أي آثار جانبية بعد تغييرها؟ كما تعتقد ، حدثت جميع أنواع الأشياء غير المستقرة. إذا تمكنا من الكتابة بهذه الطريقة في البداية:
نسخة الكود كما يلي:
LoadImage.Listen ("جاهز" ، وظيفة () {
map.init () ؛
})
LoadImage.Listen ("جاهز" ، وظيفة () {
gamer.init () ؛
})
LoadImage.Listen ("جاهز" ، وظيفة () {
sount.init () ؛
})
بعد اكتمال LoadImage ، لا يهتم بما سيحدث في المستقبل ، لأن عمله يتم. بعد ذلك ينشر فقط إشارة.
نسخة الكود كما يلي:
loadImage.trigger ("جاهز") ؛
ثم سيتلقى الأشخاص الذين استمعوا إلى حدث "جاهز" من LoadImage الإخطارات. تماما مثل مثال المقابلة الأخيرة. لا يهتم القائم بإجراء المقابلة بالمكان الذي سيأكله المقابلات بعد تلقي نتائج المقابلة. إنه مسؤول فقط عن جمع استئناف المقابلات معًا. عندما تظهر نتائج المقابلة ، سيقومون بإخطارهم واحدًا تلو الآخر وفقًا لرقم الهاتف في السيرة الذاتية.
بعد الحديث عن العديد من المفاهيم ، يمكننا تحقيق تنفيذ محدد. عملية التنفيذ بسيطة للغاية في الواقع. يلقي القائم بإجراء المقابلة السيرة الذاتية في صندوق ، ثم يقوم القائم بإجراء المقابلة بواحد تلو الآخر لإخطار النتائج في الوقت المناسب.
نسخة الكود كما يلي:
الأحداث = الدالة () {
var الاستماع ، log ، obj ، واحد ، إزالة ، المشغل ، __ هذا ؛
OBJ = {} ؛
__ هذا = هذا ؛
الاستماع = الدالة (المفتاح ، eventfn) {// رمي السيرة الذاتية في المربع ، المفتاح هو معلومات الاتصال.
فار مكدس ، _ref ؛ // Stack هو مربع
stack = (_ref = obj [key])! = null؟ _ref: obj [key] = [] ؛
return stack.push (eventFn) ؛
} ؛
واحد = دالة (مفتاح ، eventfn) {
إزالة (مفتاح) ؛
إرجاع الاستماع (المفتاح ، eventFN) ؛
} ؛
إزالة = دالة (مفتاح) {
var _ref ؛
العودة (_ref = obj [مفتاح])! = null؟ _ref.length = 0: void 0 ؛
} ؛
trigger = function () {// دعوات المقابلة لإخطار القائم بإجراء المقابلة
var fn ، stack ، _i ، _len ، _ref ، key ؛
key = array.prototype.shift.call (وسيطات) ؛
stack = (_ref = obj [key])! = null؟ _ref: obj [key] = [] ؛
لـ (_i = 0 ، _len = stack.length ؛ _i <_len ؛ _i ++) {
fn = stack [_i] ؛
if (fn.apply (__ ذلك ، الوسائط) === خطأ) {
العودة كاذبة
}
}
يعود {
استمع: اسمع ،
واحد: واحد ،
إزالة: إزالة ،
الزناد: الزناد
}
}
أخيرًا ، استخدم وضع المراقب لتقديم طلب صغير لمحطات التلفزيون البالغين.
نسخة الكود كما يلي:
// المشتركين
var adulttv = event () ؛
ViRETV .Listen ("play" ، وظيفة (البيانات) {
ALERT ("Whort Movie Today" + data.name) ؛
}) ؛
//الناشر
البالغين. trigger ("play '، {' name ':' ki aso '})