JavaScript设计原则

面向对象

概念

// 类，即模版
class People {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eat() {}
  speak() {}
}

三要素

• 继承，子类继承父类

// 父类
class People {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eat() {}
  speak() {}
}

// 子类继承父类
class Student extends People {
  constructor(name, age, number) {
    super(name, age)
    this.number = number
  }
  study() {}
}

• 封装，数据的权限和保密

// 父类
class People {
  name
  age
  protected weight // 受保护的属性，只有自己或者子类可以访问
  constructor(name, age) {
    this.name = name
    this.age = age
    this.weight = 120
  }
  eat() {}
  speak() {}
}

// 子类 继承父类
class Student extends People {
  number
  private girlfriend
  constructor(name, age, number) {
    super(name, age)
    this.number = number
    this.girlfriend = 'xiaoli'
  }
  study() {}
  getWeight() {
    console.log(this.weight)
  }
}

• 多态，同一接口不同实现

class People {
  constructor(name) {
    this.name = name
  }
  saySomething() {}
}

class A extends People {
  constructor(name) {
    super(name)
  }
  saySomething() {
    console.log("A")
  }
}

class B extends People {
  constructor(name) {
    super(name)
  }
  saySomething() {
    console.log("B")
  }
}

JS应用

class jQuery {
  constructor(selector) {
    let slice = Array.prototype.slice
    let dom = slice.call(document.querySelectorAll(selector))
    let len = dom ? dom.length : 0
    for(let i = 0; i < len; i++){
      this[i] = dom[i]
    }
    this.length = len
    this.selector = selector || ''
  }
  append(node) {}
  addClass(name) {}
  html(data) {}
}
window.$ = function(selector) {
  // 工厂模式
  return new jQuery(selector)
}

面向对象的意义

• 程序执行：顺序、判断、循环——结构化
• 面向对象——数据结构化
• 对于计算机，结构化的才是最简单的

UML类图

• 泛化，表示继承
• 关联，表示引用

class People {
  constructor(name, house) {
    this.name = name
    this.house = house
  }
  saySomething() {}
}

class A extends People {
  constructor(name, house) {
    super(name, house)
  }
  saySomething() {
    console.log("A")
  }
}

class B extends People {
  constructor(name, house) {
    super(name, house)
  }
  saySomething() {
    console.log("B")
  }
}

class House {
  constructor(city) {
    this.city = city
  }
  showCity() {
    console.log(this.city)
  }
}
let aHouse = new House('上海')
let a = new A('a', aHouse)
let b = new B('b')

设计原则

准则

• 小即是美
• 让每个程序只做好一件事
• 快速建立原型
• 舍弃高效率而取可移植性
• 采用纯文本来存储数据
• 充分利用软件的杠杆效应（软件复用）
• 使用shell脚本来提高杠杆效应和可移植性
• 避免强制性的用户界面
• 让每个程序都成为过滤器

小准则

• 允许用户定制环境
• 尽量使操作系统内核小而轻量化
• 使用小写字母并尽量简短
• 沉默是金
• 各部分之和大于整体
• 寻求90%的解决方案

SOLID五大设计原则

• S-单一职责原则
  • 一个程序只做好一件事
  • 如果功能过于复杂就拆分开，每个部分保持独立
• O-开放封闭原则
  • 对扩展开放，对修改封闭
  • 增加需求时，扩展新代码，而非修改已有代码
• L-里氏置换原则
  • 子类能覆盖父类
  • 父类能出现的地方子类就能出现
  • JS中使用较少（弱类型&继承使用较少）
• I-接口独立原则
  • 保持接口的单一独立，避免出现“胖接口”
  • JS中没有接口（typescript例外），使用较少
  • 类似单一职责原则
• D-依赖导致原则
  • 面向接口编程，依赖于抽象而不依赖于具体
  • 使用方只关注接口而不关心具体类的实现
  • JS中使用较少（没有接口&弱类型）

设计模式

创建型

• 工厂模式（工厂方法模式，抽象工厂模式，建造者模式）
• 单例模式
• 原型模式

结构型

• 适配器模式
• 装饰器模式
• 代理模式
• 外观模式
• 桥接模式
• 组合模式
• 享元模式

行为型

• 策略模式
• 模板方法模式
• 观察者模式
• 迭代器模式
• 职责链模式
• 命令模式
• 备忘录模式
• 状态模式
• 访问者模式
• 中介模式
• 解释器模式

面试题

• 打车时，可以打专车或者快车。任何车都有车牌号和名称
• 不同车价格不同，快车每公里1元，专车每公里2元
• 行程开始时，显示车辆信息
• 行程结束时，显示打车金额（假定行程就5公里）

// 车 父类
class Car {
  constructor(number, name) {
    this.number = number
    this.name = name
  }
}
//快车
class Kuaiche extends Car {
  constructor(number, name){
    super(number, name)
    this.price = 1
  }
}
// 专车
class Zhuanche extends Car {
  constructor(number, name) {
    super(number, name)
    this.price = 2
  }
}
// 行程
class Trip {
  constructor(car) {
    this.car = car
  }
  star() {
    console.log(this.car.name,this.car.number)
  }
  end() {
    console.log(this.car.price * 5)
  }
}
// 测试
let car = new Kuaiche(100, '桑塔纳')
let trip = new Trip(car)
trip.start()
trip.end()

• 某停车场，分三层，每层100车位
• 每个车位都能监控到车辆的驶入和离开
• 车辆进入前，显示每层的空余车位数量
• 车辆进入时，摄像头可识别车牌号和时间
• 车辆出来时，出口显示器显示车辆车牌号和停车时长

// 车辆
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, 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()
    })
  }
}
// 层
class Floor {
  constructor(index, places) {
    this.index = index
    this.places = places || []
  }
  emptyPlaceNum() {
    let num = 0
    this.places.forEach(p => {
      if(p.empty){
        num = 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)

park.emptyNum()
park.in(car1)
park.out(car1)