Skip to main content
 首页 » 编程设计

javascript享元模式(flyweight)

2022年07月16日156jpfss
   1 <!DOCTYPE html> 
   2 <html> 
   3 <head> 
   4     <title>享元模式(flyweight)</title> 
   5     <meta charset="utf-8"> 
   6 </head> 
   7 <body> 
   8 <input value="方案1" type="button"> 
   9 <input value="方案2" type="button"> 
  10  
  11 <div id="calendar-container"></div> 
  12  
  13 <script> 
  14 /** 
  15  * 享元模式 
  16  * 
  17  * 定义: 
  18  * 运用共享技术有效地支持大量细粒度的对象 
  19  * 
  20  * 本质: 
  21  * 分离与共享 
  22  * 
  23  * 分离的是对象状态中的变与不变的部分,共享的是对象中不变的部分。享元模式的关键之处在于分离变与不变,把不变部分作为享元对象的内部状态,而变化部分则作为外部状态,由外部来维护,这样享元对象就能够被共享。 
  24  * 
  25  * 如果能够有效地减少对象的数量,减少重复的数据,那么就能够节省不少内存。一个基本的思路就是缓存这些包含着重复数据的对象,让这些对象只出现一次,也就只耗费一份内存。 
  26  * 如果被缓存的对象的属性值经常变动,那就不适合缓存了。 
  27  * 因此,需要分离出被缓存对象实例中,哪些数据是不变且重复出现的,哪些数据是经常变化的,真正应该被缓存的数据是那些不变且重复出现的数据,把它们称为对象的内部状态,而那些变化的数据就不缓存了,把它们称为对象的外部状态。 
  28  * 这样在实现的时候,把内部状态分离出来共享,称之为享元,通过共享享元对象来减少对内存的占用。把外部状态分离出来,放到外部,让应用在使用的时候进行维护,并在需要的时候传递给享元对象使用。为了控制对内部状态的共享,并且让外部能简单地使用共享数据,提供一个工厂来管理享元,把它称为享元工厂。 
  29  * 
  30  * 1.变与不变 
  31  * 享元模式的重点就在于分离变与不变。把一个对象的状态分成内部状态和外部状态,内部状态是不变的,外部状态是可变的。然后通过共享不变的部分,达到减少对象数量并节约内存的目的。在享元对象需要的时候,可以从外部传入外部状态给共享的对象,共享对象会在功能处理的时候,使用自己内部的状态和这些外部的状态。 
  32  * 
  33  * 2.共享与不共享 
  34  * 在享元模式中,享元对象又有共享与不共享之分,这种情况通常出现在和组合模式合用的情况,通常共享的是叶子对象,一般不共享的部分是由共享部分组合而成的,由于所有细粒度的叶子对象已经缓存了,那么缓存组合对象就没有什么意义了。 
  35  * 
  36  * 3.内部状态和外部状态 
  37  * 享元模式的内部状态,通常指的是包含享元对象内部的,对象本身的状态,是独立于使用享元的场景的信息,一般创建后就不再变化的状态,因此可以共享。 
  38  * 外部状态指的是享元对象之外的状态,取决于使用享元的场景,会根据使用场景而变化,因此不可共享。如果享元对象需要这些外部状态的话,可以从外部传递到享元对象中,比如通过方法的参数来传递。 
  39  * 也就是说享元模式真正缓存和共享的数据是享元的内部状态,而外部状态是不应该被缓存共享的。 
  40  * 内部状态和外部状态是独立的。外部状态的变化不应该影响到内部状态。 
  41  * 
  42  * 4.实例池 
  43  * 在享元模式中,为了创建和管理共享的享元部分,引入了享元工厂,享元工厂中一般都包含有享元对象的实例池,享元对象就是缓存在这个实例池中的。 
  44  * 所谓实例池,指的是缓存和管理对象实例的程序,通常实例池会提供对象实例的运行环境,并控制对象实例的生存周期。 
  45  * 工业级的实例池在实现上有两个最基本的难点,一个是动态控制实例数量,另一个是动态分配实例来提供给外部使用。这些都是需要算法来做保证的。 
  46  * 在享元模式中,享元工厂中的实例池并没有那么复杂,因为共享的享元对象基本上都是一个实例,一般不会出现同一个享元对象有多个实例的情况。这样就不用去考虑动态创建和销毁享元对象实例的功能,也不存在动态调度的麻烦。 
  47  * 
  48  * 5.享元模式的调用顺序 
  49  * 1)通过享元工厂来获取共享的享元对象 
  50  * 2)创建相应的享元对象 
  51  * 3)调用共享的享元对象的方法,传入外部状态 
  52  * 
  53  * 6.谁来初始化共享对象 
  54  * 通常是第一次向享元工厂请求获取共享对象的时候,进行共享对象的初始化,而且多半都是在享元工厂内部实现,不会从外部传入共享对象。当然可以从外部传入一些创建共享对象需要的值,享元工厂可以按照这些值去初始化需要共享的对象,然后把创建好的共享对象的实例放入享元工厂内部的缓存中,以后再请求这个共享对象的时候就不用再创建了。 
  55  */ 
  56  
  57 (function () { 
  58     // 示例代码 
  59  
  60     /** 
  61      * 享元对象。封装Flyweight的内部状态,提供功能方法。 
  62      * @param state 享元对象的内部状态的数据 
  63      */ 
  64     function ConcreteFlyweight(state) { 
  65         var intrinsicState = state; 
  66  
  67         this.operation = function (extrinsicState) { 
  68             // 具体的功能处理,可能会用到享元内部,外部的状态 
  69         }; 
  70     } 
  71  
  72     /** 
  73      * 不需要共享的flyweight对象 
  74      * 通常是将被共享的享元对象作为子结点组合出来的对象 
  75      */ 
  76     function UnsharedConcreteFlyweight() { 
  77         // 描述对象的状态 
  78         var allState; 
  79  
  80         this.operation = function (extrinsicState) { 
  81             // 具体的功能处理 
  82         }; 
  83     } 
  84  
  85     // 享元工厂 
  86     // 客户端不能直接创建共享享元对象实例,必须通过享元工厂来创建。 
  87     function FlyweightFactory() { 
  88         // 缓存多个Flyweight对象 
  89         var fsMap = {}; 
  90  
  91         this.getFlyweight = function (key) { 
  92             var f = fsMap[key]; 
  93  
  94             if (f == null) { 
  95                 f = new ConcreteFlyweight(key); 
  96                 fsMap[key] = f; 
  97             } 
  98  
  99             return f; 
 100         }; 
 101     } 
 102  
 103     new function () { 
 104         // Client 
 105         // 通常会维持一个对flyweight的引用 
 106         // 计算或存储一个或多个flyweight的外部状态 
 107     }; 
 108  
 109 })(); 
 110  
 111 (function () { 
 112     // 权限控制 
 113  
 114     // 封装授权数据中重复出现部分的享元对象 
 115     function AuthorizationFlyweight(state) { 
 116         var parts = state.split(','); 
 117         // 内部状态, 安全实体 
 118         var securityEntity = parts[0]; 
 119         // 内部状态,权限 
 120         var permit = parts[1]; 
 121  
 122         this.getSecurityEntity = function () { 
 123             return securityEntity; 
 124         }; 
 125         this.getPermit = function () { 
 126             return permit; 
 127         }; 
 128         this.match = function (security, perm) { 
 129             return securityEntity === security && 
 130                 permit === perm; 
 131         }; 
 132         this.toString = function () { 
 133             return securityEntity + ',' + permit; 
 134         }; 
 135     } 
 136  
 137     // 享元工厂,通常实现称为单例 
 138     var FlyweightFactory = { 
 139         fsMap: {}, 
 140         getFlyweight: function (key) { 
 141             var f = this.fsMap[key]; 
 142  
 143             if (f == null) { 
 144                 f = new AuthorizationFlyweight(key); 
 145                 this.fsMap[key] = f; 
 146             } 
 147             return f; 
 148         } 
 149     }; 
 150  
 151     function isEmptyObj(obj) { 
 152         for (var i in obj) return false; 
 153         return true; 
 154     } 
 155  
 156     // 安全管理 
 157     var SecurityMgr = { 
 158         map: {}, 
 159         // 模拟登录 
 160         login: function (user) { 
 161             this.map[user] = this.queryByUser(user); 
 162         }, 
 163         // 判断用户对某个安全实体是否拥有权限 
 164         hasPermit: function (user, securityEntity, permit) { 
 165             var col = this.map[user]; 
 166  
 167             if (col == null || isEmptyObj(col)) { 
 168                 console.log(user + '没有登录或是没有被分配任何权限'); 
 169                 return false; 
 170             } 
 171  
 172             for (var i in col) { 
 173                 if (!col.hasOwnProperty(i)) continue; 
 174  
 175                 var flyweight = col[i]; 
 176                 console.log('flyweight == ' + flyweight); 
 177  
 178                 if (flyweight.match(securityEntity, permit)) return true; 
 179             } 
 180  
 181             return false; 
 182         }, 
 183         // 从数据库中获取某人所拥有的权限 
 184         queryByUser: function (user) { 
 185             var col = []; 
 186  
 187             for (var i in DataBase) { 
 188                 var s = DataBase[i]; 
 189                 var ss = s.split(','); 
 190  
 191                 if (ss[0] === user) { 
 192                     var fm = FlyweightFactory.getFlyweight(ss[1] + ',' + ss[2]); 
 193                     col.push(fm); 
 194                 } 
 195             } 
 196  
 197             return col; 
 198         } 
 199     }; 
 200  
 201     // mock data 
 202     var DataBase = [ 
 203         '张三,人员列表,查看', 
 204         '李四,人员列表,查看', 
 205         '李四,资薪数据,查看', 
 206         '李四,资薪数据,修改' 
 207     ]; 
 208  
 209     for (var i = 0; i < 3; i++) { 
 210         DataBase.push('张三' + i + ',人员列表,查看'); 
 211     } 
 212  
 213     new function () { 
 214         SecurityMgr.login('张三'); 
 215         SecurityMgr.login('李四'); 
 216         var f1 = SecurityMgr.hasPermit('张三', '资薪数据', '查看'); 
 217         var f2 = SecurityMgr.hasPermit('李四', '资薪数据', '查看'); 
 218  
 219         console.log('f1 == ' + f1); 
 220         console.log('f2 == ' + f2); 
 221  
 222         for (var i = 0; i < 3; i++) { 
 223             SecurityMgr.login('张三' + i); 
 224             SecurityMgr.hasPermit('张三' + i, '资薪数据', '查看'); 
 225         } 
 226     }; 
 227  
 228 })(); 
 229  
 230 /* 
 231 不需要共享的享元 
 232  
 233 对于使用已经缓存的享元组合出来的对象,就没有必要再缓存了。也就是把已经缓存的享元当作叶子节点,组合出来的组合对象就不需要 
 234 再被缓存了,也把这种享元成为复合享元。 
 235 */ 
 236  
 237 /* 
 238  享元的结构 
 239  享元模式用于减少应用程序所需对象的数量。这是通过将对象的内部状态划分为内在数据(instrinsic data)和外在数据(extrinsic data)两类而实现的。内在数据是指类的内部方法所需要的信息。没有这种数据的话类就不能正常运行。外在数据则是可以从类身上剥离并存储在其外部的信息。我们可以将内在状态相同的所有对象替换为同一个共享对象,用这种方法可以把对象数量减少到不同内在状态的数量。 
 240  创建这种共享对象需要使用工厂,而不是普通的构造函数。这样做可以跟踪到已经实例化的各个对象,从而仅当所需对象的内在状态不同于已有对象时才创建一个新对象。对象的外在状态被曝存在一个管理器对象中。在调用对象的方法时,管理器会把这些外在状态作为参数传入。 
 241  */ 
 242  
 243 /* 
 244  示例:汽车登记 
 245  假设要开发一个系统,用以代表一个城市的所有汽车。你需要保存每一辆汽车的详细情况(品牌,型号和出厂日期)及其所有权的详细情况(车主姓名,车牌号和最近登记日期)。当然,你决定把每辆汽车表示为一个对象: 
 246  */ 
 247 // Car class, un-optimized. 
 248 /** 
 249  * Car类 
 250  * @param make 品牌 
 251  * @param model 型号 
 252  * @param year 出厂日期 
 253  * @param owner 车主姓名 
 254  * @param tag 车牌号 
 255  * @param renewDate 最近登记日期 
 256  * @constructor Car 
 257  */ 
 258 var Car = function (make, model, year, owner, tag, renewDate) { 
 259     this.make = make; 
 260     this.model = model; 
 261     this.year = year; 
 262     this.owner = owner; 
 263     this.tag = tag; 
 264     this.renewDate = renewDate; 
 265 }; 
 266 Car.prototype = { 
 267     getMake: function () { 
 268         return this.make; 
 269     }, 
 270     getModel: function () { 
 271         return this.model; 
 272     }, 
 273     getYear: function () { 
 274         return this.year; 
 275     }, 
 276  
 277     transferOwnership: function (newOwner, newTag, newRenewDate) { 
 278         this.owner = newOwner; 
 279         this.tag = newTag; 
 280         this.renewDate = newRenewDate; 
 281     }, 
 282     renewRegistration: function (newRenewDate) { 
 283         this.renewDate = newRenewDate; 
 284     }, 
 285     isRegistrationCurrent: function () { 
 286         var today = new Date(); 
 287         return today.getTime() < Date.parse(this.renewDate); 
 288     } 
 289 }; 
 290 /* 
 291  这个系统最初表现不错。但是随着城市人口的增长,你发现它一天天地变慢。数以十万计的汽车对象耗尽了可用的计算资源。要想优化这个系统,可以采用享元模式减少所需对象的数目。 
 292  优化工作的第一步是把内在状态与外在状态分开。 
 293  */ 
 294  
 295 /* 
 296  内在状态和外在状态 
 297  将对象数据划分为内在和外在部分的过程有一定的随意性。既要维持每个对象的模块性,又想把尽可能多的数据作为外在数据处理。划分依据的选择多少有些主观性。在本例中,车的自然数据(品牌,型号和出厂日期)属于内在数据,而所有权数据(车主姓名,车牌号和最近登记日期)则属于外在数据。这意味着对于品牌,型号和出厂日期的每一种组合,只需要一个汽车对象就行,这个数目还是不少,不过与之前相比已经少了几个数量级。每个品牌-型号=出厂日期组合对应的那个实例将被所有该类型汽车的车主共享。下面是新版Car类的代码: 
 298  */ 
 299 // Car class, optimized as a flyweight 
 300 var Car = function (make, model, year) { 
 301     this.make = make; 
 302     this.model = model; 
 303     this.year = year; 
 304 }; 
 305 Car.prototype = { 
 306     getMake: function () { 
 307         return this.make; 
 308     }, 
 309     getModel: function () { 
 310         return this.model; 
 311     }, 
 312     getYear: function () { 
 313         return this.year; 
 314     } 
 315 }; 
 316 /* 
 317  上面的代码删除了所有外在数据。所有处理登记事宜的方法都被转移到一个管理其对象中(不过,也可以将这些方法留在原地,并为其增加对应于各种外在数据的参数)。因为现在对象的数据已被分为两大部分,所以必须用工厂来实例化它。 
 318  */ 
 319  
 320 /* 
 321  用工厂进行实例化 
 322  这个工厂很简单。它会检查之前是否已经创建过对应于指定品牌-型号-出厂日期组合的汽车,如果存在这样的汽车那就返回它,否则创建一辆新车,并把它包村起来供以后使用。这就确保了对应于每个唯一的内在状态,只会创建一个实例: 
 323  */ 
 324 // CarFactory singleton 
 325 var CarFactory = (function () { 
 326     var createdCars = {}; 
 327  
 328     return { 
 329         /** 
 330          * 工厂方法 
 331          * @param make 品牌 
 332          * @param model 型号 
 333          * @param year 出厂日期 
 334          * @return new Car() 
 335          */ 
 336         createCar: function (make, model, year) { 
 337             // Check to see if this particular combination has 
 338             // been created before. 
 339             if (createdCars[make + '-' + model + '-' + year]) { 
 340                 return createdCars[make + '-' + model + '-' + year]; 
 341             } else { 
 342                 // Otherwise create a new instance and save it. 
 343                 var car = new Car(make, model, year); 
 344                 createdCars[make + '-' + model + '-' + year] = car; 
 345                 return car; 
 346             } 
 347         } 
 348     }; 
 349 })(); 
 350  
 351 /* 
 352  封装在管理器中的外在状态 
 353  要完成这种优化还需要一个对象。所有那些从Car对象中删除的数据必须有个保存地点,我们用一个单体来做封装这些数据的管理器。原先的每一个Car对象现在都被分割为外在数据及其所属的共享汽车对象的引用这样两部分。Car对象与车主数据的组合称为汽车记录(car record)。管理器存储着这两方面的信息。它还包含着从原先的Car类删除的方法: 
 354  */ 
 355 // CarRecordManager singleton 
 356 var CarRecordManager = (function () { 
 357     var carRecordDatabase = {}; 
 358  
 359     return { 
 360         // Add a new car record into the city's system 
 361         addCarRecord: function (make, model, year, owner, tag, renewDate) { 
 362             var car = CarFactory.createCar(make, model, year); 
 363             carRecordDatabase[tag] = { 
 364                 owner: owner, 
 365                 renewDate: renewDate, 
 366                 car: car 
 367             }; 
 368         }, 
 369         // Methods previously contained in the Car class. 
 370         transferOwnership: function (tag, newOwner, newTag, newRenewDate) { 
 371             var record = carRecordDatabase[tag]; 
 372             record.owner = newOwner; 
 373             record.tag = newTag; 
 374             record.renewDate = newRenewDate; 
 375         }, 
 376         renewRegistration: function (tag, newRenewDate) { 
 377             carRecordDatabase[tag].renewDate = newRenewDate; 
 378         }, 
 379         isRegistrationCurrent: function (tag) { 
 380             var today = new Date(); 
 381             return today.getTime() < Date.parse(carRecordDatabase[tag].renewDate); 
 382         } 
 383     }; 
 384 })(); 
 385 /* 
 386  从Car类剥离的所有数据现在都保存在CarRecordManager这个单体的私用属性carRecordDatabase中。这个carRecordDatabase对象要比以前使用的一大批对象高效得多。那些处理所有权事宜的方法现在也被封装在这个单体中,因为他们处理的都是外在数据。 
 387  可以看出,这种优化是以复杂为代价的。原先有的只是一个类,而现在却变成了一个类和两个单体对象。把一个对象的数据保存在两个不同的地方这种做法有点令人困惑,但与所解决的性能问题相比,这两点都只是小问题。如果运用得当,那么享元模式能够显著的提升程序的性能。 
 388  */ 
 389  
 390 /* 
 391  管理外在状态 
 392  管理享元对象的外在数据有许多不同方法。使用管理器对象是一种常见做法,这种对象有一个集中管理的数据库(centralized database),用于存放外在状态及其所属的享元对象。汽车登记那个示例就采用了这种方案。其优点在于简单,容易维护。这也是一种比较轻便的方案,因为用来保存外在数据的只是一个数组或对象字面量。 
 393  另一种管理外在状态的办法是使用组合模式。你可以用对象自身的层次体系来保存信息,而不需要另外使用一个集中管理的数据库。组合对象的叶节点全都可以是享元对象,这样一来这些享元对象就可以在组合对象层次体系中多个地方被共享。对于大型的对象层次体系这非常有用,因为同样的数据用这种方案来表示时所需对象的数量要少得多。 
 394  */ 
 395  
 396  
 397 /** 
 398  * 示例:Web 日历 
 399  * 
 400  * 为了演示用组合对象来保存外在状态的具体做法,下面我们要创建一个Web日历。首先实现的是一个未经优化的,未使用享元的版本。这是一个大型组合对象,位于最顶层的是代表年份的组合对象。它封装着代表月份的组合对象,而后者又封装着代表日期的叶对象。这是一个简单的例子,它会按顺序显示每月中的各天,还会按顺序显示一年中的各个月: 
 401  */ 
 402  
 403 (function () { 
 404  
 405     // CalendarYear class, a composite 
 406     var CalendarYear = function (year, parent) { 
 407         // implements CalendarItem 
 408         this.year = year; 
 409         this.element = document.createElement('div'); 
 410         this.element.className = 'year'; 
 411         this.element.style.display = 'none'; 
 412         var title = document.createElement('h4'); 
 413         title.appendChild(document.createTextNode(year)); 
 414         parent.appendChild(this.element).appendChild(title); 
 415  
 416         function isLeapYear(y) { 
 417             return (y > 0) && !(y % 4) && ((y % 100) || !(y % 400)); 
 418         } 
 419  
 420         this.months = []; 
 421         // The number of days in each month. 
 422         this.numDays = [31, isLeapYear(this.year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
 423         for (var i = 0; i < 12; i++) { 
 424             this.months[i] = new CalendarMonth(i + 1, this.numDays[i], this.element); 
 425         } 
 426     }; 
 427     CalendarYear.prototype = { 
 428         display: function () { 
 429             for (var i = 0, len = this.months.length; i < len; i++) { 
 430                 // Pass the call down to the next level 
 431                 this.months[i].display(); 
 432             } 
 433             this.element.style.display = 'block'; 
 434         } 
 435     }; 
 436  
 437  
 438     // CalendarMonth class, a composite 
 439     var CalendarMonth = function (monthNum, numDays, parent) { 
 440         // implements CalendarItem 
 441         this.monthNum = monthNum; 
 442         this.element = document.createElement('div'); 
 443         this.element.className = 'month'; 
 444         this.element.style.display = 'none'; 
 445         var title = document.createElement('h5'); 
 446         title.appendChild(document.createTextNode(monthNum)); 
 447         parent.appendChild(this.element).appendChild(title); 
 448  
 449         this.days = []; 
 450         for (var i = 0; i < numDays; i++) { 
 451             this.days[i] = new CalendarDay(i + 1, this.element); 
 452         } 
 453     }; 
 454     CalendarMonth.prototype = { 
 455         display: function () { 
 456             for (var i = 0, len = this.days.length; i < len; i++) { 
 457                 this.days[i].display(); 
 458             } 
 459             this.element.style.display = 'block'; 
 460         } 
 461     }; 
 462  
 463  
 464     // CalendarDay class, a leaf 
 465     var CalendarDay = function (date, parent) { 
 466         // implements CalendarItem 
 467         this.date = date; 
 468         this.element = document.createElement('div'); 
 469         this.element.className = 'day'; 
 470         this.element.style.display = 'none'; 
 471         parent.appendChild(this.element); 
 472     }; 
 473     CalendarDay.prototype = { 
 474         display: function () { 
 475             this.element.style.display = 'block'; 
 476             this.element.innerHTML = this.date; 
 477         } 
 478     }; 
 479  
 480     var input1 = document.getElementsByTagName('input')[0]; 
 481     input1.year = 2012; 
 482     input1.onclick = function () { 
 483         var a = new CalendarYear(this.year, document.getElementById('calendar-container')); 
 484         a = new MethodProfiler(a); 
 485         a.display(); 
 486         ++this.year; 
 487     }; 
 488  
 489 })(); 
 490 /* 
 491  这段代码的问题在于,你不得不为每一年创建365个CalendarDay对象。要创建一个显示10年的日历,需要实力花几千个CalendarDay对象。这些对象固然不大,但是无论什么类型的对象,如果其数目如此之多的话,都会给浏览器带来资源压力。更有效的做法是无论日历要显示多少年,都只用一个CalendarDay对象来代表所有日期。 
 492  */ 
 493  
 494 /* 
 495  把日期对象转化为享元 
 496  把CalendarDay对象转化为享元对象的过程很简单。首先,修改CalendarDay类本身,出去其中保存的所有数据,让这些数据(日期和父元素)成为外在数据: 
 497  */ 
 498 (function () { 
 499  
 500     // CalendarYear class, a composite 
 501     var CalendarYear = function (year, parent) { 
 502         this.year = year; 
 503         this.element = document.createElement('div'); 
 504         this.element.className = 'year'; 
 505         var title = document.createElement('h4'); 
 506         title.appendChild(document.createTextNode(year)); 
 507         parent.appendChild(this.element).appendChild(title); 
 508  
 509         function isLeapYear(y) { 
 510             return (y > 0) && !(y % 4) && ((y % 100 || !(y % 400))); 
 511         } 
 512  
 513         this.months = []; 
 514         this.numDays = [31, isLeapYear(this.year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
 515         for (var i = 0; i < 12; i++) { 
 516             this.months[i] = new CalendarMonth(i + 1, this.numDays[i], this.element); 
 517         } 
 518     }; 
 519     CalendarYear.prototype = { 
 520         display: function () { 
 521             for (var i = 0, len = this.months.length; i < len; i++) { 
 522                 this.months[i].display(); 
 523             } 
 524             this.element.style.display = 'block'; 
 525         } 
 526     }; 
 527  
 528     // CalendarMonth class, a composite 
 529     var CalendarMonth = function (monthNum, numDays, parent) { 
 530         this.monthNum = monthNum; 
 531         this.element = document.createElement('div'); 
 532         this.element.className = 'month'; 
 533         this.element.style.display = 'none'; 
 534         var title = document.createElement('h5'); 
 535         title.appendChild(document.createTextNode(monthNum)); 
 536         parent.appendChild(this.element).appendChild(title); 
 537  
 538         this.days = []; 
 539         for (var i = 0; i < numDays; i++) { 
 540             /**------------------------------------**/ 
 541             this.days[i] = calendarDay; 
 542             /**------------------------------------**/ 
 543         } 
 544     }; 
 545     CalendarMonth.prototype = { 
 546         display: function () { 
 547             for (var i = 0, len = this.days.length; i < len; i++) { 
 548                 /**------------------------------------**/ 
 549                 this.days[i].display(i + 1, this.element); 
 550                 /**------------------------------------**/ 
 551             } 
 552             this.element.style.display = 'block'; 
 553         } 
 554     }; 
 555  
 556     // CalendarDay class, a leaf 
 557     /**------------------------------------**/ 
 558     var CalendarDay = function () { 
 559     }; 
 560     CalendarDay.prototype = { 
 561         display: function (date, parent) { 
 562             var element = document.createElement('div'); 
 563             element.className = 'day'; 
 564             parent.appendChild(element); 
 565             element.innerHTML = date; 
 566         } 
 567     }; 
 568  
 569     /* 
 570      接下来,创建日期对象的单个实例。所有CalendarMonth对象中都要使用这个实例。这里本来也可以像第一个示例那样使用工厂来创建该类的实例,不过,因为这个类只需要创建一个实例,所以直接实例化它就行了: 
 571      */ 
 572     // Single instance of CalendarDay 
 573     var calendarDay = new CalendarDay(); 
 574     /**------------------------------------**/ 
 575  
 576     var input1 = document.getElementsByTagName('input')[1]; 
 577     input1.year = 2012; 
 578     input1.onclick = function () { 
 579         var a = new CalendarYear(this.year, document.getElementById('calendar-container')); 
 580         a = new MethodProfiler(a); 
 581         a.display(); 
 582         ++this.year; 
 583     }; 
 584     /* 
 585      现在外在数据成了display方法的参数,而不是类的构造函数的参数。这是享元的典型工作方式。因为在此情况下有些(或全部)数据被曝存在对象之外,要想实现与之前同样的功能就必须把他们提供给各个方法。 
 586      最后,CalendarMonth类也要略作修改。原来用CalendarDay类构造函数创建该类实例的那个表达式被替换为calendarDay对象,而那些原本提供给CalendarDay类构造函数的参数现在被转而提供给display方法。 
 587      */ 
 588 })(); 
 589  
 590 /* 
 591  外在数据保存在哪里 
 592  本例没有像前面的例子那样使用一个中心数据库来保存所有从享元对象剥离的数据。实际上,其他类基本上没做什么修改,CalendarYear根本没改,而CalendarMonth只改了两行。这都是因为组合对象的结构本身就已经包含了所有的外在数据。由于月份对象中的所有日期对象被一次存放在一个数组中,所以它知道每一个日期对象的状态,从CalendarDay构造函数中剔除的两种数据都已经存在于CalendarMonth对象中。 
 593  
 594  这就是组合模式与享元模式配合得如此完美的原因。组合对象通常拥有大量叶对象,它还保存着许多可作为外在数据处理的数据。也对象通常只包含极少的内在数据,所以很容易被转化为共享资源。 
 595  */ 
 596  
 597 /** 
 598  * 示例:工具提示对象 
 599  * 
 600  * 在HS对象需要创建HTML内容这种情况下,享元模式特别有用。那种会生成DOM元素的对象如果数目众多的话,会占用过多内存,使网页陷入泥沼。采用享元模式后,只需创建少许这种对象即可,所有需要这种对象的地方都可以共享它们。工具提示就是一个典型的例子。 
 601  */ 
 602  
 603 // 未经优化的Tooltip类 
 604 // Tooltip class, un-optimized 
 605 function test() { 
 606     var Tooltip = function (targetElement, text) { 
 607         this.target = targetElement; 
 608         this.text = text; 
 609         this.delayTimeout = null; 
 610         this.delay = 500; 
 611  
 612         this.element = document.createElement('div'); 
 613         this.element.style.display = 'none'; 
 614         this.element.style.position = 'absolute'; 
 615         this.element.className = 'tooltip'; 
 616         document.body.appendChild(this.element); 
 617         this.element.innerHTML = this.text; 
 618  
 619         var that = this; 
 620         this.target.addEventListener('mouoseover', function (e) { 
 621             that.startDelay(e); 
 622         }, false); 
 623         this.target.addEventListener('mouseout', function (e) { 
 624             that.hide(); 
 625         }, false); 
 626     }; 
 627     Tooltip.prototype = { 
 628         startDelay: function (e) { 
 629             if (this.delayTimeout === null) { 
 630                 var that = this, 
 631                     x = e.clientX, 
 632                     y = e.clientY; 
 633                 this.delayTimeout = setTimeout(function () { 
 634                     that.show(x, y); 
 635                 }, this.delay); 
 636             } 
 637         }, 
 638         show: function (x, y) { 
 639             clearTimeout(this.delayTimeout); 
 640             this.delayTimeout = null; 
 641             this.element.style.left = x + 'px'; 
 642             this.element.style.top = (y + 20) + 'px'; 
 643             this.element.style.display = 'block'; 
 644         }, 
 645         hide: function () { 
 646             clearTimeout(this.delayTimeout); 
 647             this.delayTimeout = null; 
 648             this.element.style.display = 'none'; 
 649         } 
 650     }; 
 651  
 652     var link1 = $('link-id1'), 
 653         link2 = $('link-id2'); 
 654     var tt = new Tooltip(link1, 'Lorem ipsum....'); 
 655 } 
 656  
 657 // 作为享元的Tooltip 
 658 /* 
 659  把Tooltip类转化为享元需要做三件事:把外在数据从Tooltip对象中删除;创建一个用来实例化Tooltip的工厂;创建一个用来保存外在数据的管理器。在这个例子,我们可以用一个单体同时扮演工厂和管理器的角色。此外,由于外在数据可以作为事件侦听器一部分保存,因此没有必要使用一个中心数据库。 
 660  */ 
 661  
 662 function test() { 
 663     // TooltipManager singleton, a flyweight factory and manager 
 664     var TooltipManager = (function () { 
 665         var storedInstance = null; 
 666  
 667         // Tooltip class, as aflyweight 
 668         var Tooltip = function () { 
 669             this.delayTimeout = null; 
 670             this.delay = 500; 
 671  
 672             this.element = document.createElement('div'); 
 673             this.element.style.display = 'none'; 
 674             this.element.style.position = 'absolute'; 
 675             this.element.className = 'tooltip'; 
 676             document.body.appendChild(this.element); 
 677         }; 
 678         Tooltip.prototype = { 
 679             startDelay: function (e, text) { 
 680                 if (this.delayTimeout === null) { 
 681                     var that = this, 
 682                         x = e.clientX, 
 683                         y = e.clientY; 
 684                     this.delayTimeout = setTimeout(function () { 
 685                         that.show(x, y, text); 
 686                     }, this.delay); 
 687                 } 
 688             }, 
 689             show: function (x, y, text) { 
 690                 clearTimeout(this.delayTimeout); 
 691                 this.delayTimeout = null; 
 692                 this.element.innerHTML = text; 
 693                 this.element.style.left = x + 'px'; 
 694                 this.element.style.top = (y + 20) + 'px'; 
 695                 this.element.style.display = 'block'; 
 696             }, 
 697             hide: function () { 
 698                 clearTimeout(this.delayTimeout); 
 699                 this.delayTimeout = null; 
 700                 this.element.style.display = 'none'; 
 701             } 
 702         }; 
 703  
 704         return { 
 705             addTooltip: function (targetElement, text) { 
 706                 // Get the tooltip object 
 707                 var tt = this.getTooltip(); 
 708                 // Attach the events 
 709                 targetElement.addEventListener('mouseover', function(e){ 
 710                     tt.startDelay(e, text); 
 711                 }, false); 
 712                 targetElement.addEventListener('mouseover', function(e){ 
 713                     tt.hide(); 
 714                 }, false); 
 715             }, 
 716             getTooltip: function () { 
 717                 if (storedInstance === null) { 
 718                     storedInstance = new Tooltip(); 
 719                 } 
 720                 return storedInstance; 
 721             } 
 722         }; 
 723     })(); 
 724  
 725 // Tooltip usage 
 726     TooltipManager.addTooltip($('link-id2'), 'hello world'); 
 727 } 
 728 /* 
 729  上面的Tooltip类删除了原来的构造函数的所有参数以及注册事件处理器的代码。而startDelay和show方法则各增加了一个新的参数,这样一来,要显示的文字就可以作为外在数据传给他们。 
 730  
 731  这个单体有两个方法,分别体现了他的两种角色,getTooltip是工厂方法,它与你之前见到过的其他享元的生成方法差不多。addTooltip则是管理器方法,它先获取一个Tooltip对象,然后后分别把两个匿名函数注册为目标元素的mouseover和mouseout事件侦听器。这个例子用不着创建中心数据库,因为那两个匿名函数中生成的闭包已经保存了外在数据。 
 732  */ 
 733  
 734 /* 
 735  现在生成的DOM元素已减至一个。这很重要,假如你想为工具提示添加阴影或iframe垫片等特性,那么每个Tooltip对象需要生成5-10个DOM元素。要是不把它实现为享元的话,网页将被成百上千个工具提示压垮。此外,享元模式的应用还减少了对箱内部保存的数据。 
 736  */ 
 737  
 738 /* 
 739  保存实例供以后重用 
 740  
 741  模式对话框是享元模式的另一个适用场合。与工具提示一样,对话框对象也封装着数据和HTML内容。不过,后者包含的DOM元素要多得多,因此尽可能地减少其实例个数更显重要。问题在于网页上可能会同时出现不止一个对话框。实际上,你无法确却知道究竟需要多少对话框。既然如此,那有怎能得知需要用到多少实例呢? 
 742  
 743  因为运行期间需要用到的实例的确却数目无法在开发期间确定,所以不能对实例的个数加以限制,而只能要用多少就创建多少,然后把它们保存起来供以后使用。这样就不用再次成熟期创建过程中的开销,而且所创建的实例的数目也刚好能满足需要。 
 744  在这个示例中,DialogBox对象的实现细节并不重要。你只需要知道,它是资源密集型的对象,应该尽量少实例化。该类的基本框架以及它实现的接口如下: 
 745  */ 
 746  
 747 // DialogBox class 
 748 var DialogBox = function () { 
 749     // implements DisplayModule 
 750     this.wrapper = document.createElement('section'); 
 751     this.wrapper.className = 'dialog_wrapper'; 
 752     this.header = document.createElement('header'); 
 753     this.header.className = 'dialog_header'; 
 754     this.content = document.createElement('div'); 
 755     this.content.className = 'dialog_body'; 
 756     this.footer = document.createElement('footer'); 
 757     this.footer.className = 'dialog_footer'; 
 758  
 759     this.wrapper.appendChild(this.header); 
 760     this.wrapper.appendChild(this.footer); 
 761     this.wrapper.insertBefore(this.content, this.footer); 
 762     this.wrapper.style.display = 'none'; 
 763     document.body.appendChild(this.wrapper); 
 764 }; 
 765 DialogBox.prototype = { 
 766     show: function (obj) { 
 767         // Sets the content and shows the dialog box 
 768         this.header.innerHTML = obj.header; 
 769         this.content.innerHTML = obj.content; 
 770         this.footer.innerHTML = obj.footer; 
 771  
 772         this.wrapper.style.display = 'block'; 
 773     }, 
 774     hide: function () { 
 775         // Hides the dialog box 
 776         this.wrapper.style.display = 'none'; 
 777     }, 
 778     status: function () { 
 779         // Returns 'visible' or 'hidden' 
 780         var value = this.wrapper.style.display; 
 781         if (!value) { 
 782             if (document.defaultView && document.defaultView.getComputedStyle) { 
 783                 var css = document.defaultView.getComputedStyle(this.wrapper, null); 
 784                 value = css ? css.display : null; 
 785             } else if (this.wrapper.currentStyle) { 
 786                 value = this.wrapper.currentStyle.display; 
 787             } 
 788         } 
 789         return value === 'none' ? 'hidden' : 'visible'; 
 790     } 
 791 }; 
 792  
 793 /* 
 794  控制享元数量的管理器。改管理器需要三个部件:一个用来显示对话框的方法,一个用来检查当前网页上正在使用的对话框的数目的方法,以及一个用来保存所生成的对话框的数据结构。我们用一个单体来包装这些部件,以确保管理器的唯一性: 
 795  */ 
 796 // DialogBox class 
 797 var DialogBox = function () { 
 798     // implements DisplayModule 
 799     this.wrapper = document.createElement('section'); 
 800     this.wrapper.className = 'dialog_wrapper'; 
 801     this.header = document.createElement('header'); 
 802     this.header.className = 'dialog_header'; 
 803     this.content = document.createElement('div'); 
 804     this.content.className = 'dialog_body'; 
 805     this.footer = document.createElement('footer'); 
 806     this.footer.className = 'dialog_footer'; 
 807  
 808     this.wrapper.appendChild(this.header); 
 809     this.wrapper.appendChild(this.footer); 
 810     this.wrapper.insertBefore(this.content, this.footer); 
 811     this.wrapper.style.display = 'none'; 
 812     document.body.appendChild(this.wrapper); 
 813 }; 
 814 DialogBox.prototype = { 
 815     show: function (obj) { 
 816         // Sets the content and shows the dialog box 
 817         this.header.innerHTML = obj.header; 
 818         this.content.innerHTML = obj.content; 
 819         this.footer.innerHTML = obj.footer; 
 820  
 821         this.wrapper.style.display = 'block'; 
 822     }, 
 823     hide: function () { 
 824         // Hides the dialog box 
 825         this.wrapper.style.display = 'none'; 
 826     }, 
 827     state: function () { 
 828         // Returns 'visible' or 'hidden' 
 829         var value = this.wrapper.style.display; 
 830         if (!value) { 
 831             if (document.defaultView && document.defaultView.getComputedStyle) { 
 832                 var css = document.defaultView.getComputedStyle(this.wrapper, null); 
 833                 value = css ? css.display : null; 
 834             } else if (this.wrapper.currentStyle) { 
 835                 value = this.wrapper.currentStyle.display; 
 836             } 
 837         } 
 838         return value === 'none' ? 'hidden' : 'visible'; 
 839     } 
 840 }; 
 841  
 842 /* 
 843  控制享元数量的管理器。改管理器需要三个部件:一个用来显示对话框的方法,一个用来检查当前网页上正在使用的对话框的数目的方法,以及一个用来保存所生成的对话框的数据结构。我们用一个单体来包装这些部件,以确保管理器的唯一性: 
 844  */ 
 845 // DialogBoxManager singleton 
 846 var DialogBoxManager = (function () { 
 847     // Stroes created instances 
 848     var created = []; 
 849  
 850     return { 
 851         displayDialogBox: function (obj) { 
 852             // Find the number currently in use 
 853             var inUse = this.numberInUse(); 
 854             if (inUse === created.length) { 
 855                 // Augment it if need be 
 856                 created.push(this.createDialogBox()); 
 857             } 
 858             // show the dialog box 
 859             created[inUse].show(obj); 
 860         }, 
 861         createDialogBox: function () { 
 862             // Factory method 
 863             return new DialogBox(); 
 864         }, 
 865         numberInUse: function () { 
 866             var inUse = 0; 
 867             for (var i = 0, len = created.length; i < len; i++) { 
 868                 if (created[i].state() === 'visible') { 
 869                     inUse++; 
 870                 } 
 871             } 
 872             return inUse; 
 873         } 
 874     }; 
 875 })(); 
 876  
 877 DialogBoxManager.displayDialogBox({ 
 878     header: '<h3>title1</h3>', 
 879     content: '<div>this is a content</div>', 
 880     footer: '<div>this is a footer</div>' 
 881 }); 
 882  
 883  
 884 /* 
 885  这个管理器把已经创建出来的对话框对象保存在数组created中,以便于重用。numberInUse方法用于获取现有DialogBox对象中当前正被使用的对象的个数,它通过检查DialogBox对象的状态判断其是否正被使用。displayDialogBox方法会先检查这个数字是否等于数组的长度,并且只有在不能重用现有实例的情况下才创建新实例。 
 886  
 887  这个示例比工具提示那个要复杂一点。总结起来就是:通过把外在数据从资源密集型对象剥离以实现对这种对象的重用;用一个管理器控制对象的个数并保存外在数据,所生成的实例的个数应该刚好够用,并且在实例化开销较大的情况下,这些实例应被保存起来供以后重用。这种技术类似于服务端语言中的SQL连接池。在后一种技术中,仅当现有连接都在使用当中时才会创建新连接。 
 888  */ 
 889  
 890  
 891 (function(){ 
 892  
 893     /** 
 894      * 利用享元实现简单的引用计数和垃圾回收 TODO 
 895      * 
 896      * 实现引用计数的基本思路 
 897      * 要实现引用计数,就在享元工厂中定义一个Map,它的key值与缓存享元对象的key是一样的,而value就是被引用的次数,这样当外部每次获取该享元的时候,就把对应的引用计数取出来加上1,然后再记录回去。 
 898      * 
 899      * 实现垃圾回收的基本思路 
 900      * 1)为了确定哪些是垃圾,一个简单的方案,定义一个缓存对象的配置对象,在这个对象中描述了缓存的开始时间和最长不被使用的时间,这个时候判断是否垃圾的计算公式如下:当前的时间 - 缓存的开始时间 >= 最长不被使用的时间。当然,每次这个对象被使用的时候,就把那个缓存开始时间更新为使用时的当前时间,也就是说如果一直有人用的话,这个对象是不会被判断为垃圾。 
 901      * 2)何时回收的问题,当然是判断出来是垃圾了就可以回收了。 
 902      * 3)怎么回收?直接从缓存的Map对象中删除相应的对象,让这些对象没有引用的地方,那么这些对象就可以等着被回收了。 
 903      */ 
 904  
 905     // 描述享元对象缓存的配置对象 
 906     function CacheConfModel(){ 
 907         // 缓存开始计时的开始时间 
 908         this.beginTime = null; 
 909         this.durableTime = null; 
 910         // 缓存对象需要被永久存储,也就是不需要从缓存中删除 
 911         this.forever = false; 
 912     } 
 913  
 914     var flyweightFactory = { 
 915         fsMap: {}, 
 916         cacheConfMap: {}, 
 917         countMap: {}, 
 918         DURABLE_TIME: 6 * 1000, 
 919         init: function(){ 
 920             clearCache(); 
 921         }, 
 922         getUserTimes: function(key){ 
 923             var count = this.countMap[key]; 
 924             return count || 0; 
 925         }, 
 926         getFlyweight: function(key){ 
 927             var f = this.fsMap[key], cm; 
 928  
 929             if(f == null){ 
 930                 f = new AuthorizationFlyweight(key); 
 931                 this.fsMap[key] = f; 
 932                 this.countMap[key] = 1; 
 933  
 934                 cm = new CacheConfModel(); 
 935                 cm.beginTime = Date.now(); 
 936                 cm.forever = false; 
 937                 cm.durableTime = this.DURABLE_TIME; 
 938  
 939                 this.cacheConfMap[key] = cm; 
 940             } else { 
 941                 cm = this.cacheConfMap[key]; 
 942                 cm.beginTime = Date.now(); 
 943                 this.cacheConfMap[key] = cm; 
 944                 this.countMap[key]++; 
 945             } 
 946  
 947             return f; 
 948         }, 
 949         removeFlyweight: function(key){ 
 950             delete this.fsMap[key]; 
 951             delete this.cacheConfMap[key]; 
 952             delete this.countMap[key]; 
 953         } 
 954     }; 
 955  
 956     function UnsharedConcreteFlyweight(){ 
 957         this.list = []; 
 958     } 
 959     UnsharedConcreteFlyweight.prototype = { 
 960         add: function(flyweight){ 
 961             this.list.push(flyweight); 
 962         }, 
 963         match: function(securityEntity, permit){ 
 964             for(var i = 0; i < this.list.length; i++){ 
 965                 var f = this.list[i]; 
 966                 if(f.match(securityEntity, permit)) 
 967                     return true; 
 968             } 
 969  
 970             return false; 
 971         } 
 972     }; 
 973  
 974     function clearCache(){ 
 975         setInterval(function(){ 
 976             var tempSet = []; 
 977             var set = Object.keys(flyweightFactory.cacheConfMap); 
 978  
 979             for(var i = 0; i < set.length; i++){ 
 980                 var key = set[i]; 
 981                 var ccm = flyweightFactory.cacheConfMap[key]; 
 982  
 983                 if(Date.now() - ccm.beginTime >= ccm.durableTime){ 
 984                     tempSet.push(key); 
 985                 } 
 986             } 
 987  
 988             for(i = 0; i < tempSet.length; i++){ 
 989                 flyweightFactory.removeFlyweight(key); 
 990             } 
 991  
 992             console.log('now thread = ' + Object.keys(flyweightFactory.fsMap).length + ', fsMap = ' + Object.keys(flyweightFactory.fsMap)); 
 993         }, 1000); 
 994     } 
 995  
 996     var SecurityMgr = { 
 997         hasPermit: function(user, securityEntity, 
 998              permit){ 
 999             var col = this.queryByUser(user); 
1000  
1001             if(!col || col.length === 0){ 
1002                 console.log(user + '没有登录或是没有被分配任何权限'); 
1003                 return false; 
1004             } 
1005  
1006             for(var i = 0; i < col.length; i++){ 
1007                 var fm = col[i]; 
1008                 if(fm.match(securityEntity, permit)){ 
1009                     return true; 
1010                 } 
1011             } 
1012             return false; 
1013         }, 
1014         queryByUser: function(user){ 
1015             var col = []; 
1016  
1017             for(var i = 0; i < DataBase.length; i++){ 
1018                 var s = DataBase[i]; 
1019                 var ss = s.split(','); 
1020  
1021                 if(ss[0] === user){ 
1022                     var fm; 
1023  
1024                     if(ss[3] == 2){ 
1025                         fm = new UnsharedConcreteFlyweight(); 
1026                         var tempSs = DataBase[ss[1]]; 
1027  
1028                         for(var prop in tempSs){ 
1029                             var tempS = tempSs[prop]; 
1030                             fm.add(flyweightFactory.getFlyweight(tempS)); 
1031                         } 
1032                     } else { 
1033                         fm = flyweightFactory.getFlyweight(ss[1] + ',' + ss[2]) 
1034                     } 
1035  
1036                     col.push(fm); 
1037                 } 
1038             } 
1039  
1040             return col; 
1041         } 
1042     }; 
1043  
1044     // mock data 
1045     var DataBase = { 
1046         colDB: [ 
1047             '张三,人员列表,查看,1', 
1048             '李四,人员列表,查看,1', 
1049             '李四,操作薪资数据,,2' 
1050         ], 
1051         mapDB: { 
1052             '操作薪资数据': '' 
1053         } 
1054     }; 
1055  
1056     for (var i = 0; i < 3; i++) { 
1057         DataBase.push('张三' + i + ',人员列表,查看'); 
1058     } 
1059  
1060  
1061     new function(){ 
1062         var f1 = SecurityMgr.hasPermit('张三', '薪资数据', '查看'); 
1063         var f2 = SecurityMgr.hasPermit('李四', '薪资数据', '查看'); 
1064         var f3 = SecurityMgr.hasPermit('李四', '薪资数据', '修改'); 
1065  
1066         for(var i =0; i < 3; i++){ 
1067             SecurityMgr.hasPermit('张三' + i, '薪资数据', '查看'); 
1068         } 
1069  
1070         console.log('薪资数据,查看 被引用了' + flyweightFactory.getUserTimes('薪资数据,查看' + '')); 
1071         console.log('薪资数据,修改 被引用了' + flyweightFactory.getUserTimes('薪资数据,修改' + '')); 
1072         console.log('人员列表,查看 被引用了' + flyweightFactory.getUserTimes('人员列表,查看' + '')); 
1073     }; 
1074 }()); 
1075  
1076 /** 
1077  * 享元模式的适用场合 
1078  * 
1079  * 1.如果一个应用程序使用了大量的细粒度对象,可以使用享元模式来减少对象数量。 
1080  * 2.如果由于使用大量的对象,造成很大的存储开销,可以使用享元模式来减少对象水昂,并节约内存。 
1081  * 3.如果对象的大多数状态都可以转变为外部状态,比如通过计算得到,或是从外部传入等,可以使用享元模式来实现内部状态和外部状态的分离。 
1082  * 4.如果不考虑对象的外部状态,可以用相对较少的共享对象取代很多组合对象,可以使用享元模式来共享对象,然后组合对象来使用这些共享对象。 
1083  */ 
1084  
1085 /** 
1086  * 享元模式之利 
1087  * 
1088  * 减少对象数量,节省内存空间。 
1089  * 
1090  * 享元模式之弊 
1091  * 
1092  * 维护共享对象,需要额外开销。 
1093  * 
1094  * 你必须在运行效率和可维护性之间进行权衡,然而这种权衡正是工程学的精髓所在。享元模式适合的是系统资源已经用的差不多而且明显需要进行某种优化这样一类场合。这正是其利大于弊的时候。 
1095  * 
1096  * 
1097  * 相关模式 
1098  * 
1099  * 享元模式与单例模式 
1100  * 可以组合使用 
1101  * 通常情况下,享元模式中的工厂可以实现成为单例。另外,享元工厂中缓存的享元对象,都是单例的,可以看成是单例模式的一种变形控制。 
1102  * 
1103  * 享元模式与组合模式 
1104  * 可以组合使用 
1105  * 在享元模式中,存在不需要共享的享元实现,这些不需要共享的享元通常是对共享的享元对象的组合对象。也就是说,享元模式通常会和组合模式组合使用,来实现更复杂的对象层次结构。 
1106  * 
1107  * 享元模式与状态模式 
1108  * 可以组合使用 
1109  * 可以使用享元模式来共享状态模式中的状态对象。通常在状态模式中,会存在数量很大的,细粒度的状态对象,而且它们基本上都是可以重复使用的,都是用来处理某一个固定的状态的,它们需要的数据通常都是由上下文传入,也就是变化部分都分离出去了,所以可以用享元模式来实现这些状态对象。 
1110  * 
1111  * 享元模式与策略模式 
1112  * 可以组合使用 
1113  * 同状态模式。 
1114  */ 
1115 </script> 
1116 </body> 
1117 </html>

本文参考链接:https://www.cnblogs.com/webFrontDev/archive/2013/03/24/2978522.html