프레임워크의 JavaScript 디자인 패턴 및 사례 소개-JS 튜토리얼-php.cn

프레임워크의 JavaScript 디자인 패턴 및 사례 소개

黄舟

풀어 주다： 2017-02-07 14:09:44

원래의

1025명이 탐색했습니다.

JS 및 어셈블리 코드를 작성하는 과정에서 특정 디자인 패턴을 사용하면 코드를 더욱 우아하고 유연하게 만들 수 있습니다.

다음으로 저자는 구독과 redux, 클래스(ES6의 클래스), vue의 $dispatch, jquery의 on/off를 결합하여 이러한 라이브러리, 문법 및 프레임워크에서 디자인 패턴을 사용하는 방법에 대해 간략하게 소개합니다. .

디자인 패턴으로 해결되는 문제

디자인 패턴은 그다지 신비한 지식이 아닙니다. 많은 학생들이 JS 코드를 작성할 때 무심코 많은 디자인 패턴을 사용합니다.

저자는 디자인 패턴을 추상화하여 별도로 논의하는 것은 일반적으로 사용되는 JS 패턴을 설명하기 위해 거품을 추상화하고 알고리즘에서 정렬하는 것과 같다고 믿습니다.

이러한 유형의 패턴을 연구하여 패턴이 코드 구조와 JS 알고리즘을 안내하도록 하세요.

일반적으로 사용되는 일부 디자인 패턴 개요

관찰자 [관찰자 모드]

상태 변화에 따라 관찰자 큐 및 hashMap의 콜백 동작을 적극적으로 트리거

간단한 관찰자 패턴 코드 연습

class StateTracker{
    constructor(){
         this.observers = [];
         this.internamState= 10;
     }
     // 改变内部状态，触发状态的观察者列表
     change(val){
         this.internamState= val;
         this.observers.forEach(observer=>observer(val));
     }
     registerObserver(ObserverFn){
       this.obserers.push(ObserverFn)
    }
 }

로그인 후 복사

　publish/subscribe [구독 게시 모드]

　 hashMap의 주제/콜백 형식을 코드 모듈의 공유 액세스 공간에 저장합니다.

켜기/끄기/트리거 및 기타 인터페이스를 추가하여 장착, 제거, 트리거링과 같은 작업을 구현합니다.

간단한 구독-출판 모델 코드 연습

class PubSubHandler{
   constructor(){
      this.eventPool = {};
    }
    //移除
    off(topicName){
       delete this.observers[topicName]
    }
     //发布
     trigger(topicName,...args){
        this.eventPool[topicName] && 
        this.eventPool[topicName].forEach(callback=>callback(...args));
     }
     //订阅
     on(topicName,callback){
        let topic = this.eventPool[topicName] ;
        if(!topic){
            this.eventPool[topicName] =[]
        }
      this.eventPool[topicName].push(callback)
   }
}

로그인 후 복사

싱글톤 [단일 케이스 모드]

생성자의 인스턴스는 하나만 있으며, 일반적으로 내부 인스턴스는 내부 인스턴스에 대한 인터페이스 액세스를 통해 클로저.

var singleton = ()=>{
    var instance;
    var createInstance = ()=>{
        this.a = 1;
        this.b = 2;
    }
    return {
         getInstance:()=>{
            if(!instance){
               instance = createInstance();
           }
            return instance;
         }
     }
}
var test = singleton();
test.getInstance() == test.getInstance() //true

로그인 후 복사

　 데코레이터 하이브리드 모드

이 모드는 원본 객체에 더 많은 동작을 장식하고 변수 이름을 변경하지 않고 유지하는 모드입니다. ES7의 @designator나 python 및 기타 언어를 사용해 본 적이 있다면 decorator에 익숙할 것입니다.

function decorator(sourceObj,decortorFn){
    decortorFn(sourceObj);
    return sourceObj
}
 var d = {a:1};
 // d变为了{a:1,b:1}
 d = decorator(d,(d)=>{d.b=1});

로그인 후 복사

　mixin 블렌딩 모드

이 모드는 기능이 더 수직적이라는 점을 제외하면 데코레이터와 다소 유사합니다. 원본 개체 위에 개체를 추가하고 덮어쓰는 행위입니다. Extensions 및 Object.Assign과 같은 메서드와 비교할 때 mixin 모드는 더 표현력이 뛰어납니다. 믹스인 패턴은 일반화할 수 없습니다. vue.mixin

class StateTracker{
   constructor(){
       this.raw = {
           a:1,
            b:2
         }
     }
   mixin(obj){
        Object.assign(this.raw,obj)
   }
}

로그인 후 복사

와 같이 다양한 데이터 유형에 따라 다양한 믹스인 전략이 있을 수 있습니다. 사용된 프레임워크, 문법, 라이브러리 등. 이러한 디자인 패턴의 적용을 설명합니다.

Redux의 관찰자 모드 사용

var store = createStore(reducer,initialState);//注册redux store，存储在 nextListeners数组
var test = store.subscribe(()=>{console.log(&#39;我注册了！&#39;)});// 取消注册监听 test.unsubscribe();
　publish/subscribe在jquery中的使用
$(document).on(&#39;hello&#39;,()=>{console.log(&#39;hello&#39;)})$(document).trigger(&#39;hello&#39;);$(document).off(&#39;hello&#39;)

로그인 후 복사

React-redux의 데코레이터 모드의 실습

//装饰器
@connect(state=>state)
class Container extends Component{
  render(){
     return JSON.stringify(this.props)   
   }
}

로그인 후 복사