<!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. 转载：HttpClient使用详解

    原文地址:http://blog.csdn.net/wangpeng047/article/details/19624529 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自 ...

  2. selenium如何操作cookies实现免登录

    执行接口测试或者某些自动化测试时,为了避免每次访问接口都需要登录操作,可以用访问接口时,把cookies信息传过去. 思路是先登录一次页面,获取到cookies信息,把cookies信息保存到本地文件 ...

  3. CSS3 Filter详解（改变模糊度 亮度 透明度等方法）

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  4. TestLink学习七：TestLink测试用例Excel转换XML工具

    TestLink对于测试用例的管理来说,是蛮强大的,但是在导入导出这块,功能有点弱,本文针对测试用例的导入,转载了一个Excel转换成xml工具. 1.根据到处的测试用例xml,定义一下我的Excel ...

  5. Mybaits学习总结1

    http://www.cnblogs.com/xdp-gacl/p/4261895.html 参考了这篇文章搭建了Mybaits环境,原作者有些地方没有标注使用某种编码,我是自学SQL的,所以深知编码 ...

  6. AMAP

    ViewController.m #import "ViewController.h" //地图显示需要的头文件 #import <MAMapKit/MAMapKit.h&g ...

  7. 如何替换orcl实例下的四个数据库

    1,drop 数据库对应的用户 2,创建新的表空间 新的用户 3,导入新的数据库 imp grid_sysdb/sagis@klmy file=F:\data\addr_interestpoint.d ...

  8. JS原型-语法甘露

    初看原型 JS的所有函数都有一个prototype属性,这个prototype属性本身又是一个object类型的对象. prototype提供了一群同类对象共享属性和方法的机制. 将一个基类的实例作为 ...

  9. JS案例之1——pager 分页

    学习JS大半年之久,第一次自己尝试写一些小插件,写法参考网上某位牛人写代码的思路. 此处代码写的是静态分页.如果需动态分页,还可以修改下.第一次写,还有很多地方可以优化.希望各位大牛踊跃拍砖. 预览图 ...

  10. ListView中多个EditText设置焦点 多次点击异常报错

    08-17 18:23:09.825: ERROR/AndroidRuntime(1608): FATAL EXCEPTION: main 08-17 18:23:09.825: ERROR/Andr ...