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 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
React 父子组件通信的实现方法
Dec 05 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中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
浅谈关于iview表单验证的问题
2018/09/29 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python基于SMTP协议发送邮件
2019/05/31 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
工程部经理岗位职责
2013/12/08 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
小学作文评语大全
2014/04/21 职场文书
活动总结怎么写
2014/04/28 职场文书
欢迎家长标语
2014/10/08 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
竞聘书的秘诀
2019/04/02 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技