js设计模式-享元模式

享元模式实际上是一种优化模式，目的在于提高系统的性能和代码的效率。

使用享元模式的条件：最重要的条件是网页中必须使用了大量资源密集型对象，如果只会用到了少许这类对象，那么这种优化并不划算。第二个条件是这些对象中所保存的数据至少有一部分能被转换为外在的数据。最后一个条件是，将外在的数据分离出去以后，独一无二的对象的数目相对减少。

使用享元模式的步骤：1、将所有外在的数据从目标类剥离。2、创建一个用来控制该类的实例化工厂。3、创建一个用来保存外在数据的管理器。

实例：工具提示对象。（Tooltip）

先看一个没有用到享元模式的例子。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>工具提示对象</title>

        <style type="text/css">

            .test-div{

                width:100px; heiht:30px;text-align:center; line-height: 30px; cursor: pointer;border:1px solid #101010; margin-top:20px;

            }

            .tooltip{

                height:20px; line-height: 20px; border: 1px solid #ccc; border-radius: 2px; font-family: monospace; font-size: 12px;

                background: #ddd; padding:2px 5px;

            }

        </style>

    </head>

    <body>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

    </body>

</html>

<script type="text/javascript">

    window.onload = function(){

        var aDiv = document.getElementsByTagName("div");

        for(var i = 0 , len = aDiv.length;i<len;i++){

            new Tooltip(aDiv[i],"this is a div, the index is:" + i);

        }

    }

    var Tooltip = function(targetElement,text){

        this.target = targetElement;

        this.text = text;

        this.delayTimeout = null; // show tooltip timer

        this.delay = 500;  // 延时时长

        //create the html

        this.element = document.createElement("div");

        this.element.style.display = "none";

        this.element.style.position = "absolute";

        this.element.className = "tooltip";

        document.getElementsByTagName("body")[0].appendChild(this.element);

        this.element.innerHTML = this.text;

        //attach the events

        var that = this;

        this.target.addEventListener("mouseover",function(e){

            that.startDelay(e);

        });

        this.target.addEventListener("mouseout",function(){

            that.hide();

        })

    };

    Tooltip.prototype = {

        startDelay:function(e){

            if(this.delayTimeout == null){

                var that = this;

                var x = e.clientX;

                var y = e.clientY;

                this.delayTimeout = setTimeout(function(){

                    that.show(x,y);

                },this.delay);

            }

        },

        show:function(x,y){

            clearTimeout(this.delayTimeout);

            this.element.style.left  = x + "px";

            this.element.style.top = y + "px";

            this.element.style.display = "block";

        },

        hide:function(){

            clearTimeout(this.delayTimeout);

            this.delayTimeout = null;

            this.element.style.display = "none";

        }

    }

</script>

结果：把鼠标放到每个div上以后，用debug查看element元素，会发现生成很多tooltip的div。

使用享元模式以后：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>工具提示对象</title>

        <style type="text/css">

            .test-div{

                width:100px; heiht:30px;text-align:center; line-height: 30px; cursor: pointer;border:1px solid #101010; margin-top:20px;

            }

            .tooltip{

                height:20px; line-height: 20px; border: 1px solid #ccc; border-radius: 2px; font-family: monospace; font-size: 12px;

                background: #ddd; padding:2px 5px;

            }

        </style>

    </head>

    <body>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

        <div class="test-div">test div</div>

    </body>

</html>

<script type="text/javascript" src="ToolTip.js"></script>

<script type="text/javascript">

    window.onload = function(){

        var aDiv = document.getElementsByTagName("div");

        for(var i = 0 , len = aDiv.length;i<len;i++){

            TooltipManager.addTooltip(aDiv[i],"this is a div, the index is:" + i);

        }

    }

</script>

对应的js:

 var TooltipManager = (function(){

     var storedInstance = null;

     /*Tooltip class*/

     var Tooltip = function(){

         this.delayTimeout = null; // show tooltip timer

         this.delay = 500;  // 延时时长

         //create the html

         this.element = document.createElement("div");

         this.element.style.display = "none";

         this.element.style.position = "absolute";

         this.element.className = "tooltip";

         document.getElementsByTagName("body")[0].appendChild(this.element);

     };

     Tooltip.prototype = {

         startDelay:function(e,text){

             if(this.delayTimeout == null){

                 var that = this;

                 var x = e.clientX;

                 var y = e.clientY;

                 this.delayTimeout = setTimeout(function(){

                     that.show(x,y,text);

                 },this.delay);

             }

         },

         show:function(x,y,text){

             clearTimeout(this.delayTimeout);

             this.element.style.left  = x + "px";

             this.element.style.top = y + "px";

             this.element.style.display = "block";

             this.element.innerHTML = text;

         },

         hide:function(){

             clearTimeout(this.delayTimeout);

             this.delayTimeout = null;

             this.element.style.display = "none";

         }

     };

     return {

         addTooltip:function(targetElement,text){

             var tt = this.getToolTip();

             targetElement.addEventListener("mouseover",function(e){tt.startDelay(e,text)});

             targetElement.addEventListener("mouseout",function(e){tt.hide()});

         },

         getToolTip:function(){

             if(null == storedInstance){

                 storedInstance = new Tooltip();

             }

             return storedInstance;

         }

     }

 })();

结果：

结论：享元模式好处不言而喻。

js设计模式-享元模式的更多相关文章

浅谈js设计模式 — 享元模式
享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象. 假设有个内衣工厂,目前的产品有 50种男式内 ...
8. 星际争霸之php设计模式--享元模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
C++设计模式——享元模式
本文版权归果冻说所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.如果这篇文章对你有帮助,你可以请我喝杯咖啡. » 本文链接:http:// ...
java设计模式——享元模式
一. 定义与类型定义:提供了减少对象数量从而改善应用所需的对象结构的方式,运用共享技术有效地支持大量细粒度的对象类型:结构性二. 使用场景 (1) 常常应用于系统底层的开发,以便解决系统的性能 ...
【设计模式】Java设计模式 - 享元模式
Java设计模式 - 享元模式不断学习才是王道继续踏上学习之路,学之分享笔记总有一天我也能像各位大佬一样原创作品,更多关注我CSDN: 一个有梦有戏的人准备将博客园.CSDN一起记录分享自己 ...
JAVA 设计模式享元模式
用途享元模式 (Flyweight) 运用共享技术有效地支持大量细粒度的对象. 享元模式是一种结构型模式. 结构
[工作中的设计模式]享元模式模式FlyWeight
一.模式解析 Flyweight在拳击比赛中指最轻量级,即“蝇量级”或“雨量级”,这里选择使用“享元模式”的意译,是因为这样更能反映模式的用意.享元模式是对象的结构模式.享元模式以共享的方式高效地支持 ...
javascript 设计模式-----享元模式
四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车.的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车.在代码里面也是 ...
深入浅出设计模式——享元模式（Flyweight Pattern）
模式动机面向对象技术可以很好地解决一些灵活性或可扩展性问题,但在很多情况下需要在系统中增加类和对象的个数.当对象数量太多时,将导致运行代价过高,带来性能下降等问题.享元模式正是为解决这一类问题而诞生 ...

随机推荐

八：前端---Vue下的国际化处理
1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...
WM消息大全
消息名消息值说明 WM_CREATE 0x0001 应用程序创建一个窗口 WM_DESTROY 0x0002 一个窗口被销毁 WM_MOVE 0x0003 移动一个窗口 WM_SIZE 0x000 ...
点云处理软件Pointscene
转载于PCL中国:点云处理软件Pointscene 软件官网:https://pointscene.com/ 笔者评: Pointscene是目前的点云处理软件之一,其主要是操作简单直观 ...
centos7下安装python3 解决openssl等一系列问题
最近折腾了下centos7,发现按正常方法安装python3.7后面会出现各种操蛋的问题. 主要的问题有三个,openssl版本过低,'_ctypes'缺失,以及安装后sqlite3缺失.下面我会贴出 ...
怎样批量删除PDF文件中的注释
日常我们在阅读一些PDF文章时候,我们会发现有些PDF文章带有非常多的注释,显得非常不美观,影响了阅读体验.那么PDF文章里的批注应该怎么进行删除呢?怎样批量删除PDF文件中的注释? 操作教程: ...
用了那么多项目管理工具，还是CORNERSTONE这款最好用
在与软件开发有关的项目,往往会出现很难管理情况.许多事情都需提前计划.控制与管理,所以许多项目经理很容易迷失在计划的过程中.幸运的是,市场上提供了各种各样的项目管理工具.但不幸的是,工具实在是太多了. ...
Windows Server 2008 R2 搭建DNS服务器（转）
Windows Server 2008 R2 搭建DNS服务器将本机IP设为首选DNS服务器的地址在dos 下分别输入 nslookup www.mydns.com 和 nslookup 192.16 ...
[系统资源攻略]IO第二篇
IO 磁盘通常是计算机最慢的子系统,也是最容易出现性能瓶颈的地方,因为磁盘离 CPU 距离最远而且 CPU 访问磁盘要涉及到机械操作,比如转轴.寻轨等.访问硬盘和访问内存之间的速度差别是以数量级来计算 ...
GDI 边框绘制函数（8）
绘制矩形调用 Rectangle 函数可以绘制一个矩形(它将填充这个矩形): BOOL Rectangle( HDC hdc, // 设备环境句柄 int nLeftRect, // 左边线的位置 ...
51nod1183 编辑距离【动态规划】
编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除 ...

js设计模式-享元模式

js设计模式-享元模式的更多相关文章

随机推荐

热门专题