JavaScript 향원 모드 원리 와 용법 실례 상세 설명

본 고의 실례 는 자 바스 크 립 트 향원 모델 의 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
두 가지 사례 의 대 비 를 통 해 향 원 모델 의 특징 을 돋 보이 게 한다.향 원 모델 은 성능(공간 복잡 도)을 향상 시 키 기 위 한 디자인 모델 로 향 원 모델 은 대량의 비슷 한 비용 을 피 할 수 있다.
첫 번 째 인 스 턴 스 는 향 원 모드 를 사용 하지 않 고 시간 과 공간 사용 정 도 를 계산 합 니 다.
요구 사항:한 도시 에서 자동차 등록 을 해 야 합 니 다.
(1)자동차 류

/**
   *    
   *   
   *    
   *     
   *         
   */
  var Car = function(make,model,year,owner,tag,renewDate){
    this.make = make;
    this.model = model;
    this.year = year;
    this.owner = owner;
    this.tag = tag;
    this.renewDate = renewDate;
    this.getMake = function(){
      return this.make;
    }
  }

(2)장식 자 모드 사용-함수 의 소모 시간 계산

//    ..        
  var simpleProfiler = function(componet){
    this.componet = componet;
    this.action = function(methodName){
      var self = this;
      var method = componet[methodName];
      //           
      if(typeof method == "function"){
        var startDate = new Date().getTime();//    
        method.apply(self.componet,arguments);
        var endDate = new Date();//    
        alert(endDate - startDate);        
      }
    }
  }  

(3)구체 적 인 사례 는 현재 4150000 대의 차량 이 등록 해 야 한다.

var ca = new Array();
  function addCar(){
    this.begin = function(){
      for (var i = 0; i < 4150000; i++) {
        ca.push(new Car("BMW","  ","2017-10-18",
          "","GBMW88","2017-10-19"));
      }
    }
  }
  new simpleProfiler(new addCar()).action("begin")

두 번 째 예:향 원 모드 사용
(1)자동차 류

/**
   *    
   *   
   *    
   *     
   *         
   */
  var Car = function(make,model,year){
    this.make = make;
    this.model = model;
    this.year = year;
    this.getMake = function(){
      return this.make;
    }
  }

(2)단일 모델 의 간단 한 공장

//         
  var myCarInfo = function(){
    this.createCar = function(make,model,year,owner,tag,renewDate){
      var c = carInfoFactory(make,model,year);
      c["owner"] = owner;
      c["tag"] = tag;
      c["renewDate"] = renewDate;
      return c;
    }
  }
  var carInfoFactory = (function(){
    var carInfo = {};
    return function(make,model,year){
      if(carInfo[make+model+year]){
        return carInfo[make+model+year];
      }else{
        var newCar = new Car(make,model,year);
        carInfo[make+model+year] = newCar;
        return newCar;
        a
      }
    }
  })();

(3)현재 4150000 대의 차량 을 등록 해 야 한다.

var test = new myCarInfo();
  var startDate = new Date().getTime();
  var ca = new Array();
  for (var i = 0; i < 4150000; i++) {

    ca.push(test.createCar("BMW","  ","2017-10-18",
          "","GBMW88","2017-10-19"))
  }
  var endDate = new Date();
  alert(endDate - startDate);

상기 두 가지 예 를 통 해 알 수 있 듯 이 첫 번 째 예 는 향 원 모델 을 사용 하지 않 았 고 두 번 째 는 향 원 모델 을 사용 하 는 데 시간 이 적 지만 공간 소모 가 크 고 두 번 째 는 시간 이 많 지만 공간 소모 가 적다.
첫 번 째 상황 도해:매번 같은 인 스 턴 스 를 생 성 합 니 다.
 

두 번 째 상황:내 적 부분(변 하지 않 음)+외부 상태(변화)도해

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.