js 흔 한 디자인 모델 1

1. 관찰자 모드
한 쌍 이상 의 관 계 를 정의 하고 일련의 관찰자 들 이 목표 함수 에 관심 이 있 으 며 자신 을 목표 함수 에 추가 합 니 다. 목표 함수 상태 가 바 뀌 었 을 때 알림 을 보 내 목표 에 추 가 된 관찰자 에 게 알 립 니 다.

/*    */
class subject {
    constructor () {
        this.handlers = []
    }
    addhanler (fn) {
        this.handlers.push(fn)
    }
    notity () {
        this.handlers.forEach(hanlder=>{
            hanlder.update()
        })
    }
}
/*     */
class observer {
    constructor (name) {
        this.name = name
    }
    update () {
        console.log(this.name)
    }
}
let sub = new subject();

sub.addhanler(new observer('czklove'))
sub.addhanler(new observer('czklove1'))
sub.addhanler(new observer('czklove2'))

sub.notity()

2. 게시 구독 자 모드
구독 자 A 와 게시 자 B 는 중간 부품 을 통 해 연 결 된 것 으로 그들 은 직접적인 교류 가 없다.

/* 
    pusher             
                   ，     ，          
            ，             
 */
let pusher = {
    clentlist: {},
    addhandler (key,fn) {
        if(!this.clentlist[key]) {
            this.clentlist[key] = []
        }
        this.clentlist[key].push(fn)
    },
    notify (key,...args) {
        if(this.clentlist[key]) {
            this.clentlist[key].forEach(hanlder=>{
                hanlder(...args)
            })
        }
    }
}
pusher.addhandler('click',(val)=>{
    console.log('1'+val)
})
pusher.addhandler('click',(val)=>{
    console.log('2'+val)
})
pusher.addhandler('click',(val)=>{
    console.log('3'+val)
})
pusher.notify('click','czklove')

3. 미들웨어 모드
중간 부품 모드 는 js 에서 도 광범 위 하 게 인용 된다. 예 를 들 어 node 의 express 프레임 워 크, axios 소스 코드 의 요청 차단기 와 접근 차단 기 등 이다. 우 리 는 간단 한 중간 부품 을 실현 한다.

/*       */

class app {
    constructor () {
        this.hanlders = []
    }
    /*   use                */
    use (fn) {
        this.hanlders.push(fn)
    }
    /*        */
    run () {
        /* done        
                     ，   flase,
                hanlders     next，
                next            
                next       
         */
        let done = true
        function next () {
            console.log('   next')
            done = true
        }
        /*        */
        this.hanlders.forEach(hanlder => {
            if (!done) {
                return
            } else {
                done = false
                hanlder(next)
            }
        });
        if(done) {
            this.callback();
        }
    }
    /*           */
    callback () {
        console.log('           ')
    }
}
let p = new app();

p.use(next=> {
    console.log('   1')
    next()
})
p.use(next=> {
    console.log('   2')
    next()
})
p.use(next=> {
    console.log('   3')
    next()
})
p.run()
（ ，p       ，next      ，      next）

미들웨어 1 은 next 미들웨어 2 를 실 행 했 고 next 미들웨어 3 는 next 를 실 행 했 습 니 다.

          2 next        

   1
   next
   2

4. 일렬 모드
대상 은 전역 에 하나의 실제 대상 만 있다.
　　　　

/*      */
/*  */
function createperson () {
    class person {
        constructor (name,age) {
            this.name = name;
            this.age = age;
        }
    }
    var person1 = null; 
    return function (name,age) {
        if (person) {  
        } else {
            person1 = new person(name,age)
        }
        return person1
    }

}
let creatp = createperson();

/*   person     p1 */
let p1 = creatp('czklove','28')
/*   person     p2 */
let p2 = creatp('czklove','29')
console.log(p1===p2)
/*     true */
/* person            */

5 공장 모드
근본적으로 동일 하지 않 은 요구 로 서로 다른 실례 대상 을 생산 해 내다

/*      */
/*    ，          ，       ，          */
function createobj (type) {
    function cj1 () {
        this.name = 'czklove',
        this.age = '17'
    }
    function cj2 () {
        this.name = 'czklove',
        this.age = '18'
    }
    function cj3 () {
        this.name = 'czklove',
        this.age = '19'
    }

    switch (type) {
        case 'cj1' :
            return new cj1();
        case 'cj2' :
            return new cj2();
        case 'cj3' :
            return new cj3();
        default:
            return new cj1();
    }
} 
console.log(createobj('cj1'))
console.log(createobj('cj2'))
console.log(createobj('cj3'))

//cj1

 //{name: "czklove", age: "17"}

   //{name: "czklove", age: "18"}
 
   //{name: "czklove", age: "19"}
모두 비교적 간단 한 모델 로 js 의 폐쇄 를 많이 사용 했다.폐쇄 를 잘 이해 하 는 게 정말 중요 해 요.