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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
JS实现简易留言板(节点操作)
Mar 16 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Laravel find in set排序实例
2019/10/09 PHP
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python装饰器深入学习
2018/04/06 Python
python实现音乐下载器
2018/04/15 Python
分析python请求数据
2018/08/19 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python读取stdin方法实例
2019/05/24 Python
python实时监控logstash日志代码
2020/04/27 Python
python如何写出表白程序
2020/06/01 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
面料业务员岗位职责
2013/12/26 职场文书
社团文化节邀请函
2014/01/10 职场文书
个人现实表现材料
2014/02/04 职场文书
节水标语大全
2014/06/11 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
秋季运动会加油词
2015/07/18 职场文书
班主任寄语2016
2015/12/04 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电