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.将原来保存在一个对象中的数据分开保存在两个对象中。

js设计模式(8)---享元模式的更多相关文章

  1. 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern)

    原文:乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) 作者:weba ...

  2. python设计模式之享元模式

    python设计模式之享元模式 由于对象创建的开销,面向对象的系统可能会面临性能问题.性能问题通常在资源受限的嵌入式系统中出现,比如智能手机和平板电脑.大型复杂系统中也可能会出现同样的问题,因为要在其 ...

  3. JS常用的设计模式(16)—— 享元模式

    享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本<JavaScript权威指南>. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的 ...

  4. 【GOF23设计模式】享元模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_享元模式.享元池.内部状态.外部状态.线程池.连接池 package com.test.flyweight; /** * ...

  5. 设计模式之享元模式(Flyweight)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  6. Head First设计模式之享元模式(蝇量模式)

    一.定义 享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式. ...

  7. 【Unity3D与23种设计模式】享元模式(Flyweight)

    GoF中定义: "使用共享的方式,让一大群小规模对象能更有效地运行" 享元模式一般应用在游戏角色属性设置上 游戏策划需要通过"公式计算"或者"实际测试 ...

  8. Java进阶篇设计模式之七 ----- 享元模式和代理模式

    前言 在上一篇中我们学习了结构型模式的组合模式和过滤器模式.本篇则来学习下结构型模式最后的两个模式, 享元模式和代理模式. 享元模式 简介 享元模式主要用于减少创建对象的数量,以减少内存占用和提高性能 ...

  9. Java设计模式之七 ----- 享元模式和代理模式

    前言 在上一篇中我们学习了结构型模式的组合模式和过滤器模式.本篇则来学习下结构型模式最后的两个模式, 享元模式和代理模式. 享元模式 简介 享元模式主要用于减少创建对象的数量,以减少内存占用和提高性能 ...

  10. 【设计模式】享元模式(Flyweight)

    摘要: 1.本文将详细介绍享元模式的原理和实际代码中特别是Android系统代码中的应用. 纲要: 1. 引入享元模式 2. 享元模式的概念及优缺点介绍 3. 享元模式在Android源码中的应用 1 ...

随机推荐

  1. java 删除字符串中的反斜杠\

    Java中有时候会打印出来会含有反斜杠(\)的字符串,我们需要删除时,可以使用 replace() 或 replaceAll() 但是要注意的是replaceAll()里面用的是正则表达式,所以一个斜 ...

  2. Hadoop从2.2.0到2.7

    Hadoop2.2.0 GA release 通用版本,Hadoop2.2.0就是一个通用版本 Hadoop2.2.0是从Hadoop1.1.0升级过来的,增加了以下特性: 1.增加了YARN: 2. ...

  3. Docker 选项和命令

    选项 -D=true|false 使用 debug 模式.默认为 false. -H, --host=[unix:///var/run/docker.sock]: tcp://[host:port]来 ...

  4. Xcode代码格式化教程,可自定义样式

    来源:iOS_小松哥 链接:http://www.jianshu.com/p/a725e24d7835 为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代 ...

  5. Clairewd’s message

    Problem Description Clairewd is a member of FBI. After several years concealing in BUPT, she interce ...

  6. 《Cortex-M0权威指南》之体系结构---程序映像和启动流程

    转载请注明来源:cuixiaolei的技术博客 我们先来看看程序映像. 通常,Cortex-M0处理器的程序映像时从地址0x00000000处开始的. 程序映像开始处时向量表,其中包含了异常的其实地址 ...

  7. [转]如何下载tizen源码(图文教程)?

    http://blog.csdn.net/flydream0/article/details/8996654 当前tizen发布的最新源码版本是2.1,本文将以图文教程讲述如何下载tizen源码,关于 ...

  8. 转 : React Native 开发之 IDE 选型和配置

    转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...

  9. CS异步下载

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. 在sql设计中没法修改表结构

    在做练习的时候经常表没设计好,后来有要去数据库修改表结构但是没词用界面修改的时候都会提示要保存 转自http://www.57xue.com/ItemView/Sql/2016061600160.ht ...