publish.html

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
 <div class="col-lg-8">
   <div class="input-group">
     <span id="pub1" class="input-group-addon">
       ±¨ÉçÒ»
     </span>
     <input v-model="user.name" type="text" class="form-control"  id="text1">
   </div>
 </div>
 <div class="col-lg-8">
   <div class="input-group">
     <span id="pub2" class="input-group-addon">
       ±¨Éç¶þ
     </span>
     <input v-model="user.name" type="text" class="form-control"  id="text2">
   </div>
 </div>
 <div class="col-lg-8">
   <div class="input-group">
     <span id="pub3" class="input-group-addon">
       ±¨ÉçÈý
     </span>
       <input v-model="user.name" type="text" class="form-control"  id="text3">
   </div>
 </div>
   
 <div class="col-lg-8">
   ¶©ÔÄÕßÒ»
   <textarea id="sub1" class="form-control" rows="5"></textarea>
   ¶©ÔÄÕ߶þ:
   <textarea id="sub2"class="form-control" rows="5"></textarea>
 </div>
 
 <script>
 var Publish =function(name) {
  this.name = name;
  this.subscribers = [];// Êý×éÖдæ·ÅËùÓеĶ©ÔÄÕߣ¬±¾ÀýÖÐÊÇËù´ú±íµÄ¹Û²ìÕßµÄÐÐΪ
}
 
// ·Ö·¢£¬·¢²¼ÏûÏ¢
Publish.prototype.deliver =function (news) {
  var publish =this;// ¸÷±¨ÉçʵÀý
  // ֪ͨËùÓеĶ©ÔÄÕß
  this.subscribers.forEach(item => {
    item(news, publish);// ÿ¸ö¶©ÔÄÕ߶¼ÊÕµ½ÁË news, ²¢ÇÒ»¹ÖªµÀÊÇÄļұ¨Éç·¢²¼µÄ
  })
  return this;// ·½±ãÁ´Ê½µ÷ÓÃ
}
 
 // ¶©ÔÄ
Function.prototype.subscribe =function(publish) {
  var sub =this;// µ±Ç°¶©ÔÄÕßÕâ¸öÈË
  // 1. publish.subscribers ÖУ¬Ãû×Ö¿ÉÄÜÖظ´
  // 2. publish.subscribers Êý×éÀïÃæÒÑÓеÄÈË£¬²»ÄÜÔٴζ©ÔÄ
  var alreadyExists = publish.subscribers.some(function(item) {
    return item === sub;
  })
  // Èç¹û³ö°æÉçÃûµ¥ÖÐûÓÐÕâ¸öÈË£¬Ôò¼ÓÈë½øÈ¥
  if (!alreadyExists) publish.subscribers.push(sub);
   
  return this;// ·½±ãÁ´Ê½µ÷ÓÃ
}
 
 
// È¡Ïû¶©ÔÄ
Function.prototype.unsubscribe =function(publish) {
  var sub =this;
  // filter (¹ýÂ˺¯Êý:Ñ­»·±ãÀûÊý×éµÄÿһ¸öÔªËØ£¬Ö´ÐÐÒ»¸öº¯ÊýÈç¹û²»Æ¥Å䣬Ôòɾ³ý¸ÃÔªËØ)
  publish.subscribers = publish.subscribers.filter(function(item){
    return item !== sub ;
  });
  return this;// ·½±ãÁ´Ê½µ÷ÓÃ
}
 
 
 // ʵÀý»¯·¢²¼Õ߶ÔÏó(±¨Éç)
var pub1 =new Publish('±¨ÉçÒ»');
var pub2 =new Publish('±¨Éç¶þ');
var pub3 =new Publish('±¨ÉçÈý');
 
// ¶¨Òå¹Û²ìÕߣ¬µ±±¨ÉçÓÐÁËеÄÏûÏ¢ºó£¬¹Û²ìÕß»áÊÕµ½Í¨Öª
// ±¾ÀýÖÐÒÔ¹Û²ìÕßµÄÐÐΪ´úÌæ¹Û²ìÕ߶ÔÏó£¬Ä£Äâ addEventListener
var sub1 =function (news, pub) {
  console.log(arguments);
  document.getElementById('sub1').innerHTML += pub.name + news +'\n';
}
 
var sub2 =function (news, pub) {
  console.log(arguments);
  document.getElementById('sub2').innerHTML += pub.name + news +'\n';
}
 
// Ö´Ðж©ÔÄ·½·¨£¬ÕâÒ»²½Êǹ۲ìÕßÖ÷¶¯
sub1.subscribe(pub1).subscribe(pub2);
sub2.subscribe(pub1).subscribe(pub2).subscribe(pub3);
 
//--------------------- ·Ö¸îÏß ---------------------
var p1 = document.getElementById('pub1'); // dom
var p2 = document.getElementById('pub2'); // dom
var p3 = document.getElementById('pub3'); // dom
 
// ʼþ°ó¶¨, ´¥·¢ ±¨Éç µÄÏûÏ¢·Ö·¢
p1.onclick =function() {
  pub1.deliver(document.getElementById('text1').value, pub1);
}
 
p2.onclick =function() {
  pub2.deliver(document.getElementById('text2').value, pub2);
}
 
p3.onclick =function() {
  pub3.deliver(document.getElementById('text3').value, pub3);
}
 
 
 
 
 
 </script>