JavaScript享元模式原理与用法实例详解


Posted in Javascript onMarch 09, 2020

本文实例讲述了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享元模式原理与用法实例详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
You might like
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JS delegate与live浅析
2013/12/21 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 初始化多维数组代码
2008/09/06 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python绘制热力图heatmap
2020/03/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python实现控制台打印的方法
2019/01/12 Python
python 实现敏感词过滤的方法
2019/01/21 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python 实现try重新执行
2019/12/21 Python
python3的pip路径在哪
2020/06/23 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
《春天来了》教学反思
2014/04/07 职场文书
借款协议书
2014/09/16 职场文书
护士先进个人总结
2015/02/13 职场文书