JavaScript 设计模式 享元模式

Question

享元模式是一种优化模式。它最适合解决因创建大量类似对象而累及性能的问题。这种模式在 JavaScript 中尤其有用，因为复杂的 JavaScript 代码可能很快就会用光浏览器的所有可用内存。通过把大量独立对象转化为少量共享对象，可降低运行 web 应用程序所需的资源数量

享元模式：优化的设计模式，包括两方面：1. 时间上（代码的运行时间) ，2. 空间上（web 浏览器内存）

简单示例

// 出厂商、型号、出厂日期、拥有者、车牌号、最近登记日期
const 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;
};
Car.prototype = {
  constructor:Car  , 
  getMake :function(){
    return this.make;
  },
  getModel:function(){
    return this.model;
  },
  getYear:function(){
    return this.year;
  },
  renewRegistration:function(newRenewDate){
    this.renewDate = newRenewDate;
  }
};

var arr = [] ;

var stime = new Date().getTime();
for(var i = 0 ; i < 5000000; i ++){
  // runtime: 734ms  web: 570
  arr.push(new Car('上海大众','迈腾','2012-02-03','bhx','bj0011','2013-04-01'));
}
var etime = new Date().getTime();
alert(etime - stime);

使用享元模式优化内存

/**
 * 享元模式：内在数据 static (出厂商、型号、出厂日期)，外在数据（拥有者、车牌号、最近登记日期)
 */

//出厂商、型号、出厂日期、拥有者、车牌号、最近登记日期
var Car = function(make ,model , year){
  this.make = make ; 
  this.model = model ; 
  this.year = year ; 
};
Car.prototype = {
  constructor:Car  , 
  getMake :function(){
    return this.make;
  },
  getModel:function(){
    return this.model;
  },
  getYear:function(){
    return this.year;
  }
};

//工厂模式（闭包工厂）
var CarFactory = (function(){
  //用于承装已经生产好的 car 
  var createdCars = {} ;
  return {
    createCar: function(make ,model , year ){
      //如果 createdCars 对象里已经存在当前的 make ,model , year
      if(createdCars[make+model+year]){
        return createdCars[make+model+year];
      } else {
        var car = new Car(make ,model , year);
        createdCars[make+model+year] = car ;
        return car ;
      }
    }
  };
})();

// 单例模式（外在数据 和 内在数据 结合在一起）
const CarRecordManager = (function(){
  // 把登记好的汽车放在这个对象里
  const = carRecordDataBase = {};
  return {
    addCarRecord: function(make ,model , year , owner , tag , renewDate) {
      const car = CarFactory.createCar(make ,model , year);
      carRecordDataBase[tag] = {
        owner : owner , 
        renewDate : renewDate ,
        car : car 
      };
    },
    renewRegistration:function(tag , newRenewDate){
      carRecordDataBase[tag].renewDate = newRenewDate;
    }    
  }
})();

const arr = [] ;
const stime = new Date().getTime();
for(var i = 0 ; i < 5000000; i ++){
  // runtime: 734ms  web: 570
  // arr.push(new Car('上海大众','迈腾','2012-02-03','bhx','bj0011','2013-04-01'));
  //享元模式的测试
  // runtime: 15m(3m - 5m)  web: 230
  arr.push(CarRecordManager.addCarRecord('上海大众','迈腾','2012-02-03','bhx','bj0011','2013-04-01'));
}
const etime = new Date().getTime();
alert(etime - stime);

模拟 web 日历