JavaScript设计模式之享元模式实例详解


Posted in Javascript onJanuary 17, 2019

本文实例讲述了JavaScript设计模式之享元模式。分享给大家供大家参考,具体如下:

通过两个例子的对比来凸显享元模式的特点:享元模式是一个为了提高性能(空间复杂度)的设计模式,享元模式可以避免大量非常相似类的开销。

第一实例,没有使用享元模式,计算所花费的时间和空间使用程度。

要求为:有一个城市要进行汽车的登记

(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;
    this.getMake = function(){
      return this.make;
    }
}

(2)使用装饰者模式--计算函数的耗时

//装饰者 .. 计算函数的耗时
var simpleProfiler = function(componet){
    this.componet = componet;
    this.action = function(methodName){
      var self = this;
      var method = componet[methodName];
      //如果是函数那就进行装饰
      if(typeof method == "function"){
        var startDate = new Date().getTime();//开始时间
        method.apply(self.componet,arguments);
        var endDate = new Date();//结束时间
        alert(endDate - startDate);
      }
    }
}

(3)具体的实例,现有4150000辆车需要登记

var ca = new Array();
function addCar(){
    this.begin = function(){
      for (var i = 0; i < 4150000; i++) {
        ca.push(new Car("BMW","宝马","2017-10-18",
          "","GBMW88","2017-10-19"));
      }
    }
}
new simpleProfiler(new addCar()).action("begin")

第二个例子:使用享元模式

(1)汽车类

/**
* 制造商
* 型号
* 拥有者
* 车牌号码
* 最近一次登记日期
*/
var Car = function(make,model,year){
    this.make = make;
    this.model = model;
    this.year = year;
    this.getMake = function(){
      return this.make;
    }
}

(2)单例模式的简单工厂

//单例模式的简单工厂
  var myCarInfo = function(){
    this.createCar = function(make,model,year,owner,tag,renewDate){
      var c = carInfoFactory(make,model,year);
      c["owner"] = owner;
      c["tag"] = tag;
      c["renewDate"] = renewDate;
      return c;
    }
  }
  var carInfoFactory = (function(){
    var carInfo = {};
    return function(make,model,year){
      if(carInfo[make+model+year]){
        return carInfo[make+model+year];
      }else{
        var newCar = new Car(make,model,year);
        carInfo[make+model+year] = newCar;
        return newCar;
        a
      }
    }
  })();

(3)现有4150000辆车需要登记

var test = new myCarInfo();
var startDate = new Date().getTime();
var ca = new Array();
for (var i = 0; i < 4150000; i++) {
    ca.push(test.createCar("BMW","宝马","2017-10-18",
          "","GBMW88","2017-10-19"))
}
var endDate = new Date();
alert(endDate - startDate);

从上述两个例子可以知道,第一个例子没有使用享元模式相对于第二个使用享元模式耗时间少,但空间消耗大,第二个耗时多,但空间消耗小。

第一种情况图解:每次都生成相同的实例

JavaScript设计模式之享元模式实例详解

第二种情况:内在部分(不变)+外部状态(变化)图解

JavaScript设计模式之享元模式实例详解

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 #Javascript
jquery获取img的src值实例介绍
Jan 16 #jQuery
js中int和string数据类型互相转化实例
Jan 16 #Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 #Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 #Javascript
js删除数组中某几项的方法总结
Jan 16 #Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 #Javascript
You might like
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JS Array对象入门分析
2008/10/30 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python利用微信公众号实现报警功能
2018/06/10 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python安装whl文件过程图解
2020/02/18 Python
python logging设置level失败的解决方法
2020/02/19 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
《会变的花树叶》教学反思
2014/02/10 职场文书
家长会标语
2014/06/24 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
新闻稿件写作范文
2015/07/18 职场文书
校园广播稿范文
2015/08/19 职场文书
经销商会议开幕词
2016/03/04 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技