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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript中DOM详解
Apr 13 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
js实现开启密码大写提示
Dec 21 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
小程序清理本地缓存的方法
Aug 17 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程序设计中的MVC编程思想
2014/07/28 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
jstree的简单实例
2016/12/01 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Django框架视图函数设计示例
2019/07/29 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
行政部主管岗位职责
2013/12/28 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android