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. flume1.5.2安装与简介

    关于flume的简介看参考:http://www.aboutyun.com/thread-7415-1-1.html 其实一张图就简单明了了 简单安装: 1.下载解压 ... 2.配置JDK,flum ...

  2. C#基础--局部类型Partial

    局部类型 原本来在同一个命名(namespace)空间下  是不允许相同的类(class)名存在的  但是partial关键字可以允许在同一个namespace下有想通过的类名存在 写法 下面的两个不 ...

  3. Android 高级UI设计笔记18:实现圆角图片

    1. 下面我们经常在APP中看到的圆角图片,如下: 再比如:微信聊天会话列表的头像是圆角的. 2. 下面分析一个Github的经典: (1)Github库地址: https://github.com/ ...

  4. UILabel的简单用法和实际操作

    1.UILabel   **//设置文字 label.text = @"欢迎收看灌篮高手,我是安溪教练";**//设置文字颜色label.textColor = [UIColor  ...

  5. ionic 中使用ion-slide-box

    ion-slide-box 用法: <ion-slide-box class="slide" auto-play="true" does-continue ...

  6. Evaluation

    precision是tp/(tp+fp),检索结果中正确的比例 recall是tp/(tp+fn),所有需要被检索出来的比例 1.真实情况:恶性,检查结果:恶性,这种情况就叫做:true positv ...

  7. MVC 菜鸟学习记录1

    Asp.Net MVC 模式是一种表现模式.它将web应用程序分成三个主要组件即:    Model.View.Controller M:Model 主要是存储或者是处理数据的组件 Model其实是实 ...

  8. MVC中的Routing

    Routing ASP.NET Routing模块的责任是将传入的浏览器请求映射为特有的MVC controller actions. public static void RegisterRoute ...

  9. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  10. ASP.Net上传中文文件乱码

    只要在Head中添加即可解决:<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />