首页 > 其他分享 >js设计原则

js设计原则

时间:2023-02-15 13:56:56浏览次数:36  
标签:const 原则 new js game constructor 设计 class store

  1. 开闭原则: 开-拓展; 闭-修改
  2. 单一职责原则: 岗位职责单一, 互不重叠
  3. 依赖倒置原则: 上层不应依赖下层实现
  4. 接口隔离原则(接口)
  5. 里氏替换原则: 子类可以拓展, 不能改变

OCP 开闭原则 开-拓展 闭-修改

gameManager(game).setColor()

gameManager(game).openDialog()

function gameManage(game) {
  return `${game}Manager`
}

const LOLManager = {
  setColor() {

  }

  openDialog() {

  }
}

const PUBGManager = {
  setColor() {

  }

  openDialog() {

  }
}

class game {
 
  constructor(name) {
    this.name = name
  }
  
  setColor() {
    console.log('___');
  }

  openDialog() {
    console.log('付款框');
  }
}

class default {}

class common {}

class LOL extends game {
  openDialog() {
    console.log('付款框');
  }
}

class PUBG extends game {
  static coreFunc = {}
  setColor() {
    console.log('___');
  }
}

class Harry extends game {

}

SRP 单一职责原则 岗位职责单一, 互不重叠

// 通过解耦让每一个职责更加独立
// 目标: 一个功能模块只管一件事

// sprint
// game store
class PUBGManager {
  openDialog() {
    setPrice()
  }
}

const game = new PUBGManager()
game.openDialog() // 弹框 < = > 计算金额 两个模块耦合

// 重构
// gameManager.js
class PUBGManager {
  constructor(command) {
    this.command = command
  }
  openDialog(price) {
    // 计算金额
    this.command.setPrice(price)
  }
}

// optManager.js
class PriceManager {
  setPrice(price) {
    // 配置金额__
  }
}


const exe = new PriceManager()
const game = new PUBGManager(exe)
game.openDialog(15)
// game.setPrice(10)

DIP 依赖倒置原则 上层不应依赖下层实现

// 目标: 面向抽象进行coding, 而不是对实现进行coding, 降低需求与实现的耦合

// 需求
// sprint1
// 分享功能
class Store {
  constructor() {
    this.share = new Share()
  }
}

class Share {
  shareTo() {
    // 分享到不同平台
  }
}

const store = new Store()
store.share.shareTo('wx')

// sprint2
// 评分功能
class Store {
  constructor() {
    this.share = new Share()
    this.rate = new Rate()
  }
}

class Share {
  shareTo() {
    // 分享到不同平台
  }
}

class Rate {
  star(stars) {
    // 评分
  }
}

const store = new Store()
store.rate.star('wx')


// 重构
// 目标: 暴露挂载 => 动态挂载
class Rate() {
  init(store) {
    store.rate = this
  }

  star(stars) {
    // 评分
  }
}

class store {
  // 维护模块名单
  static modules = new Map()

  constructor() {
    // 遍历单做初始化挂载
    for (const module of Store.modules.values()) {
      module.init(this)
    }
  }

  // 注入功能模块
  static inject(module) {
    Store.modules.set(module.constructor.name, module)
  }
}

class Share {
  init(store) {
    store.share = this
  }

  shareTo(platform) {
    // 分享到不同平台
  }
}

// class Validate {
//   init(store) {
//     store.validate = this
//   }

//   shareTo(platform) {
//     // 分享到不同平台
//   }
// }


// 一次注册完所有模块
const rate = new Rate()
Store.inject(rate)
// const validate = new Validate()
// Store.inject(validate)

// 初始化商城
const store = new Store()
store.rate.star(4)

LSP 里氏替换原则(the Lxxx substitution principle)

// 子类能够覆盖父类
// 父类能够出现的地方子类就能出现
//
// sprint 1
class Game {
  start() {
    // 开机逻辑
  }
  shutdown() {
    // 关机
  }
  play() {
    // 游戏
  }
}

const game = new Game()
game.play()

// sprint 2
class MobileGame extends Game {
  tombStone() {
    // tombStone
  }
  play() {
    // 移动端游戏
  }
}

const mobile = new MobileGame()
mobile.play()

// 重构
class Game {
  start() {
    // 开机逻辑
    console.log('start');
  }
  shutdown() {
    // 关机
    console.log('shutdown');
  }
}

class MobileGame extends Game {
  tombStone() {
    // tombStone
    console.log('tombStone');
  }
  play() {
    // 移动端游戏
    console.log('playMobileGame');
  }
}

class PC extends Game {
  speed() {
    // tombStone
    console.log('speed');
  }
  play() {
    // 移动端游戏
    console.log('playPCGame');
  }
}

ISP 接口隔离原则(接口)

// 目标: 多个专业的接口比单个胖接口好用
//
// 需求
// 已经可以开发游戏了, 但是实现游戏中台 - 快速生产游戏
// PUBG, LOL run shot mega
class Game {
  constructor(name) {
    this.name = name
  }

  run() {
    // 跑
  }
  shot() {
    // 开枪
  }
  mega() {
    // 开大
  }
}

class PUBG extends Game {
  constructor() {
    // pubg constructor
  }
}

class LOL extends Game {
  constructor() {
    // lol constructor
  }
}

const pubg = new PUBG('pubg')
pubg.run()
pubg.shot()
pubg.mega()

// 重构 - 用多个接口替代它, 每个接口服务于一个子模块
// 瘦身
class Game {
  constructor(name) {
    this.name = name
  }

  run() {
    // 跑
  }
}

class FPS {

}

class MOBA {
  
}

class PUBG extends Game {
  constructor() {
    // pubg constructor
  }
  shot() {
    // 开枪
  }
}

class LOL extends Game {
  constructor() {
    // lol constructor
  }
  mega() {
    // 开大
  }
}

标签:const,原则,new,js,game,constructor,设计,class,store
From: https://www.cnblogs.com/DTCLOUD/p/17122530.html

相关文章