js 단일 디자인 모델

소개 하 다.
4. 567917. 단일 모델 의 정 의 는 하나의 인 스 턴 스 만 있 고 전체 방문 점 을 제공 하 는 것 이다
4. 567917. 단일 모델 은 자주 사용 하 는 모델 로 일부 대상 은 우리 가 스 레 드 탱크, 전체 캐 시, 브 라 우 저 중의 window 대상 등 만 필요 하 다.자바 스 크 립 트 개발 에 있어 서 단일 모델 의 용도 도 매우 광범 위 하 다.로그 인 단 추 를 누 르 면 페이지 에 로그 인 창 이 나타 납 니 다. 이 로그 인 창 은 유일한 것 입 니 다. 로그 인 단 추 를 몇 번 누 르 더 라 도 이 창 은 한 번 만 만들어 집 니 다. 그러면 이 로그 인 창 은 단일 모드 로 만 들 기 에 적합 합 니 다
본문
1. JavaScript 에서 단일 사례 를 실현 하 는 방식 은 여러 가지 가 있 습 니 다. 그 중에서 가장 간단 한 방법 은 대상 의 글자 크기 를 사용 하 는 방법 입 니 다. 그 글자 의 양 에는 대량의 속성 과 방법 이 포함 되 어 있 습 니 다.

var mySingleton = {
    property1: "something",
    property2: "something else",
    method1: function () {
        console.log('hello world');
    }
};

2. 패 킷 을 사용 하여 개인 변 수 를 밀봉 합 니 다. 이런 방법 으로 일부 변 수 를 패 킷 내부 에 밀봉 하고 일부 인터페이스 만 외부 와 통신 합 니 다.

var user = (function(){
   var __name = 'sven',
        __age = 29;
      return {
            getUserInfo: function(){
            return __name + '-' + __age;
       }
   }
 })();

우 리 는 밑줄 로 사유 변 수 를 약정 합 니 다name 와age, 패키지 가 발생 하 는 역할 영역 에 봉인 되 어 있 습 니 다. 외부 에 서 는 이 두 변 수 를 접근 할 수 없습니다. 이 는 전체 명령 에 대한 오염 을 피 할 수 있 습 니 다.
타성
타성 단 예 는 필요 할 때 만 대상 인 스 턴 스 를 만 드 는 것 을 말한다.

      


    var createLoginLayer = function(){
        var div = document.createElement( 'div' );
        div.innerHTML = '      ';
        div.style.display = 'none';
        document.body.appendChild( div );
        return div;
    };
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createLoginLayer();
        loginLayer.style.display = 'block';
    };

지금 은 타성 적 인 목적 을 달 성 했 지만 단 례 의 효 과 를 잃 었 다.로그 인 단 추 를 누 를 때마다 새 로그 인 창 div 를 만 듭 니 다.비록 우 리 는 부 창 에 있 는 닫 기 단 추 를 눌 렀 을 때 (여기 서 실현 되 지 않 음) 이 부 창 을 페이지 에서 삭제 할 수 있 지만 이렇게 자주 노드 를 만 들 고 삭제 하 는 것 은 분명 합 리 적 이지 않 고 불필요 하 다.
로그 인 창 을 만 들 었 는 지, 닫 힌 창 을 이 용 했 는 지 변수 로 판단 할 수 있 습 니 다.

var createLoginLayer = (function(){
        var div;
        return function(){
            if ( !div ){
                div = document.createElement( 'div' );
                div.innerHTML = '      ';
                div.style.display = 'none';
                document.body.appendChild( div );
            }
            return div;
        }
    })();

    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createLoginLayer();
        loginLayer.style.display = 'block';
    };

다음 에 페이지 에 있 는 유일한 iframe 이나 script 탭 을 만 들 려 면 도 메 인 을 넘 어 데 이 터 를 요청 하려 면 법 대로 만들어 야 합 니 다. createLogin Layer 함 수 를 거의 한 번 베껴 야 합 니 다.

var createIframe= (function(){
        var iframe;
        return function(){
            if ( !iframe){
                iframe= document.createElement( 'iframe' );
                iframe.style.display = 'none';
                document.body.appendChild( iframe);
            }
            return iframe;
        }
    })();

우 리 는 변 하지 않 는 부분 을 격 리 시 켜 야 합 니 다. 먼저 div 를 만 드 는 것 과 iframe 을 만 드 는 것 이 얼마나 차이 가 있 는 지 고려 하지 않 습 니 다. 관리 사례 의 논 리 는 완전히 추상 화 될 수 있 습 니 다. 이 논 리 는 똑 같 습 니 다. 하나의 변수 로 대상 을 만 들 었 는 지 를 표시 합 니 다. 만약 에 다음 에 이미 만 든 대상 을 직접 되 돌려 줍 니 다.

var obj;
   if ( !obj ){
       obj = xxx;
}

이제 우 리 는 단일 사례 를 어떻게 관리 하 는 지 에 대한 논 리 를 원래 의 코드 에서 추출 합 니 다. 이러한 논 리 는 getSingle 함수 내부 에 봉인 되 어 있 고 대상 을 만 드 는 방법 fn 은 매개 변수 로 동적 으로 getSingle 함수 에 들 어 갑 니 다.

var getSingle = function( fn ){
      var result;
      return function(){
         //    result     ，      fn        
          return result || ( result = fn .apply(this, arguments ) ); 
    }
};

var createLoginLayer = function(){
        var div = document.createElement( 'div' );
        div.innerHTML = '      ';
        div.style.display = 'none';
        document.body.appendChild( div );
        return div;
    };
    var createSingleLoginLayer = getSingle( createLoginLayer );
    document.getElementById( 'loginBtn' ).onclick = function(){
    //  getSingle( createLoginLayer )  
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = 'block';
    };

다음 에 유일한 iframe 을 만들어 서 제3자 페이지 를 동적 으로 불 러 오 는 데 사용 합 니 다.

    var createSingleIframe = getSingle( function(){
        var iframe = document.createElement ( 'iframe' );
        document.body.appendChild( iframe );
        return iframe;
    });
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createSingleIframe();
        loginLayer.src = 'http://baidu.com';
    };

       ，                              ，        

변 화 를 세 워 서로 영향 을 주지 않 고 연결 되 었 을 때 유일한 인 스 턴 스 대상 을 만 드 는 기능 을 완 성 했 습 니 다. 신기 한 일 로 보 입 니 다.