23中设计模式 (倒序排版)
/**
solid 原则
s 单一职责
o 开放封闭
l 李氏置换
i 接口独立
d 依赖导致
*/
// 中介者模式
// 备忘录模式
// 命令模式
// 职责链模式
// 模板方法模式
// 策略模式 （减少 if … else …）
// class OrdinaryUser {
// buy () {
// console.log(‘普通用户购买’)
// }
// }
// class MemberUser {
// buy () {
// console.log(‘会员用户购买’)
// }
// }
// class VIPUser {
// buy () {
// console.log(‘VIP用户购买’)
// }
// }
// let u1 = new OrdinaryUser()
// let u2 = new MemberUser()
// let u3 = new VIPUser()
// u1.buy()
// u2.buy()
// u3.buy()
//享元模式 （共享数据 更小的内存）
// 组合模式 （整体 - 部分 的树形关系 Vnode）
// 桥接模式 （分开完成 + 然后合成 ）
// 原型模式 => prototype 复制自己 object.create()
// 状态模式 ( 减少 if … else … 有限状态机 javascript-state-machine)
// import StateMachine from ‘javascript-state-machine’
// let fsm = new StateMachine({
// init: ‘收藏’,
// transitions: [
// {
// name: ‘doStore’,
// from: ‘收藏’,
// to: ‘取消收藏’
// },
// {
// name: ‘deleteStore’,
// from: ‘取消收藏’,
// to: ‘收藏’
// }
// ],
// methods: {
// onDoStore: function () {
// console.log(‘收藏成功’)
// updateText()
// },
// onDeleteStore: function () {
// console.log(‘取消成功’)
// updateText()
// }
// }
// })
// let btn1 = document.getElementById(‘btn1’)
// btn1.addEventListener(‘click’, function () {
// if (fsm.is(‘收藏’)) {
// fsm.doStore()
// } else {
// fsm.deleteStore()
// }
// })
// function updateText () {
// // btn1.html(fsm.state)
// }
// class State {
// constructor (color) {
// this.color = color
// }
// handle (context) {
// console.log(turn to ${this.color})
// console.log(this)
// context.setState(this)
// }
// }
// class Context {
// constructor () {
// this.state = null
// }
// getState () {
// return this.state
// }
// setState (state) {
// this.state = state
// }
// }
// // 测试
// let context = new Context()
// let green = new State(‘green’)
// let yellow = new State(‘yellow’)
// let red = new State(‘red’)
// // 绿灯亮了
// green.handle(context)
// console.log(context.getState())
// // 黄灯亮了
// yellow.handle(context)
// console.log(context.getState())
// // 红灯亮了
// red.handle(context)
// console.log(context.getState())
// 迭代器 模式 （顺序访问一个集合） （有序数据集合：Array Map Set String TypedArray arguments NodeList）
// ( 用 for of 遍历对象等 就是 在用Iterator迭代器)
// class Iterator {
// constructor (container) {
// this.list = container.list
// this.index = 0
// }
// next () {
// if (this.hasNext()) {
// return this.list[this.index++]
// }
// return null
// }
// hasNext () {
// if (this.index >= this.list.length) {
// return false
// }
// return true
// }
// }
// class Container {
// constructor (list) {
// this.list = list
// }
// getIterator () {
// return new Iterator(this)
// }
// }
// let container = new Container([1, 2, 3, 4, 5])
// let iterator = container.getIterator()
// while (iterator.hasNext()) {
// console.log(iterator.next())
// }
// 观察者模式 （发布/订阅 一对N）
// class Subject {
// constructor () {
// this.state = 0
// this.observers = []
// }
// getState () {
// return this.state
// }
// setState (state) {
// this.state = state
// this.notifyAllObservers()
// }
// notifyAllObservers () {
// this.observers.forEach(observer => {
// observer.update()
// })
// }
// attach (observer) {
// this.observers.push(observer)
// }
// }
// class observer {
// constructor (name, subject) {
// this.name = name
// this.subject = subject
// this.subject.attach(this)
// }
// update () {
// console.log(${this.name} update, state: ${this.subject.getState()})
// }
// }
// // 测试代码
// let s = new Subject()
// let o1 = new observer(‘o1’, s)
// let o2 = new observer(‘o2’, s)
// let o3 = new observer(‘o3’, s)
// s.setState(1)
// s.setState(2)
// 外观模式
// 对外对内 只有一个接口 Facade
// 定义
// function bindEvent(elem, type, selector, fn) {
// if (fn == null) {
// fn = selector
// selector = null
// }
// }
// // 调用
// bindEvent(elem, ‘click’, ‘#div1’, fn)
// bindEvent(elem, ‘click’, fn)
// 代理模式
// 明星
// let star = {
// name: ‘张XX’,
// age: 25,
// phone: ‘13910733521’
// }
// // 经纪人
// let agent = new Proxy(star, {
// get: function (target, key) {
// if (key === ‘phone’) {
// // 返回经纪人自己的手机号
// return ‘18611112222’
// }
// if (key === ‘price’) {
// // 明星不报价，经纪人报价
// return 120000
// }
// return target[key]
// },
// set: function (target, key, val) {
// if (key === ‘customPrice’) {
// if (val < 100000) {
// // 最低 10w
// throw new Error(‘价格太低’)
// } else {
// target[key] = val
// return true
// }
// }
// }
// })
// // 主办方
// console.log(agent.name)
// console.log(agent.age)
// console.log(agent.phone)
// console.log(agent.price)
// // 想自己提供报价（砍价，或者高价争抢）
// agent.customPrice = 150000
// // agent.customPrice = 90000 // 报错：价格太低
// console.log(‘customPrice’, agent.customPrice)
// 装饰器模式
// import { readonly } from ‘core-decorators’
// class Person {
// @readonly
// name () {
// return ‘huhuuhu’
// }
// }
// let p = new Person()
// console.log(p.name())
// function log(target, name, descriptor) {
// console.log(descriptor)
// let oldValue = descriptor.value
// descriptor.value = function () {
// console.log(calling ${name} with, arguments)
// return oldValue.apply(this, arguments)
// }
// return descriptor
// }
// class Math {
// @log
// add(a, b) {
// return a + b
// }
// }
// let math = new Math()
// console.log(math.add(2, 4))
// function readonly (target, name, descriptor) {
// descriptor.writable = false
// return descriptor
// }
// class Person {
// constructor () {
// this.first = ‘A’
// this.second = ‘B’
// }
// @readonly
// name() {
// return this.first + this.second
// }
// }
// let p = new Person()
// console.log(p.name())
// p.name = function () {
// console.log(111)
// }
// function mixins(…list) {
// return function (target) {
// Object.assign(target.prototype, …list)
// }
// }
// const Foo = {
// foo() {
// console.log(‘foo’)
// }
// }
// @mixins(Foo)
// class MyClass {
// }
// let obj = new MyClass()
// obj.foo()
// function testDec(isDec) {
// return function (target) {
// target.isDec = isDec
// }
// }
// @testDec(false)
// class Demo {}
// console.log(Demo.isDec)
// @testDec
// class Demo {
// }
// function testDec(target) {
// target.isDec = true
// }
// console.log(Demo.isDec)
//适配器模式
// class Adaptee {
// specificRequest () {
// return ‘德国标准接头’
// }
// }
// class Target {
// constructor () {
// this.adaptee = new Adaptee()
// }
// request () {
// let info = this.adaptee.specificRequest()
// return ${info} - 转换器 - 中国标准接头
// }
// }
// let target = new Target()
// console.log(target.request())
// 单例模式
// class SingleObject {
// login () {
// console.log(‘login…’)
// }
// }
// SingleObject.getInstance = (function() {
// let instance
// return function () {
// if (!instance) {
// instance = new SingleObject()
// }
// return instance
// }
// })()
// let obj1 = SingleObject.getInstance()
// obj1.login()
// let obj2 = SingleObject.getInstance()
// obj2.login()
// console.log(obj1 === obj2)
// 工厂函数
// class Product {
// constructor (name) {
// this.name = name
// }
// init () {
// console.log(this.name)
// }
// }
// class Creator {
// create (name) {
// return new Product(name)
// }
// }
// // 测试
// let creator = new Creator()
// let p = creator.create(‘pppp’)
// p.init()
// 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 Place {
// constructor () {
// this.empty = true
// }
// in () {
// this.empty = false
// }
// out () {
// this.empty = true
// }
// }
// class Floor {
// constructor (index, places) {
// this.index = index
// this.places = places || []
// }
// emptyPlaceNum() {
// let num = 0
// this.places.forEach(p => {
// if (p.empty) {
// num ++
// }
// })
// return num
// }
// }
// 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 flour_index = parseInt(Math.random() 3 % 3)
// const place_index = parseInt(Math.random() 100 % 100)
// const place = this.floors[flour_index].places[place_index]
// 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’)
// }
// }
// // 测试代码——————————
// // 初始化停车场
// 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(‘A1’)
// const car2 = new Car(‘A2’)
// const car3 = new Car(‘A3’)
// 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)
// class Car {
// constructor(card, name, long) {
// this.card = card
// this.name = name
// this.long = long
// }
// showCard () {
// return this.card
// }
// showName () {
// return this.name
// }
// }
// class Fast extends Car {
// constructor(card, name, long) {
// super(card, name, long)
// this.money = 1
// }
// showPrice () {
// return this.money * this.long
// }
// }
// class Focus extends Car {
// constructor(card, name, long) {
// super(card, name, long)
// this.money = 2
// }
// showPrice () {
// return this.money * this.long
// }
// }
// let fast1 = new Fast(‘沪A11809’, ‘zhang111’, 5)
// console.log(fast1.showCard() + ‘-‘ + fast1.showName())
// console.log(fast1.showPrice())
// let focus1 = new Focus(‘川A88888’, ‘wang111’, 5)
// console.log(focus1.showCard() + ‘-‘ + focus1.showName())
// console.log(focus1.showPrice())
// class Person {
// constructor(name){
// this.name = name
// }
// getName() {
// return this.name
// }
// }
// let p = new Person(‘hy’)
// console.log(p.getName())
