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 car
const 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 car
const 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' albums
const 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 other
const 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 array
groupswithsoldalbums.push(illit);
console.log("after:");
console.log(groupswithsoldalbums);

//file name: decorator-pattern.js
//step 1: create an interface
class 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 musicartist
class 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 request
class 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 processed
minji.handle("lights");

//situation: Build a calculator app that executes an operation between 2 numbers.
//depending on the user input, change between division and modulus operations

class CalculationStrategy {
  performExecution(a, b) {}
}
//create an algorithm for division
class DivisionStrategy extends CalculationStrategy {
  performExecution(a, b) {
    return a / b;
  }
}
//create another algorithm for performing modulus
class 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);