โหมดผู้สังเกตการณ์ (หรือที่เรียกว่าโหมด Publisher-Subscriber) ควรเป็นหนึ่งในโหมดที่ใช้กันมากที่สุด มีการใช้กันอย่างแพร่หลายในหลายภาษารวมถึงเหตุการณ์ DOM ที่เรามักจะติดต่อ นอกจากนี้ยังเป็นโหมดผู้สังเกตการณ์ที่ใช้ระหว่าง JS และ DOM
การคัดลอกรหัสมีดังนี้:
div.onclick = ฟังก์ชั่นคลิก () {
การแจ้งเตือน ("คลิก ')
-
ตราบใดที่คุณสมัครรับเหตุการณ์คลิกของ DIV ฟังก์ชั่นการคลิกจะถูกเรียกใช้
โหมดผู้สังเกตการณ์คืออะไร? มาดูโหมดผู้สังเกตการณ์ในชีวิตกันเถอะ
มีคำพูดที่โด่งดังในฮอลลีวูด "อย่าโทรหาฉันฉันจะโทรหาคุณ" ประโยคนี้อธิบายถึงรูปแบบของผู้สังเกตการณ์ ในหมู่พวกเขา "ฉัน" เป็นสำนักพิมพ์และ "คุณ" เป็นสมาชิก
ให้ฉันยกตัวอย่างให้คุณอีก เมื่อฉันมาที่ บริษัท เพื่อสัมภาษณ์ผู้สัมภาษณ์ทุกคนจะพูดกับฉันหลังจากที่ฉันทำเสร็จ: "โปรดทิ้งข้อมูลการติดต่อของคุณและเราจะแจ้งให้คุณทราบหากมีข่าวใด ๆ " ที่นี่ "ฉัน" เป็นสมาชิกและผู้สัมภาษณ์คือสำนักพิมพ์ ดังนั้นฉันไม่ต้องถามเกี่ยวกับผลการสัมภาษณ์ทุกวันหรือทุกชั่วโมงและความคิดริเริ่มในการสื่อสารอยู่ในมือของผู้สัมภาษณ์ และฉันแค่ต้องให้ข้อมูลการติดต่อ
โหมดผู้สังเกตการณ์สามารถบรรลุการแยกระหว่างสองโมดูลได้เป็นอย่างดี ถ้าฉันพัฒนาเกม HTML5 ในทีมเมื่อเกมเริ่มต้นวัสดุบางอย่างต้องโหลด ลอจิกของเกมดำเนินการหลังจากโหลดรูปภาพเหล่านี้เท่านั้น สมมติว่านี่เป็นโครงการที่ต้องใช้หลายคนในการทำงานด้วย ฉันทำโมดูลเกมเมอร์และแผนที่ให้เสร็จและเพื่อนร่วมงานของฉันได้เขียน LoadImage ตัวโหลดภาพ
รหัสของ loadimage มีดังนี้:
การคัดลอกรหัสมีดังนี้:
loadimage (imgary, function () {
map.init ();
gamer.init ();
-
เมื่อโหลดภาพแผนที่จะถูกแสดงผลและลอจิกของเกมจะถูกดำเนินการ โปรแกรมทำงานได้ดี ทันใดนั้นวันหนึ่งฉันจำได้ว่าฉันควรเพิ่มฟังก์ชั่นเสียงให้กับเกม ฉันควรให้ตัวโหลดรูปภาพเพิ่มบรรทัดของรหัส
การคัดลอกรหัสมีดังนี้:
loadimage (imgary, function () {
map.init ();
gamer.init ();
sount.init ();
-
แต่เพื่อนร่วมงานของฉัน A ผู้เขียนโมดูลนี้ไปเที่ยวต่างประเทศ ดังนั้นฉันจึงเรียกเขาว่าเฮ้ ฟังก์ชั่น loadimage ของคุณอยู่ที่ไหน ฉันสามารถเปลี่ยนได้หรือไม่? จะมีผลข้างเคียงใด ๆ หลังจากเปลี่ยนหรือไม่? อย่างที่คุณคิดว่าสิ่งที่ไม่สบายใจทุกชนิดเกิดขึ้น ถ้าเราสามารถเขียนด้วยวิธีนี้ได้ตั้งแต่เริ่มต้น:
การคัดลอกรหัสมีดังนี้:
loadimage.listen ("Ready ', function () {
map.init ();
-
loadimage.listen ("Ready ', function () {
gamer.init ();
-
loadimage.listen ("Ready ', function () {
sount.init ();
-
หลังจาก LoadImage เสร็จสมบูรณ์มันไม่สนใจว่าจะเกิดอะไรขึ้นในอนาคตเพราะงานเสร็จ ถัดไปมันเพิ่งเผยแพร่สัญญาณ
การคัดลอกรหัสมีดังนี้:
loadimage.trigger ("พร้อม ');
จากนั้นวิชาที่ฟังเหตุการณ์ 'พร้อม' ของ LoadImage จะได้รับการแจ้งเตือน เช่นเดียวกับตัวอย่างการสัมภาษณ์ครั้งสุดท้าย ผู้สัมภาษณ์ไม่สนใจว่าผู้สัมภาษณ์จะกินที่ไหนหลังจากได้รับผลการสัมภาษณ์ เขามีหน้าที่รับผิดชอบในการรวบรวมประวัติย่อของผู้สัมภาษณ์ด้วยกันเท่านั้น เมื่อผลการสัมภาษณ์ออกมาพวกเขาจะแจ้งให้พวกเขาทราบทีละคนตามหมายเลขโทรศัพท์ในประวัติย่อ
หลังจากพูดคุยเกี่ยวกับแนวคิดมากมายเราสามารถบรรลุการใช้งานเฉพาะ กระบวนการดำเนินการเป็นเรื่องง่ายมาก ผู้สัมภาษณ์ส่งประวัติย่อลงในกล่องจากนั้นผู้สัมภาษณ์เรียกคนทีละคนเพื่อแจ้งผลลัพธ์ในเวลาที่เหมาะสม
การคัดลอกรหัสมีดังนี้:
Events = function () {
var ฟัง, บันทึก, obj, one, remove, trigger, __ นี่;
obj = {};
__ นี่ = สิ่งนี้;
ฟัง = ฟังก์ชั่น (คีย์, eventfn) {// โยนเรซูเม่ในกล่องคีย์คือข้อมูลการติดต่อ
var stack, _ref; // สแต็คเป็นกล่อง
stack = (_ref = obj [key])! = null? _ref: obj [key] = [];
return stack.push (eventfn);
-
One = function (key, eventfn) {
ลบ (กุญแจ);
return Listen (key, eventfn);
-
ลบ = ฟังก์ชั่น (คีย์) {
var _ref;
return (_ref = obj [key])! = null? _ref.length = 0: โมฆะ 0;
-
trigger = function () {// ผู้สัมภาษณ์โทรไปแจ้งผู้สัมภาษณ์
var fn, stack, _i, _len, _ref, คีย์;
key = array.prototype.shift.call (อาร์กิวเมนต์);
stack = (_ref = obj [key])! = null? _ref: obj [key] = [];
สำหรับ (_i = 0, _len = stack.length; _i <_len; _i ++) {
fn = stack [_i];
ถ้า (fn.apply (__ นี่, อาร์กิวเมนต์) === เท็จ) {
กลับเท็จ;
-
-
กลับ {
ฟัง: ฟัง,
หนึ่ง: หนึ่ง,
ลบ: ลบออก
ทริกเกอร์: ทริกเกอร์
-
-
สุดท้ายใช้โหมดผู้สังเกตการณ์เพื่อสร้างแอปพลิเคชั่นขนาดเล็กสำหรับสถานีโทรทัศน์ผู้ใหญ่
การคัดลอกรหัสมีดังนี้:
// สมาชิก
var adderaltv = event ();
AdultTv .Listen ("Play ', ฟังก์ชั่น (ข้อมูล) {
การแจ้งเตือน ("ภาพยนตร์เรื่องนี้คือวันนี้" + data.name);
-
// สำนักพิมพ์
AdultTv .Trigger ("Play ', {' Name ':' Ki Aso '})