[js 고수 의 길]단일 모드 구현 모드 상자 의 예시

단 례 가 뭐 죠?
하나예:바로 실례 화 된 대상 이다.그것 을 합치 면 하나의 구조 함수 가 새로운 실례 만 낼 수 있 도록 보장 하 는 것 이다.왜 단일 모드 를 배 워 야 하 는가?또는 단일 모드 에는 어떤 흔히 볼 수 있 는 응용 장면 이 있 습 니까?그것 의 사용 은 아직도 광범 위 합 니 다.예 를 들 어 하나의 모드 상 자 를 팝 업 합 니 다.일반적으로 사이트 에서 팝 업 되 는 모드 상 자 는 계속 클릭 하고 보통 하나만 만 들 수 있 습 니 다.그리고 백 엔 드 의 데이터베이스 연결 은 일반적으로 하나의 연결 을 보장 하 는 등 이다.오늘 의 주 제 는 바로 하나의 예 가 모드 상자 에서 의 응용 이다.우 리 는 먼저 하나의 예 를 어떻게 만 드 는 지 알 아야 한다.
우 리 는 먼저 일반적인 구조 함수 와 원형 방식 을 살 펴 보 자.다음은 흔 한 방식 입 니 다.

function Singleton ( uName ){
   this.userName = uName;
   this.ins = null;
  }
  Singleton.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new Singleton( 'ghostwu' );
  var obj2 = new Singleton( 'ghostwu2' );
  console.log( obj1 === obj2 ); //false

매번 new 는 메모리 에 새로운 메모리 영역 을 생 성하 여 새로운 인 스 턴 스 를 저장 합 니 다.따라서 이 방식 은 new 만 하나의 예 를 낼 수 있다 는 것 을 보장 할 수 없습니다.그래서 우 리 는 하나의 예 를 만 들 려 면 new 가 인 스 턴 스 를 만 드 는 과정 을 제어 할 수 있어 야 합 니 다!!이것 이 바로 단일 사례 의 관건 이다.그러면 이 과정 을 통제 하려 면 사용자 가 구조 함 수 를 직접 호출 하 게 해 서 는 안 되 기 때문에 우 리 는 다른 방법 을 생각해 야 한다.
첫 번 째 방법:함수 에 정적 방법 을 추가 하여 인 스 턴 스 를 만 드 는 과정 을 제어 합 니 다.

function Singleton ( uName ){
   this.userName = uName;
  }
  Singleton.prototype.showUserName = function(){
   return this.userName;
  }
  Singleton.getInstance = function( uName ){
   if ( !this.ins ) {
    this.ins = new Singleton( uName );
   }
   return this.ins;
  }

  var obj1 = Singleton.getInstance( 'ghostwu' );
  var obj2 = Singleton.getInstance( 'ghostwu2' );
  console.log( obj1 === obj2 ); //true

여덟 번 째 줄 은 인 스 턴 스 라 는 변수 가 인 스 턴 스 를 저 장 했 는 지 여 부 를 판단 합 니 다.없 으 면 new 로 돌아 갑 니 다.그렇지 않 으 면 바로 돌아 갑 니 다.두 번 째 호출 시 인 스 가 이미 존재 하기 때문에 바로 돌아 오 면 new 가 필요 없습니다.이것 은 하나의 예 를 확보 할 수 있 습 니 다.
두 번 째 방법:폐쇄 와 즉각 표현 식 의 특성 을 이용 합 니 다.

function Singleton ( uName ){
   this.userName = uName;
  }
  Singleton.prototype.showUserName = function(){
   return this.userName;
  }
  Singleton.getInstance = (function(){
   var ins = null;
   return function( uName ) {
    if ( !ins ) {
     ins = new Singleton( uName );
    }
    return this;
   }
  })();

  var obj1 = Singleton.getInstance( 'ghostwu' );
  var obj2 = Singleton.getInstance( 'ghostwu2' );
  console.log( obj1 === obj2 );

이 두 가지 방법 은 모두 가능 하 다.그 다음 에 나 는 두 번 째 방법 을 선택 하여 팝 업 단일 한 모드 상 자 를 실현 할 것 이다.
3.전통 적 으로 대상 을 대상 으로 하 는 방식 으로 클릭 할 때마다 새로운 모드 상자 가 나타 납 니 다.
스타일:

div {
   width: 200px;
   height: 200px;
   border:1px solid #09f;
   box-shadow: 2px 2px 1px #666;
   position: absolute;
  }

html:

<input type="button" value="  ">

js 부분:

var oBtn = document.querySelector("input"),
   offset = 20, index = 1;
  function Module( pos ){
   this.offset = pos || 20;
  }
  Module.prototype.create = function(){
   var oDiv = document.createElement( "div" );
   oDiv.style.left = ( ++index ) * offset + 'px';
   oDiv.style.top = ( ++index ) * offset + 'px';
   oDiv.innerHTML = 'ghostwu         ';
   return oDiv;
  }
  oBtn.onclick = function(){
   var oDiv = new Module();
   document.body.appendChild( oDiv.create() );
  }

넷 째,단일 사례 로 개조 한다.
html:

<input type="button" value="  1">
<input type="button" value="  2">

var aBtn = document.querySelectorAll("input"),
   offset = 20, index = 1;
  function Module( pos ){
   this.offset = pos || 20;
  }
  Module.prototype.create = function(){
   var oDiv = document.createElement( "div" );
   oDiv.style.left = ( ++index ) * offset + 'px';
   oDiv.style.top = ( ++index ) * offset + 'px';
   oDiv.innerHTML = 'ghostwu         ';
   return oDiv;
  }
  Module.one = (function(){
   var ins = null, isExist = false;
   return function( pos ){
    if ( !ins ) ins = new Module( pos );
    if ( !isExist ) {
     document.body.appendChild( ins.create() );
     isExist = true;
    }
   }
  })();
  aBtn[0].onclick = function(){
   Module.one( 10 );
  }
  aBtn[1].onclick = function(){
   Module.one( 10 );
  }

Module.one 에 서 는 변수 isExist 의 두 가지 상태 와 패 킷 특성 제어 요 소 를 한 번 만 추가 할 수 있 습 니 다.
이상 의[js 고수 의 길]단일 모델 이 모드 상 자 를 실현 하 는 예 는 바로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.