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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jquery实现倒计时效果
Dec 14 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JavaScript中Object基础内部方法图
Feb 05 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 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 结果集的分页实现代码
2009/03/10 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
毕业生自荐书
2013/12/18 职场文书
财经学院自荐信范文
2014/02/02 职场文书
团队经理竞聘书
2014/03/31 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
安全生产标语大全
2014/10/06 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL