javascript设计模式之创建型模式

工厂模式

• 你去购买汉堡，直接点餐、取餐，不会自己亲手做
• 商店要“封装”做汉堡的工作，做好直接给买者
• 验证
  • 构造函数和创建者分离
  • 复合开放封闭原则
• 场景

  • jQuery $(‘div’)

  • React.createElement

  • jQuery只有一个$

  • 模拟登录框

  • 其他

    • 

  • Vue异步组件

    • 

  • $（div’)和new $（div’）有何区别？

    • 第一：书写麻烦，jQuery的链式操作将成为噩梦
    • 第二：一旦jQuery名字变化，将是灾难性的

class Product{
	constructor(name){
		this.name=name
	}
	init() {
		alert('init')
	}
	fun1() {
		alert('fun1')
	}
	fun2() {
		alert('fun2')
	}
class Creator {
	create(name){
			return new Product(name)
	}
}
//测试
let creator=new Creator()
let p=creator.create('p1')
p.init()
p.fun1()

单例模式

• 系统中被唯一使用
• 一个类只有一个实例
• 验证
  • 符合单一职责原则，只实例化唯一的对象
  • 没有很符合开放封闭原则，但是绝对不违反开放封闭原则
• 单例模式需要用到java的特性（private)
• ES6中没有（typescript除外）
• 只能用java代码来演示UML图的内容
• 示例
  • 登陆框
  • 购物车
  • vuex和redux中的store

java

javascript

class SingleObject {
    login() {
        console.log('login...')
    }
}
SingleObject.getInstance = (function () {
    let instance // 存储唯一被初始化的实例
    return function () {
        if (!instance) {
            instance = new SingleObject();
        }
        return instance
    }
})()

// 测试 ，不过js只能靠文档约束不能new SingleObject()
let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
console.log(obj1 === obj2) true
let obj3 = new SingleObject()   
obj3.login()
console.log(obj1 === obj3) false

class LoginForm {
    constructor() {
        this.state = 'hide'
    }
    show() {
        if (this.state === 'show') {
            alert('已经显示')
            return
        }
        this.state = 'show'
        console.log('登录框已显示')
    }
    hide() {
        if (this.state === 'hide') {
            alert('已经隐藏')
            return
        }
        this.state = 'hide'
        console.log('登录框已隐藏')
    }
}
LoginForm.getInstance = (function () {
    let instance
    return function () {
        if (!instance) {
            instance = new LoginForm();
        }
        return instance
    }
})()

// 一个页面中调用登录框
let login1 = LoginForm.getInstance()
login1.show()
// login1.hide()

// 另一个页面中调用登录框
let login2 = LoginForm.getInstance()
login2.show()

// 两者是否相等
console.log('login1 === login2', login1 === login2)