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的inputlimiter 实现字数限制功能
May 30 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php post换行的方法
2020/02/03 PHP
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js下载文件并修改文件名
2017/05/08 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
参观考察邀请函范文
2014/01/29 职场文书
优秀学生事迹材料
2014/02/08 职场文书
经典商业广告词
2014/03/13 职场文书
征婚广告词
2014/03/17 职场文书
《雪儿》教学反思
2014/04/17 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
建党伟业电影观后感
2015/06/01 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL