工厂模式
class Product {
constructor(name){
this.name = name;
}
init(){
alert('init');
}
fun1(){
alert('fun1');
}
}
class Creator {
create(name){
return new Product(name);
}
}
let creator = new Creator();
let p = creator.create('p1');
alert(p.name)
p.init()
p.fun1()
单例模式
class SingleObject {
login(){
console.log('login...');
}
}
SingleObject.getInstance = (function(){
let instance = null;
return function(){
if(!instance){
instance = new SingleObject()
}
return instance
}
})()
let obj1 = SingleObject.getInstance();
obj1.login()
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 = null
return function () {
if (!instance) {
instance = new LoginForm()
}
return instance
}
})()
let login1 = LoginForm.getInstance()
login1.show()
let login2 = LoginForm.getInstance()
login2.show()
适配器模式
class Adaptee{
specificRequest(){
return '老标准'
}
}
class Dis{
constructor(){
this.adaptee = new Adaptee()
}
request(){
let info = this.adaptee.specificRequest();
return `${info} - 转换 - 新标准`
}
}
let dis = new Dis()
console.log(dis.request())
代理模式1
class RealImg{
constructor(fileName){
this.fileName = fileName
this.loadImg()
}
display(){
console.log('display... ' + this.fileName);
}
loadImg(){
console.log('loading... ' + this.fileName);
}
}
class ProxyImg{
constructor(fileName){
this.realImg = new RealImg(fileName)
}
display(){
this.realImg.display()
}
}
let proxyImg = new ProxyImg('m.jpg')
proxyImg.display()
代理模式2
let star = {
name: '张XX',
age: 25,
phone: '13888889999'
}
let agent = new Proxy(star, {
get: function (target, key) {
switch (key) {
case 'phone':
return '18676629565'
case 'price':
return 120000
}
return target[key]
},
set: function (target, key, val) {
if(key === 'customPrice'){
if(val<100000){
throw new Error('钱少')
} else {
target[key] = val
return true
}
}
}
})
console.log(agent.phone)
观察者模式
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)
s.setState(1)
迭代器模式
class Iterator {
constructor(container) {
this.list = container.list
this.index = 0
}
next() {
if (this.hasNext()) {
return this.list[this.index++]
}
return null
}
hasNext() {
return this.index <= this.list.length
}
}
class Container {
constructor(list) {
this.list = list
}
getIterator() {
return new Iterator(this)
}
}
let container = new Container([1, 2, 3, 4, 5, 6])
let iterator = container.getIterator()
while (iterator.hasNext()) {
console.log(iterator.next());
}
状态模式
class State {
constructor(color) {
this.color = color
}
handle(context) {
console.log(`turn to ${this.color} light`)
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 yello = new State('yello')
let red = new State('red')
green.handle(context)
console.log(context.getState());
yello.handle(context)
console.log(context.getState());
red.handle(context)
console.log(context.getState());
桥接模式
class Color {
constructor(name) {
this.name = name
}
}
class Shape {
constructor(name, color) {
this.name = name
this.color = color
}
draw() {
console.log(`${this.color.name} ${this.name}`);
}
}
let red = new Color('red')
let yellow = new Color('yellow')
let circle = new Shape('circle', red)
circle.draw()
let triangle = new Shape('triangle', yellow)
triangle.draw()
职责连模式
class Action {
constructor (name) {
this.name = name
this.nextAction = null
}
setNextAction(action) {
this.nextAction = action
}
handle() {
console.log(`${this.name} 审批`)
if(this.nextAction !== null){
this.nextAction.handle()
}
}
}
let a1 = new Action('组长')
let a2 = new Action('经理')
let a3 = new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()
命令模式
class Receiver { // 执行命令者
exec(){
console.log('执行');
}
}
class Command { // 传递命令者
constructor(receiver) {
this.receiver = receiver
}
cmd(){
console.log('执行命令');
this.receiver.exec()
}
}
class Invokey { // 发布命令者
constructor(command) {
this.command = command
}
invokey(){
console.log('开始')
this.command.cmd()
}
}
let soldier = new Receiver()
let trumpeter = new Command(soldier)
let general = new Invokey(trumpeter)
general.invokey()
备忘录模式
class Memento { // 备忘类
constructor(content) {
this.content = content
}
getContent() {
return this.content
}
}
class CareTaker { // 备忘列表
constructor() {
this.list = []
}
add(memento) {
this.list.push(memento)
}
get(index){
return this.list[index]
}
}
class Editor {
constructor() {
this.content = null
}
setContent(content) {
this.content = content
}
getContent() {
return this.content
}
saveContentToMemento() {
return new Memento(this.content)
}
getContentFromMemento() {
this.content = memento.getContent()
}
}
let editor = new Editor()
let careTaker = new CareTaker()
editor.setContent('11111')
editor.setContent('22222')
careTaker.add(editor.saveContentToMemento())
editor.setContent('33333')
careTaker.add(editor.saveContentToMemento())
editor.setContent('33333')
中介者模式
class A {
constructor() {
this.number = 0
}
setNumber(num, m) {
this.number = num
if (m) {
m.setB()
}
}
}
class B {
constructor() {
this.number = 0
}
setNumber(num, m) {
this.number = num
if (m) {
m.setA()
}
}
}
class Meditor {
constructor(a, b){
this.a = a
this.b = b
}
setA(){
let number = this.b.number
this.a.setNumber( number * 100)
}
setB(){
let number = this.a.number
this.b.setNumber( number / 100 )
}
}
let a = new A()
let b = new B()
let meditor = new Meditor(a, b)
a.setNumber(100, meditor)
console.log(a.number, b.number);
b.setNumber(100, meditor)
console.log(a.number, b.number);
