javascript 디자인 모델 C 향 원 모델 원리 와 용법 실례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 향 원 모델 의 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:우리 의 일상적인 개발 에서 많은 대상 을 만들어 야 한다.비록 쓰레기 회수 체 제 는 우 리 를 도와 회수 할 수 있 지만 중복 적 으로 대상 을 만들어 야 하 는 장면 에서 최적화 시 켜 시스템 자원 의 이 용 률 을 높 여야 한다.
향 원 모델 은 바로 이런 문 제 를 해결 하 는 것 이 고 주요 목적 은 창설 대상 의 수량 을 줄 이 는 것 이다.향 원 모드 는 기 존의 같은 대상 을 다시 사용 하 는 것 을 권장 합 니 다.일치 하 는 대상 을 찾 지 못 하면 새로운 대상 을 만 듭 니 다.
정의:공유 기술 을 활용 하여 대량의 입자 대상 의 재 활용 을 효과적으로 지원 합 니 다.시스템 은 소량의 대상 만 적용 되 는데 이 대상 들 은 모두 비슷 하고 상태 변화 가 적어 대상 의 여러 번 재 활용 을 실현 할 수 있다.향원 모델 은 공유 할 수 있 는 대상 이 반드시 세 립 도의 대상 이 어야 하기 때문에 그 는 경량급 모델 이 라 고도 부 르 며 대상 구조 형 모델 이다.
장면:우 리 는 원형 대상 을 만 드 는 것 을 예 로 들 어 두 가지 예 를 통 해 메타 모델 의 효 과 를 비교 합 니 다.
예시:

var redCricle = new Circle('red');
redCricle.setAttr(10,10,10);
redCricle.draw();
 
var redCricle1 = new Circle('red');
redCricle1.setAttr(1,1,100);
redCricle1.draw();
 
var redCricle2 = new Circle('red');
redCricle2.setAttr(5,5,50);
redCricle2.draw();
 
var blueCricle = new Circle('blue');
blueCricle.setAttr(1,1,50);
blueCricle.draw();
 
var blueCricle1 = new Circle('blue');
blueCricle1.setAttr(12,12,50);
blueCricle1.draw();
 
var blueCricle2 = new Circle('blue');
blueCricle2.setAttr(2,12,20);
blueCricle2.draw();
//        
//   ：   ：red x:10 y:10 radius:10
//        
//   ：   ：red x:1 y:1 radius:100
//        
//   ：   ：red x:5 y:5 radius:50
//        
//   ：   ：blue x:1 y:1 radius:50
//        
//   ：   ：blue x:12 y:12 radius:50
//        
//   ：   ：blue x:2 y:12 radius:20

이런 상황 에서 매번 사용 할 때마다 Circle 대상 을 예화 해 야 하기 때문에 시스템 자원 에 있어 낭비 이다.
관찰 해 보면 첫 번 째 사례 를 제외 하고 나머지 는 사례 를 바탕 으로 계속 수정 할 수 있다 는 것 을 알 수 있다.
수정 해 보 겠 습 니 다.

var Circle = function(color){
  console.log('       ');
  this.color = color;
  this.x;
  this.y;
  this.radius;
 
  this.setAttr = function(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
  }
  this.draw = function(){
    console.log('  ：   ：' + this.color + ' x:' + this.x + ' y:' + this.y + ' radius:' + this.radius)
  }
}
 
var ShapeFactory = function(){
  this.circleMap = {};
  this.getCircle = function(color){
    var circle = this.circleMap[color];
    if(!circle){
      circle = new Circle(color);
      this.circleMap[color] = circle;
    }
    return circle;
  }
}
var factory = new ShapeFactory();
 
var redCricle = factory.getCircle('red');
redCricle.setAttr(10,10,10);
redCricle.draw();
 
var redCricle1 = factory.getCircle('red');
redCricle1.setAttr(1,1,100);
redCricle1.draw();
 
var redCricle2 = factory.getCircle('red');
redCricle2.setAttr(5,5,50);
redCricle2.draw();
 
var blueCricle = factory.getCircle('blue'); 
blueCricle.setAttr(1,1,50);
blueCricle.draw();
 
var blueCricle1 = factory.getCircle('blue');
blueCricle1.setAttr(12,12,50);
blueCricle1.draw();
 
var blueCricle2 = factory.getCircle('blue');
blueCricle2.setAttr(2,12,20);
blueCricle2.draw();
 
//        
//   ：   ：red x:10 y:10 radius:10
//   ：   ：red x:1 y:1 radius:100
//   ：   ：red x:5 y:5 radius:50
//        
//   ：   ：blue x:1 y:1 radius:50
//   ：   ：blue x:12 y:12 radius:50
//   ：   ：blue x:2 y:12 radius:20

우 리 는 한 공장 을 통 해 Circle 대상 을 동적 으로 만 들 고 인 스 턴 스 를 저장 하 며 저 장 된 위 치 를 향 원 지 라 고 합 니 다.두 번 째 생 성 시 기 존 결 과 를 직접 사용 합 니 다.시스템 자원 을 절약 했다
향 원 모드 총화:
장점:
*대상 의 생 성 을 크게 줄 이 고 시스템 메모리 사용 을 낮 추어 효율 을 높 인 다.
*향 원 모드 는 외부 상태 가 독립 되 어 내부 상태 에 영향 을 주지 않 고 향 원 대상 이 서로 다른 환경 에서 공 유 될 수 있 도록 한다.
단점:
*시스템 복잡 도 를 높이 고 같은 속성 이 필요 합 니 다.그렇지 않 으 면 시스템 혼란 을 초래 할 수 있 습 니 다.
적용 필드:
*한 시스템 에 동일 하거나 비슷 한 대상 이 많아 메모리 가 많이 소모 된다.
*대상 의 대부분 상 태 는 외부 화 가능
*향 원 모드 를 사용 할 때 향 원 대상 을 저장 하 는 향 원 탱크 를 유지 해 야 하 는데 이것 은 일정한 시스템 자원 을 소모 해 야 한다.따라서 사용 시 재 어 봐 야 한다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.