js设计模式（8）---享元模式

0.前言

今天总结了四种设计模式，到现在有点精疲力尽了，但是还是有不少收获，很开心自己有掌握了新的东西，今天变得有了价值。

1.使用条件

1.1、网页中使用了大量资源密集型的对象；

1.2、这些对象中所保存的数据至少有一部分能被转化为外在数据；

1.3、外在数据分离出去以后，独一无二的对象的数目较少。

2. 实现步骤

2.1、将所有外在数据从目标类分离，形成共享对象；

2.2、创建一个用来控制共享类实例化的工场；

2.3、创建一个用来保存外在数据的管理器。

3.享元模式的利与弊

利：可以把网页的资源负荷降低几个数量级；

弊：调试、维护变得困难

4.应用举例

4.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;
 　　}
 　　Car.prototype = {
 　　　　getMake:function(){
 　　　　　　returnthis.make;
 　　　　},
 　　　　getModel:function(){
 　　　　　　returnthis.model;
 　　　　},
 　　　　getYear:function(){
 　　　　　　returnthis.year;
 　　　　},
 　　　　transferOwner:function(owner,tag,renewDate){
 　　　　　　this.owner=owner;
 　　　　　　this.tag=tag;
 　　　　　　this.renewDate=renewDate;
 　　　　},
 　　　　renewRegistration:function(renewDate){
 　　　　　　this.renewDate=renewDate;
 　　　　}
 　　}
 　　//数据量小到没多大的影响，数据量大的时候对计算机内存会产生压力，下面介绍享元模式优化后
 　　//包含核心数据的Car类
 　　var Car=function(make,model,year){
 　　　　this.make=make;
 　　　　this.model=model;
 　　　　this.year=year;
 　　}
 　　Car.prototype={
 　　　　getMake:function(){
 　　　　　　returnthis.make;
 　　　　},
 　　　　getModel:function(){
 　　　　　　returnthis.model;
 　　　　},
 　　　　getYear:function(){
 　　　　　　returnthis.year;
 　　　　}
 　　}
 　　//中间对象，用来实例化Car类
 　　var CarFactory=(function(){
 　　　　var createdCars = {};
 　　　　return {
 　　　　　　createCar:function(make,model,year){
 　　　　　　　　var car=createdCars[make+"-"+model+"-"+year];
 　　　　　　　　return car ? car : createdCars[make +'-'+ model +'-'+ year] =(new Car(make,model,year));
 　　　　　　}
 　　　　}
 　　})();
 　　//数据工厂，用来处理Car的实例化和整合附加数据
 　　var CarRecordManager = (function() {
 　　　　var carRecordDatabase = {};
 　　　　return {
 　　　　　　addCarRecord:function(make,model,year,owner,tag,renewDate){
 　　　　　　　　var car = CarFactory.createCar(make, model, year);
 　　　　　　　　carRecordDatabase[tag]={
 　　　　　　　　　　owner:owner,
 　　　　　　　　　　tag:tag,
 　　　　　　　　　　renewDate:renewDate,
 　　　　　　　　　　car:car
 　　　　　　}
 　　　　},
 　　　　　　transferOwnership:function(tag, newOwner, newTag, newRenewDate){
 　　　　　　　　var record=carRecordDatabase[tag];
 　　　　　　　　record.owner = newOwner;
 　　　　　　　　record.tag = newTag;
 　　　　　　　　record.renewDate = newRenewDate;
 　　　　　　},
 　　　　　　renewRegistration:function(tag,newRenewDate){
 　　　　　　　　carRecordDatabase[tag].renewDate=newRenewDate;
 　　　　　　},
 　　　　　　getCarInfo:function(tag){
 　　　　　　　　return carRecordDatabase[tag];
 　　　　　　}
 　　　　}
 　　})();

4.2、用在DOM层上，享元可以用在中央事件管理器上用来避免给父容器里的每个子元素都附加事件句柄。例子详见，AlloyTeam

var getDiv = (function(){
    var created = [];
    var create = function(){
          return document.body.appendChild( document.createElement( 'div' ) );
    }
    var get = function(){
         if ( created.length ){
              return created.shift();
          }else{
                return create();
           }
     }
/* 一个假设的事件，用来监听刚消失在视线外的div，实际上可以通过监听滚                                     动条位置来实现 */
      userInfoContainer.disappear(function( div ){
              created.push( div );
        })
 })()
  var div = getDiv();
  div.innerHTML = "${userinfo}";

5.个人总结

1.享元模式是一种优化模式，主要用于减少资源消耗，提高代码的运行效率；

2.主要针对大量的资源密集型对象，并且这些对象有很大的相似之处；

3.可以讲这些对象里面的数据分为内在数据和外在数据，内在数据用来创建一个共享对象，用于共享，外在数据保存在管理器里；

4.享元模式就是把原来的一个对象拆分三个对象：共享对象、工场函数、保存外在状态的管理器；

5.将原来保存在一个对象中的数据分开保存在两个对象中。