Explicación del sistema de patrones de diseño de Javascript y notas de estudio de aplicación 1

Tres elementos de la orientación a objetos:

1. Herencia, la clase secundaria hereda la clase principal
2. Encapsulación, autoridad de datos y confidencialidad
   • público completamente abierto
   • protegido está abierto a subclases
   • privado abierto a ti mismo

Nota: es6 no es compatible, puede usar ts u otros lenguajes orientados a objetos.Características
: reducir el acoplamiento; facilitar la gestión de autoridad de interfaz y datos; es6 no es compatible actualmente, _los atributos al principio son generalmenteprivate

3. Polimorfismo, la misma interfaz, diferentes implementaciones
   • Muy pocas aplicaciones js
   • Necesidad de combinar la interfaz, reescribir, sobrecargar y otras funciones de lenguajes como java.Características
     : mantener la apertura y flexibilidad de las subclases, programación orientada a la interfaz;

¿Por qué usarlo?
Estructuración, programación de datos: simple y abstracto

Diagrama de clases UML

relación:

1. Generalización, que indica herencia (flecha hueca)
2. Asociación, indicando una referencia (flecha sólida)

Criterios de diseño

1. ¿Qué es el diseño?

Libro recomendado: "Filosofía de diseño UNIX / LINUX"

descripción:

1. Según qué idea o estándar implementar la función
2. La función es la misma, puede tener diferentes esquemas de diseño para realizar
3. Con el aumento de la demanda, el papel del diseño se puede reflejar

Criterio de diseño:

1. Lo pequeño es hermoso
2. Deje que cada programa haga solo una cosa
3. Creación rápida de prototipos
4. Abandone la alta eficiencia por la portabilidad
5. Utilice texto sin formato para almacenar datos
6. Aproveche al máximo el efecto de apalancamiento del software (reutilización del software)
7. Utilice scripts de shell para mejorar el apalancamiento y la portabilidad.
8. Evite las interfaces de usuario obligatorias
9. Deje que cada programa se llame filtro

Pequeñas pautas:

1. Permitir a los usuarios personalizar el entorno
2. Intente hacer que el kernel del sistema operativo sea pequeño y liviano
3. Utilice letras minúsculas y sea lo más breve posible;
4. El silencio es dorado; (por ejemplo: un método que requiere que se pase un número, y se emite un número después del procesamiento; si lo que se pasa o la salida no es un número, no se emite nada o se emite 0)
5. La suma de las partes es mayor que el todo
6. Busque una solución al 90% (la ley de dos octavos: gaste el 20% del costo para resolver el 80% de la demanda. El 20% restante de la demanda puede costar mucho costo, no hay necesidad de ser perfecto)

Criterios de diseño

Cinco principios de diseño SOLID

1. Principio de responsabilidad única S
2. O- Principio abierto y cerrado (abierto para expansión, cerrado para modificación)
3. Principio de permutación de L-Lie
4. Principio de independencia de I-Interface
5. D-Dependencia conduce al principio (dependencia de la abstracción, interfaz, en lugar de implementación concreta)

Principio de responsabilidad única S

• Un programa solo puede hacer bien una cosa
• Si la función es demasiado complicada, sepárela y mantenga cada parte independiente

Principio de O-abierto y cerrado

• Abierto a extensión, cerrado a modificación
• Al aumentar la demanda, amplíe el nuevo código en lugar de modificar el código existente

Principio de permutación de L-Lie

• La subclase puede anular la clase principal
• Donde puede aparecer la clase principal, puede aparecer la clase secundaria
• Se usa menos en JS (el tipo débil y la herencia se usan menos)

Principio de independencia de I-Interface

• Mantenga la interfaz única e independiente, evite la "interfaz grasa" (no 100% no puede aparecer)
• No hay interfaz en JS (excepto para mecanografiado), y se usa menos
• Similar al principio de responsabilidad única, aquí se centra más en la interfaz

D-Dependencia conduce al principio

• Programación orientada a interfaces, que se basa en la abstracción en lugar del concreto
• El usuario solo presta atención a la interfaz y no presta atención a la implementación de la clase específica
• Menos utilizado en JS (sin interfaz y tipo débil)

Nota: Debido a los escenarios comerciales de front-end y las restricciones gramaticales de JS, SO se refleja más y LID es menos.

Patrones de diseño

23 patrones de diseño

1. Tipo de creación
   • Patrón de fábrica (patrón de método de fábrica, patrón de fábrica abstracto, patrón de constructor)
   • Modo singleton
   • Modo de prototipo
2. Tipo de estructura
   • Modo adaptador
   • Modo decorador
   • Modelo de agencia
   • Modo de apariencia
   • Modo Puente
   • Modo de combinación
   • Modelo de peso mosca
3. Conductual
   • Modo de estrategia
   • Modo de método de plantilla
   • Modo de observador
   • Modo iterador
   • Modelo de cadena de responsabilidad
   • Modo de comando
   • Modo de nota
   • Modo de estado
   • Modo visitante
   • Modelo intermediario
   • Modo intérprete

¿Cómo aprender patrones de diseño?

• Comprender el fundamento y la intención de cada diseño.
• Experimente sus escenarios de uso reales a través de aplicaciones clásicas
• Piense más al codificarse, trate de imitar tanto como sea posible.
  Palabras clave: entrenamiento deliberado

Ejemplos de preguntas de la entrevista

primera pregunta:

• Al tomar un taxi, puede tomar un taxi especial o un taxi expreso. Cada automóvil tiene un número de placa y un nombre.
• Los diferentes coches tienen diferentes precios: los trenes expresos cuestan 1 yuanes por kilómetro y los coches especiales cuestan 2 yuanes por kilómetro.
• Cuando comienza el viaje, se muestra la información del vehículo.
• Al final del viaje, muestre el monto del taxi (asumiendo que el viaje es de 5 kilómetros)

Dibuje el diagrama de clases de UML y escriba el ejemplo en la sintaxis de ES6

class Car {
    
    
  constructor (numPlate, name) {
    
    
    this.numPlate = numPlate   // 车牌
    this.name = name           // 车名
  }
}

class privateCar extends Car {
    
    
  constructor (numPlate, name) {
    
    
    super(numPlate, name)
    this.price = 2
  }
}


class expressTrain extends Car {
    
    
  constructor (numPlate, name) {
    
    
    super(numPlate, name)
    this.price = 1
  }
}

class Trip {
    
    
  constructor (car) {
    
    
    this.car = car
  }
  start () {
    
    
    console.log(`行程开始, 名称：${
      
      this.car.name}, 车牌号：${
      
      this.car.price}`)
  }
  end () {
    
    
    console.log(`行程结束，价格${
      
      this.car.price * 5}`)
  }
}

const car = new privateCar('k1234', '小蓝车')
const trip = new Trip(car)
trip.start()
trip.end()

La segunda pregunta:

• Un estacionamiento, dividido en 3 pisos, con 100 estacionamientos en cada piso
• Cada espacio de estacionamiento puede monitorear la entrada y salida de vehículos.
• Antes de que ingrese el vehículo, muestre el número de espacios de estacionamiento libres en cada piso
• Cuando el vehículo ingresa, la cámara puede reconocer el número de placa y la hora
• Cuando sale el vehículo, la pantalla de salida muestra el número de matrícula y el tiempo de estacionamiento.

Dibujar diagrama de clases UML

//车辆
class Car {
    
    
  constructor(num) {
    
    
    this.num = num
  }
}

// 摄像头
class Camera {
    
    
  shot(car) {
    
    
    return {
    
    
      num: car.num,
      inTime: Date.now()
    }
  }
}

// 出口显示屏
class Screen {
    
    
  show(car, inTime) {
    
    
    console.log(`车牌号：${
      
      car.num}`)
    console.log(`停车时间 ${
      
      Date.now() - inTime}`)
  }
}

// 停车场
class Park {
    
    
  constructor(floors) {
    
    
    this.floors = floors || []
    this.camera = new Camera()
    this.screen = new Screen()
    this.carList = {
    
    } // 存储摄像头拍摄返回的车辆信息
  }
  in(car) {
    
    
    // 通过摄像头获取信息
    const info = this.camera.shot(car)
    // 停到某个停车位
    const i = parseInt(Math.random() * 100 % 100)
    const place = this.floors[0].places[i]
    place.in()
    info.place = place
    // 记录信息
    this.carList[car.num] = info
  }
  out(car) {
    
    
    // 获取信息
    const info = this.carList[car.num]
    // 将停车位清空
    const place = info.place
    place.out()
    // 显示时间
    this.screen.show(car, info.inTime)
    // 清空记录
    delete this.carList[car.num]
  }
  emptyNum() {
    
    
    return this.floors.map(floor => {
    
    
      return `${
      
      floor.index}层还有${
      
      floor.emptyPlaceNum()}个空余车位`
    }).join('\n')
  }
}

// 层
class Floor {
    
    
  constructor(index, places) {
    
    
    this.index = index
    this.places = places || []
  }
  emptyPlaceNum() {
    
    
    let num = 0
    this.places.forEach(p => {
    
    
      if (p.empty) {
    
    
        num += 1
      }
    })
    return num
  }
}


// 车位
class Place {
    
    
  constructor() {
    
    
    this.empty = true
  }
  in() {
    
    
    this.empty = false
  }
  out() {
    
    
    this.empty = true
  }
}


// 测试
// 初始化停车场
const floors = []
for(let i = 0; i < 3; i++) {
    
    
  const places = []
  for (let j = 0; j < 100; j++) {
    
    
    places[j] = new Place()
  }
  floors[i] = new Floor(i + 1, places)
}

const park = new Park(floors)


// 初始化车辆
const car1 = new Car(100)
const car2 = new Car(200)
const car3 = new Car(300)

console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)

console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)

console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)



console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)

console.log('第三辆车离开')
park.out(car3)