แนะนำ
โหมดสื่อกลาง (ผู้ไกล่เกลี่ย) ใช้วัตถุสื่อกลางในการห่อหุ้มชุดของการโต้ตอบของวัตถุ ตัวกลางทำให้วัตถุไม่จำเป็นต้องอ้างอิงซึ่งกันและกันอย่างชัดเจนดังนั้นจึงมีการเชื่อมต่ออย่างหลวม ๆ และสามารถเปลี่ยนการโต้ตอบได้อย่างอิสระ
เนื้อหาหลักมาจาก: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript
ข้อความ
ในการพัฒนาซอฟต์แวร์ตัวกลางเป็นรูปแบบการออกแบบพฤติกรรมที่ช่วยให้ส่วนต่าง ๆ ของระบบสามารถสื่อสารได้โดยการจัดหาอินเทอร์เฟซแบบครบวงจร โดยทั่วไปหากระบบมี submodules จำนวนมากที่ต้องสื่อสารโดยตรงจะต้องสร้างจุดควบคุมส่วนกลางสำหรับแต่ละโมดูลเพื่อโต้ตอบผ่านจุดควบคุมส่วนกลาง แบบจำลองตัวกลางอนุญาตให้ submodules เหล่านี้บรรลุวัตถุประสงค์ของการแยก decoupling โดยไม่ต้องสื่อสารโดยตรง
ตัวอย่างเช่นระบบควบคุมการจราจรของสนามบินทั่วไปหอคอยเป็นตัวกลางซึ่งควบคุมการบินขึ้นและลงจอดของเครื่องบิน (submodule) เนื่องจากการสื่อสารทั้งหมดเสร็จสิ้นจากเครื่องบินที่รายงานไปยังหอคอยแทนที่จะสื่อสารกันก่อนเครื่องบิน ระบบควบคุมส่วนกลางเป็นกุญแจสำคัญในระบบนั่นคือบทบาทของตัวกลางในการออกแบบซอฟต์แวร์
ก่อนอื่นให้เข้าใจโดยใช้รหัสหลอก:
การคัดลอกรหัสมีดังนี้:
// รหัสต่อไปนี้คือรหัสหลอกโปรดอย่าให้ความสนใจกับรหัสมากเกินไป
// ที่นี่เนมสเปซแอพเทียบเท่ากับการเล่นบทบาทของตัวกลาง
VAR APP = APP || -
// ทำคำขอ AJAX ผ่านตัวกลางแอป
app.sendrequest = function (ตัวเลือก) {
ส่งคืน $ .ajax ($. ขยาย ({}, ตัวเลือก);
-
// หลังจากขอ URL แสดงมุมมอง
app.populateView = function (url, view) {
$. เมื่อ (app.sendrequest ({url: url, วิธี: 'get'})
. แล้ว (ฟังก์ชั่น () {
// แสดงเนื้อหา
-
-
// ล้างเนื้อหา
app.resetView = ฟังก์ชั่น (ดู) {
view.html ('');
-
ในจาวาสคริปต์ตัวกลางเป็นเรื่องธรรมดามากเทียบเท่ากับบัสข้อความในรูปแบบผู้สังเกตการณ์ อย่างไรก็ตามพวกเขาไม่ได้ถูกนำไปใช้โดยการโทรแบบผับ/ย่อยเหมือนผู้สังเกตการณ์ แต่ได้รับการจัดการโดยตัวกลางในลักษณะที่เป็นเอกภาพ ให้เรายกตัวอย่างตามผู้สังเกตการณ์:
การคัดลอกรหัสมีดังนี้:
var mediator = (function () {
// สมัครสมาชิกกิจกรรมและให้ฟังก์ชั่นการโทรกลับหลังจากเหตุการณ์ถูกเรียกใช้
var subscribe = function (channel, fn) {
if (! mediator.channels [channel]) mediator.channels [channel] = [];
mediator.channels [channel] .push ({บริบท: สิ่งนี้, การโทรกลับ: fn});
คืนสิ่งนี้;
-
// กิจกรรมออกอากาศ
publish = function (channel) {
if (! mediator.channels [channel]) ส่งคืน false;
var args = array.prototype.slice.call (อาร์กิวเมนต์, 1);
สำหรับ (var i = 0, l = mediator.channels [channel] .length; i <l; i ++) {
การสมัครสมาชิก var = mediator.channels [channel] [i];
การสมัครสมาชิก. callback.apply (subscription.context, args);
-
คืนสิ่งนี้;
-
กลับ {
แชนเนล: {},
เผยแพร่: เผยแพร่
สมัครสมาชิก: สมัครสมาชิก
InstallTo: ฟังก์ชั่น (obj) {
obj.subscribe = สมัครสมาชิก;
obj.publish = เผยแพร่;
-
-
-
การโทรรหัสค่อนข้างง่าย:
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (สื่อกลาง) {
ฟังก์ชั่นเริ่มต้น () {
// ค่าเริ่มต้น
mediator.name = "dudu";
// สมัครสมาชิก NAMECHANGE
// ฟังก์ชั่นการโทรกลับแสดงข้อมูลก่อนและหลังการแก้ไข
mediator.subscribe ('namechange', ฟังก์ชั่น (arg) {
console.log (this.name);
this.name = arg;
console.log (this.name);
-
-
ฟังก์ชั่น updatename () {
// เหตุการณ์ทริกเกอร์ออกอากาศพารามิเตอร์เป็นข้อมูลใหม่
Mediator.publish ('Namechange', 'Tom'); // Dudu, ทอม
-
เริ่มต้น (); // เริ่มต้น
updatename (); // เรียก
}) (สื่อกลาง);
คนกลางและผู้สังเกตการณ์
ณ จุดนี้ทุกคนอาจสับสน คนกลางและผู้สังเกตการณ์ดูเหมือนจะคล้ายกัน ความแตกต่างคืออะไร? จริง ๆ แล้วมันคล้ายกันเล็กน้อย แต่ลองดูคำอธิบายเฉพาะ:
รูปแบบผู้สังเกตการณ์วัตถุเดียวที่ไม่ได้ห่อหุ้มข้อ จำกัด ในทางตรงกันข้ามผู้สังเกตการณ์ผู้สังเกตการณ์และวิชาคอนกรีตทำงานร่วมกันเพื่อรักษาข้อ จำกัด การสื่อสารโต้ตอบผ่านผู้สังเกตการณ์หลายคนและคลาสคอนกรีตหลายคลาส: แต่ละคลาสคอนกรีตมักจะมีผู้สังเกตการณ์หลายคนและบางครั้งผู้สังเกตการณ์หนึ่งคนในคลาสคอนกรีตก็เป็นคลาสคอนกรีตของผู้สังเกตการณ์อื่น
สิ่งที่โมเดลตัวกลางไม่ได้เป็นเพียงการกระจาย แต่มันมีบทบาทในการรักษาข้อ จำกัด เหล่านี้
รูปแบบตัวกลางและรูปลักษณ์
หลายคนอาจสับสนเกี่ยวกับความแตกต่างระหว่างรูปแบบตัวกลางและรูปแบบที่ปรากฏ พวกเขาทั้งสองเป็นนามธรรมของโมดูลที่มีอยู่ แต่มีความแตกต่างเล็กน้อย
สิ่งที่ตัวกลางทำคือการสื่อสารระหว่างโมดูลซึ่งเป็นหลายทิศทาง แต่โหมดปรากฏตัวเพียงแค่กำหนดอินเทอร์เฟซอย่างง่ายสำหรับโมดูลหรือระบบที่แน่นอนโดยไม่ต้องเพิ่มฟังก์ชั่นเพิ่มเติม แนวคิดของโมดูลอื่น ๆ ในระบบไม่มีการเชื่อมต่อโดยตรงกับโหมดลักษณะที่ปรากฏและสามารถพิจารณาทางเดียว
นี่เป็นอีกตัวอย่างที่สมบูรณ์:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<title> รูปแบบ JavaScript </title>
<meta charset = "utf-8">
</head>
<body>
<div id = "ผลลัพธ์"> </div>
<script>
ฟังก์ชั่นเครื่องเล่น (ชื่อ) {
this.points = 0;
this.name = ชื่อ;
-
player.prototype.play = function () {
this.points += 1;
mediator.played ();
-
var scoreboard = {
// container เพื่อแสดงเนื้อหา
องค์ประกอบ: document.getElementById ('ผลลัพธ์')
// อัปเดตคะแนนการแสดงผล
อัปเดต: ฟังก์ชั่น (คะแนน) {
var i, msg = '';
สำหรับ (ฉันเป็นคะแนน) {
if (score.hasownproperty (i)) {
msg + = '<p> <strong>' + i + '<// strong>:';
msg += คะแนน [i];
msg += '<// p>';
-
-
this.element.innerhtml = msg;
-
-
var mediator = {
// ผู้เล่นทุกคน
ผู้เล่น: {},
// การเริ่มต้น
การตั้งค่า: function () {
var players = this.players;
players.home = ผู้เล่นใหม่ ('home');
ผู้เล่น. Guest = ผู้เล่นใหม่ ('แขก');
-
// หลังจากเล่นให้อัปเดตคะแนน
เล่น: ฟังก์ชั่น () {
var players = this.players,
คะแนน = {
หน้าแรก: players.home.points,
แขก: ผู้เล่น. guest.points
-
scoreboard.update (คะแนน);
-
// จัดการการโต้ตอบคีย์ผู้ใช้
Keypress: function (e) {
E = E || window.event; // เช่น
ถ้า (E.which === 49) {// หมายเลขคีย์ "1"
mediator.players.home.play ();
กลับ;
-
ถ้า (E.Which === 48) {// หมายเลขคีย์ "0"
mediator.players.guest.play ();
กลับ;
-
-
-
// ไป!
mediator.setup ();
window.onkeypress = mediator.keypress;
// สิ้นสุดหลังจาก 30 วินาที
settimeout (function () {
window.onkeypress = null;
console.log ('Game Over!');
}, 30000);
</script>
</body>
</html>
สรุป
โดยทั่วไปโหมดตัวกลางจะใช้ในสถานการณ์ที่กลุ่มวัตถุได้รับการกำหนดไว้อย่างดี แต่สื่อสารในลักษณะที่ซับซ้อน โดยทั่วไปแล้วโหมดตัวกลางใช้งานง่ายในระบบ แต่ก็ใช้งานง่ายในระบบได้ง่าย เมื่อกลุ่มวัตถุที่ซับซ้อนของการโต้ตอบแบบหลายต่อหลายครั้งปรากฏในระบบอย่ารีบใช้โหมดตัวกลางก่อน แต่ลองคิดดูว่ามีบางอย่างผิดปกติกับการออกแบบระบบหรือไม่
นอกจากนี้เนื่องจากโมเดลตัวกลางเปลี่ยนความซับซ้อนในการโต้ตอบเป็นความซับซ้อนของตัวกลางเองวัตถุตัวกลางจะซับซ้อนกว่าวัตถุอื่น ๆ