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:

 1 var TooltipManager = (function(){
 2     var storedInstance = null;
 3
 4     /*Tooltip class*/
 5     var Tooltip = function(){
 6         this.delayTimeout = null; // show tooltip timer
 7         this.delay = 500;  // 延时时长
 8
 9         //create the html
10         this.element = document.createElement("div");
11         this.element.style.display = "none";
12         this.element.style.position = "absolute";
13         this.element.className = "tooltip";
14         document.getElementsByTagName("body")[0].appendChild(this.element);
15     };
16
17     Tooltip.prototype = {
18         startDelay:function(e,text){
19             if(this.delayTimeout == null){
20                 var that = this;
21                 var x = e.clientX;
22                 var y = e.clientY;
23                 this.delayTimeout = setTimeout(function(){
24                     that.show(x,y,text);
25                 },this.delay);
26             }
27         },
28         show:function(x,y,text){
29             clearTimeout(this.delayTimeout);
30             this.element.style.left  = x + "px";
31             this.element.style.top = y + "px";
32             this.element.style.display = "block";
33             this.element.innerHTML = text;
34         },
35         hide:function(){
36             clearTimeout(this.delayTimeout);
37             this.delayTimeout = null;
38             this.element.style.display = "none";
39         }
40     };
41
42     return {
43         addTooltip:function(targetElement,text){
44             var tt = this.getToolTip();
45             targetElement.addEventListener("mouseover",function(e){tt.startDelay(e,text)});
46             targetElement.addEventListener("mouseout",function(e){tt.hide()});
47         },
48         getToolTip:function(){
49             if(null == storedInstance){
50                 storedInstance = new Tooltip();
51             }
52             return storedInstance;
53         }
54     }
55 })();

结果:

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

时间: 2024-10-28 23:30:58

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

浅谈js设计模式 — 享元模式

享元(flyweight)模式是一种用于性能优化的模式,"fly"在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象. 假设有个内衣工厂,目前的产品有 50种男式内衣和 50种女士内衣,为了推销产品,工厂决定生产一些塑料模特来穿上他们的内衣拍成广告照片. 正常情况下需要 50 个男模特和 50 个女模特,然后让他们每人分别穿上一件内衣来拍照.不使用享元模式的情况下,在程序里也许会这样写: var Model = function(sex, under

设计模式——享元模式

Flyweight 直译为蝇量.就其表示的模式来说,翻译成享元,确实是不错的 package designpattern.structure.flyweight; public interface Flyweight { void action(int arg); } package designpattern.structure.flyweight; public class FlyweightImpl implements Flyweight { public void action(int

8. 星际争霸之php设计模式--享元模式

题记==============================================================================本php设计模式专辑来源于博客(jymoz.com),现在已经访问不了了,这一系列文章是我找了很久才找到完整的,感谢作者jymoz的辛苦付出哦! 本文地址:http://www.cnblogs.com/davidhhuan/p/4248186.html============================================

[工作中的设计模式]享元模式模式FlyWeight

一.模式解析 Flyweight在拳击比赛中指最轻量级,即“蝇量级”或“雨量级”,这里选择使用“享元模式”的意译,是因为这样更能反映模式的用意.享元模式是对象的结构模式.享元模式以共享的方式高效地支持大量的细粒度对象. 享元模式:主要为了在创建对象时,对共有对象以缓存的方式进行保存,对外部对象进行单独创建 模式要点: 1.享元模式中的对象分为两部分:共性部分和个性化部分,共性部分就是每个对象都一致的或者多个对象可以共享的部分,个性化部分指差异比较大,每个类均不同的部分 2.共性部分的抽象就是此模

设计模式-享元模式

***********************************************声明****************************************************** 原创作品,出自 "晓风残月xj" 博客,欢迎转载,转载时请务必注明出处(http://blog.csdn.net/xiaofengcanyuexj). 由于各种原因,可能存在诸多不足,欢迎斧正! *******************************************

iOS设计模式——享元模式

公共交通(如公共汽车)已有一百多年的历史了.大量去往相同方向的乘客可以分担保有和经营车辆(如公共汽车)的费用.公共汽车有多个站台,乘客沿着路线在接近他们目的地的地方上下车.到达目的地的费用仅与行程有关.跟保有车辆相比,乘坐公共汽车要便宜得多.这就是利用公共资源的好处. 在面向对象软件设计中,我们利用公共对象不仅能节省资源还能提高性能.比方说,某个人物需要一个类的一百万个实例,但我们可以把这个类的一个实例让大家共享,而把某些独特的信息放在外部,节省的资源可能相当可观(一个实例与一百万个实例的差别)

设计模式——享元模式详解

0. 前言 写在最前面,本人的设计模式类博文,建议先看博文前半部分的理论介绍,再看后半部分的实例分析,最后再返回来复习一遍理论介绍,这时候你就会发现我在重点处标红的用心,对于帮助你理解设计模式有奇效哦~本文原创,转载请注明出处为SEU_Calvin的博客. 春运买火车票是一件疯狂的事情,同一时刻会有大量的查票请求涌向服务器,服务器必须做出应答来满足我们的购票需求.试想,这些请求包含着大量的重复,比如从A地到B地的车票情况,如果每次都重复创建一个车票查询结果的对象,那么GC任务将非常繁重,影响性能

C#设计模式-享元模式

前言 最近开始花点心思研究下设计模式,主要还是让自己写的代码可重用性高.保证代码可靠性.所谓设计模式,我找了下定义:是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.毫无疑问,设计模式于己于他人于系统都是多赢的:设计模式使代码编制真正工程化:设计模式是软件工程的基石脉络,如同大厦的结构一样. 为什么要提倡“Design Pattern(设计模式)”? 根本原因是为了代码复用,增加可维护性.因此这次我们来学习下设计模式,最后会通过C#语言来实现这些设计模式作为例子,深刻理解其中的

小菜学设计模式——享元模式

背景 如果一个应用程序中使用了大量的对象,而大量的这些对象造成了恨得的存储开销时就应该考虑这个新是设计模式:享元模式. 1.使用意图 最大限度地减少了尽可能与其他类似的对象多的数据共享内存的使用,换句话说就是通过共享对象达到系统内维护的对象数量减少从而降低了系统的开销.因为是细粒度的控制,所以享元模式不是控制整个实例共享,那为何不用单例呢?而是只是共享对象的部分,不共享的部分称为对象的外部状态,需要外部动态修改这个共享对象. 2.生活实例 围棋的棋子,如果用编程去实现的话,势必要new出很多实例