JavaScript 设计模式指南

//file name: factory-pattern.js//use the factory javascript design pattern://step 1: create an interface for our object. in this case, we want to create a carconst createcar = ({ company, model, size }) => ({//the properties of the car:  company,  model,  size,  //a function that prints out the car's properties:  showdescription() {    console.log(      "the all new ",      model,      " is built by ",      company,      " and has an engine capacity of ",      size,      " cc "    );  },});//use the 'createcar' interface to create a carconst challenger = createcar({  company: "dodge",  model: "challenger",  size: 6162,});//print out this object's traits:challenger.showdescription();

//builder-pattern.js//step 1: create a class reperesentation for our toy car:class car {  constructor({ model, company, size }) {    this.model = model;    this.company = company;    this.size = size;  }}//use the 'builder' pattern to extend this class and add functions//note that we have seperated these functions in their entities.//this means that we have not defined these functions in the 'car' definition.car.prototype.showdescription = function () {  console.log(    this.model +      " is made by " +      this.company +      " and has an engine capacity of " +      this.size +      " cc "  );};car.prototype.reducesize = function () {  const size = this.size - 2; //function to reduce the engine size of the car.  this.size = size;};const challenger = new car({  company: "dodge",  model: "challenger",  size: 6162,});//finally, print out the properties of the car before and after reducing the size:challenger.showdescription();console.log('reducing size...');//reduce size of car twice:challenger.reducesize();challenger.reducesize();challenger.showdescription();

//adapter-pattern.js//create an array with two fields: //'name' of a band and the number of 'sold' albumsconst groupswithsoldalbums = [  {    name: "twice",    sold: 23,  },  { name: "blackpink", sold: 23 },  { name: "aespa", sold: 40 },  { name: "newjeans", sold: 45 },];console.log("before:");console.log(groupswithsoldalbums);//now we want to add this object to the 'groupswithsoldalbums' //problem: our array can't accept the 'revenue' field// we want to change this field to 'sold'var illit = { name: "illit", revenue: 300 };//solution: create an 'adapter' to make both of these interfaces..//..work with each otherconst cost_per_album = 30;const converttoalbumssold = (group) => {  //make a copy of the object and change its properties  const tempgroup = { name: group.name, sold: 0 };  tempgroup.sold = parseint(group.revenue / cost_per_album);  //return this copy:  return tempgroup;};//use our adapter to make a compatible copy of the 'illit' object:illit = converttoalbumssold(illit);//now that our interfaces are compatible, we can add this object to the arraygroupswithsoldalbums.push(illit);console.log("after:");console.log(groupswithsoldalbums);

//file name: decorator-pattern.js//step 1: create an interfaceclass musicartist {  constructor({ name, members }) {    this.name = name;    this.members = members;  }  displaymembers() {    console.log(      "group name",      this.name,      " has",      this.members.length,      " members:"    );    this.members.map((item) => console.log(item));  }}//step 2: create another interface that extends the functionality of musicartistclass performingartist extends musicartist {  constructor({ name, members, eventname, songname }) {    super({ name, members });    this.eventname = eventname;    this.songname = songname;  }  perform() {    console.log(      this.name +        " is now performing at " +        this.eventname +        " they will play their hit song " +        this.songname    );  }}//create an instance of performingartist and print out its properties:const akmu = new performingartist({  name: "akmu",  members: ["suhyun", "chanhyuk"],  eventname: "mnet",  songname: "hero",});akmu.displaymembers();akmu.perform();

//real-world situation: event management of a concert//implement cor javascript design pattern://step 1: create a class that will process a requestclass leader {  constructor(responsibility, name) {    this.responsibility = responsibility;    this.name = name;  }  //the 'setnext' function will pass the request to the next component in the chain.  setnext(handler) {    this.nexthandler = handler;    return handler;  }  handle(responsibility) {  //switch to the next handler and throw an error message:    if (this.nexthandler) {      console.log(this.name + " cannot handle operation: " + responsibility);      return this.nexthandler.handle(responsibility);    }    return false;  }}//create two components to handle certain requests of a concert//first component: handle the lighting of the concert:class lightsengineerlead extends leader {  constructor(name) {    super("light management", name);  }  handle(responsibility) {  //if 'lightsengineerlead' gets the responsibility(request) to handle lights,  //then they will handle it    if (responsibility == "lights") {      console.log("the lights are now being handled by ", this.name);      return;    }    //otherwise, pass it to the next component.    return super.handle(responsibility);  }}//second component: handle the sound management of the event:class soundengineerlead extends leader {  constructor(name) {    super("sound management", name);  }  handle(responsibility) {  //if 'soundengineerlead' gets the responsibility to handle sounds,  // they will handle it    if (responsibility == "sound") {      console.log("the sound stage is now being handled by ", this.name);      return;    }    //otherwise, forward this request down the chain:    return super.handle(responsibility);  }}//create two instances to handle the lighting and sounds of an event:const minji = new lightsengineerlead("minji");const danielle = new soundengineerlead("danielle");//set 'danielle' to be the next handler component in the chain.minji.setnext(danielle);//ask minji to handle the sound and lights://since minji can't handle sound management, // we expect this request to be forwarded minji.handle("sound");//minji can handle lights, so we expect it to be processedminji.handle("lights");

//situation: Build a calculator app that executes an operation between 2 numbers.//depending on the user input, change between division and modulus operationsclass CalculationStrategy {  performExecution(a, b) {}}//create an algorithm for divisionclass DivisionStrategy extends CalculationStrategy {  performExecution(a, b) {    return a / b;  }}//create another algorithm for performing modulusclass ModuloStrategy extends CalculationStrategy {  performExecution(a, b) {    return a % b;  }}//this class will help the program switch between our algorithms:class StrategyManager {  setStrategy(strategy) {    this.strategy = strategy;  }  executeStrategy(a, b) {    return this.strategy.performExecution(a, b);  }}const moduloOperation = new ModuloStrategy();const divisionOp = new DivisionStrategy();const strategyManager = new StrategyManager();//use the division algorithm to divide two numbers:strategyManager.setStrategy(divisionOp);var result = strategyManager.executeStrategy(20, 4);console.log("Result is: ", result);//switch to the modulus strategy to perform modulus:strategyManager.setStrategy(moduloOperation);result = strategyManager.executeStrategy(20, 4);console.log("Result of modulo is ", result);