<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<style>

    .tooltip {

        width:300px;

        height:300px;

        background:#f00;

    }

</style>

<script>

    var TooltipManager = (function(){

        var storedInstance = null;

        var Tooltip = function(){

            this.delayTimeout = null;

            this.delay = 1500;

            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.delayTimeout = null;

                this.element.innerHTML = text;

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

                this.element.style.top = (y+20) + 'px';

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

            },

            hide : function(){

                clearTimeout(this.delayTimeout);

                this.delayTimeout = null;

                this.elements.style.display = 'none';

            }

        };

        return {

            addTooltip : function(targetElement,text){

                var tt = this.getTooltip();

                addEvent(targetElement,'mouseover',function(e){ tt.startDelay(e,text)});

                addEvent(targetElement,'mouseout',function(e){ tt.hide()})

            },

            getTooltip : function(){

                if(storedInstance == null){

                    storedInstance = new Tooltip();

                };

                return storedInstance;

            }

        }

    }())

</script>

</body>

</html>

直接上代码了

JS所谓的享元模式-->的更多相关文章

  1. Javascript设计模式理论与实战：享元模式

    享元模式不同于一般的设计模式,它主要用来优化程序的性能,它最适合解决大量类似的对象而产生的性能问题.享元模式通过分析应用程序的对象,将其解析为内在数据和外在数据,减少对象的数量,从而提高应用程序的性能 ...

  2. js设计模式-享元模式

    享元模式实际上是一种优化模式,目的在于提高系统的性能和代码的效率. 使用享元模式的条件:最重要的条件是网页中必须使用了大量资源密集型对象,如果只会用到了少许这类对象,那么这种优化并不划算.第二个条件是 ...

  3. JS常用的设计模式(16)—— 享元模式

    享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本<JavaScript权威指南>. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的 ...

  4. js设计模式（8）---享元模式

    0.前言 今天总结了四种设计模式,到现在有点精疲力尽了,但是还是有不少收获,很开心自己有掌握了新的东西,今天变得有了价值. 1.使用条件 1.1.网页中使用了大量资源密集型的对象: 1.2.这些对象中 ...

  5. JS设计模式（9）享元模式

    什么是享元模式? 定义:享元模式是一种优化程序性能的模式,本质为减少对象创建的个数. 主要解决:在有大量对象时,有可能会造成内存溢出,我们把其中共同的部分抽象出来,如果有相同的业务请求,直接返回在内存 ...

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

    享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象. 假设有个内衣工厂,目前的产品有 50种男式内 ...

  7. js享元模式

    享元模式(Flyweight),运用共享技术有效地支持大量细粒度的对象. 内部状态与外部状态 内部状态存储于对象内部. 内部状态可以被一些对象共享 内部状态独立于具体的场景,通常不会改变 外部状态取决 ...

  8. javascript 设计模式-----享元模式

    四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车.的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车.在代码里面也是 ...

  9. JAVA 设计模式 享元模式

    用途 享元模式 (Flyweight) 运用共享技术有效地支持大量细粒度的对象. 享元模式是一种结构型模式. 结构

随机推荐

  1. uva 10976 fractions again（水题）——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB3gAAAM+CAIAAAB31EfqAAAgAElEQVR4nOzdO7KtPJum69GEpAcVQQ ...

  2. docker containerd中的容器操作

    containerd的中的各种操作都是通过Task来进行的,因此对于容器的create, start, delete等等操作其实都是一个个的Task而已. Task的数据结构如下所示: type Ta ...

  3. ckplayer播放器去掉右边的开关灯分享插件

    在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...

  4. SAP中主数据和单据的删除

    在SAP实际操作的过程中,有些主数据或者单据需要删除,但是删除的方法却不尽相同,所以笔者今天总结了下,供大家参考. 1,用T-Code去删除 例如我们要删除某个物料,我们可以用T-Code MM06 ...

  5. ArcGis 计算线段长度

            void CalcLength(string tmpshp)         {             var expression = "float(!SHAPE.LEN ...

  6. typicalapp.js

    /** * 1.找出数字数组中最大的元素(使用Math.max函数) 2.转化一个数字数组为function数组(每个function都弹出相应的数字) 3.给object数组进行排序(排序条件是每个 ...

  7. 区块链技术(一)：Truffle开发入门

    以太坊是区块链开发领域最好的编程平台,而truffle是以太坊(Ethereum)最受欢迎的一个开发框架,这是我们第一篇区块链技术文章介绍truffle的原因,实战是最重要的事情,这篇文章不讲原理,只 ...

  8. 对兼容ie浏览器所遇到的问题及总结

    1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规 ...

  9. ffmpeg常用基本命令(转)

    [FFmpeg]FFmpeg常用基本命令 1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an output_file_video //分离视频流 ffmpe ...

  10. jquery-lazyload延迟加载图片 及 加载顺序 bug 修复

    jquery-lazyload延迟加载图片   代码修改片段 function update() { var counter = 0; /**fix by weiyj start***/ elemen ...