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);