This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Version 1.0 (two-way coupling)

We describe a job to do the actual scene to say the observer pattern, we will join in the company of many groups, WeChat group, QQ group, enterprise WeChat group, nailing group and so on, they all have some common features, the first function is to can invite employees to join, the second function is a group of announcement to inform members of the group. We have an observer pattern between employees and the work group, with multiple employees paying attention to (subscribing to) group announcements, and the work group publishing information when there is an important event.

WeCharGroup class

class WeCharGroup {
  members: Programmer[] = []; // The list of programmers in the group
  notice: string; / / notice

  addMember(member: Programmer): void {
    this.members.push(member);
  }

  setNotice(notice): void {
    this.notice = notice;
  }
  getNotice(): string {
    return this.notice;
  }

  notifyAll(): void {
    this.members.forEach(v= >v.update()); }}Copy the code

Programmer class

class Programmer {
  name: string; // Who is the programmer?
  swg: WeCharGroup; // Which group is the programmer in?

  constructor(name: string, swg: WeCharGroup) {
    this.name = name;
    this.swg = swg;
  }
  // The programmer receives a new message.
  update() {
    console.log(
      `The ${this.name}You have a new group announcement, please pay attention to receive! \nThe ${this.swg.getNotice()}`); }}Copy the code

We construct WeCharGroup and Programmer objects by object-oriented programming idea, their functions and attributes are clearly reflected in the UML class diagram and code above, let’s experience it together now!

Experience in progress

  1. Step 1: Create our work group.
  2. Step 2: invite the company’s front end Mr. Zhang and back end Mr. Wang into the group and let them get the latest group announcement information in time.
  3. Step 3: Today is the last day of the week. Set up an announcement (” Finish your weekly paper before you leave. ).
  4. Step 4: Issue the latest announcement.

After the above steps, our xiao Zhang and Xiao Wang received a notice to remember to write the weekly newspaper. Have HXDS finished writing the weekly newspaper?

// The first step is to set up a work group
const workGroup = new WeCharGroup();

// Add the programmer to the group through addMember, and the programmer will get the latest announcements through the group
workGroup.addMember(new Programmer('Front end piece', workGroup));
workGroup.addMember(new Programmer('Back End Xiao Wang', workGroup));

// Set group bulletin
workGroup.setNotice(Remember to finish your weekly paper before you leave work. ');

// Make an announcement
workGroup.notifyAll();
Copy the code

Version 2.0 (first decoupling)

By looking at the UML class diagram of version 1.0, it seems that our wechat group can only invite programmers. How can this work? Test engineers also need to see the announcement, and everyone has to see the announcement. Ok, let’s make a change to this phenomenon. What are our needs? A wide range of employees can be approved after a work group announcementupdateTo get the latest announcements, we need to bring the existing onesProgrammerClass is abstracted because our employees are concerned about the work group, and all of our abstract classes are defined as observers.

The Observer abstract class

abstract class Observer {
  name: string; // Do you want to pay attention to group announcements?
  swg: WeCharGroup; // Which group announcements to follow?

  abstract update(): void; // Receive new messages.
}
Copy the code

Programmer class 2.0

class Programmer extends Observer {
  constructor(name: string, swg: WeCharGroup) {
    super(a);this.name = name;
    this.swg = swg;
  }
  // The programmer receives a new message.
  update() {
    console.log(
      `The ${this.name}You have a new group announcement, please pay attention to receive! \nThe ${this.swg.getNotice()}`); }}Copy the code

WeCharGroup class 2.0

class WeCharGroup {
  members: Observer[] = []; // The list of programmers in the group. addMember(member: Observer):void {
    this.members.push(member); }... }Copy the code

TestEngineer class

class TestEngineer extends Observer {
  constructor(name: string, swg: WeCharGroup) {
    super(a);this.name = name;
    this.swg = swg;
  }

  // The test engineer receives a new message.
  update() {
    console.log(
      `The ${this.name}You have a new group announcement, please pay attention to receive! \nThe ${this.swg.getNotice()}`); }}Copy the code

Experience the

  1. Let’s test the Li invite in step 2 of version 1.0

After we abstracted out the observers, whether it was our testers or colleagues in other positions, we were able to satisfy their concern group announcements with minimal changes.

// The first step is to set up a work group
const workGroup = new WeCharGroup();

// Add the programmer to the group through addMember, and the programmer will get the latest announcements through the group
workGroup.addMember(new Programmer('Front end piece', workGroup));
workGroup.addMember(new Programmer('Back End Xiao Wang', workGroup));
// ++ invite Test Xiao Li into the group
workGroup.addMember(new TestEngineer('Test Xiao Li', workGroup));

// Set group bulletin
workGroup.setNotice(Remember to finish your weekly paper before you leave work. ');

// Make an announcement
workGroup.notifyAll();
Copy the code

Version 3.0 (second decoupling)

In 2.0 we support a different staff can focus on working group of the inside of the announcement, but in the actual work we focus on the company’s WeChat group is likely to focus on the company’s enterprise WeChat group of right, or there is DingDing group, a lot of dazzling, how many groups of HXD is more than friends 🤔 ️? Take a look at the UML class diagram, we are now forcibly coupled with the wechat group, let’s transform it again, so as not to be at a loss when using. We abstracted the group’s functionality and named it Subject. Subject

interface Subject {
  addMember(member: Observer): void;
  setNotice(notice: string) :void;
  getNotice(): string;
  notifyAll(): void;
}
Copy the code

DingDingGroup

class DingDingGroup {
  members: Observer[] = []; // The list of employees in the group
  notice: string; / / notice

  addMember(member: Observer): void {
    this.members.push(member);
  }

  setNotice(notice): void {
    this.notice = notice;
  }
  getNotice(): string {
    return this.notice;
  }

  notifyAll(): void {
    this.members.forEach(v= >v.update()); }}Copy the code

WeCharGroup3.0

class WeCharGroup implements Subject {... }Copy the code

Observer2.0

abstract class Observer {...swg: Subject; // Which group announcements to follow?. }Copy the code

Programmer3.0 & TestEngineer3.0

class Programmer extends Observer {
  constructor(name: string, swg: Subject) {
    super(a);this.name = name;
    this.swg = swg; }... }class TestEngineer extends Observer {
  constructor(name: string, swg: Subject) {
    super(a);this.name = name;
    this.swg = swg; }... }Copy the code

Finally, we’re experimenting

  1. Step 1: Create a spike group
  2. Step 2: Invite three students to join the daily group
  3. Step 3: Set group announcements
  4. Step 4: Make an announcement
// The company has created a new daily nail group
const everyday = new DingDingGroup();
everyday.addMember(new Programmer('Front end piece', everyday));
everyday.addMember(new Programmer('Back End Xiao Wang', everyday));
everyday.addMember(new Programmer('Test Xiao Li', everyday));

// Set group bulletin
everyday.setNotice('Have a good weekend!! ');
// Make an announcement
everyday.notifyAll();
Copy the code

conclusion

  1. The observer pattern is also known as the publish-subscribe pattern.
  2. The observer pattern defines one-to-many dependencies that allow multiple observers to pay attention to a topic object at the same time and notify observers to update it if the topic object changes.

Note: recently, I have read the “Design Pattern of big talk” which I bought earlier, and I feel very interesting. 😯