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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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
十天学会php之第五天
2006/10/09 PHP
基于php下载文件的详解
2013/06/02 PHP
浅析php工厂模式
2014/11/25 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
在视频前插入广告
2006/11/20 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python的Template使用指南
2014/09/11 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python制作图片缩略图
2019/04/30 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
C语言笔试集
2012/07/24 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
新年抽奖获奖感言
2014/03/02 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
单位婚育证明范本
2014/11/21 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android