4. JS 디자인 모델과 개발 실천 발췌(二)

1. 단일 모드

단례 모델의 정의는 하나의 클래스가 하나의 실례만 있고 전체적인 접근점을 제공하는 것을 보증하는 것이다

단일 모드는 자주 사용하는 모드로 일부 대상은 우리가 종종 하나만 필요로 한다. 예를 들어 스레드 탱크, 전역 캐시, 브라우저의 윈도우 대상 등이다

// 
var CreateDiv = function( html ){
  this.html = html;
  this.init();
};
CreateDiv.prototype.init = function(){
  var div = document.createElement( 'div' );
  div.innerHTML = this.html;
  document.body.appendChild( div );
};

// proxySingletonCreateDiv：
var ProxySingletonCreateDiv = (function(){
  var instance;
  return function( html ){
    if ( !instance ){
       instance = new CreateDiv( html );
    }
    return instance;
   }
})();
var a = new ProxySingletonCreateDiv( 'sven1' );
var b = new ProxySingletonCreateDiv( 'sven2' );
alert ( a === b );

전역 변수의 사용 방식 감소

명칭 공간을 사용합니다

var MyApp = {
  event: {},
  dom: {
    style: {}
  }
};

폐쇄 봉인 사유 변수를 사용합니다

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

불활성

instance 실례 대상은 항상 우리가 Singleton을 호출합니다.getInstance는 페이지가 불러올 때 만드는 것이 아니라 만들어집니다

//  ， getSingle ， fn  getSingle  
var getSingle = function( fn ){
  var result;
  return function(){
     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(){
  var loginLayer = createSingleLoginLayer();
  loginLayer.style.display = 'block';
};

2. 정책 모드

일련의 알고리즘을 정의하여 그것들을 하나하나 봉인하여 서로 바꿀 수 있도록 한다

3. 프록시 모드

에이전트 모드는 대상에 대한 접근을 제어하기 위해 대용품이나 자리 표시자를 제공하는 것입니다

에이전트 모델의 관건은 고객이 한 대상을 직접 방문하기 불편하거나 수요를 만족시키지 못할 때 대역 대상을 제공하여 이 대상에 대한 방문을 통제하는 것이다. 고객이 실제로 방문하는 것은 대역 대상이다.대역 대상이 요청에 대해 약간의 처리를 한 후에 다시 요청을 본체 대상에 전달한다