<!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. java lambda小纪

    一个通俗的说法是 :C#委托和Java中实现了 函数式编程的方法,它是函数式编程中的概念,为了更快的处理集合,在Java,c#等静态类型语言中想要引用一个函数的一种方式,(实现了通过封装匿名方法来达到 ...

  2. 边工作边刷题：70天一遍leetcode: day 81

    Encode and Decode Strings 要点:题的特点:不是压缩,而是encode为字节流.所以需要找delimiter来分割每个word,但是delimiter可能是字符本身,所以可以用 ...

  3. 最严谨的校验email地址的正则表达式

    通用 (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0 ...

  4. AC日记——导弹拦截 洛谷 P1020 (dp+模拟)

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  5. Unity4.6新UI系统初探(uGUI)

    一.引言 Unity终于在即将到来的4.6版本内集成了所见即所得的UI解决方案(视频).事实上从近几个版本开始,Unity就在为这套系统做技术扩展,以保证最终能实现较理想的UI系统.本文试图通过初步的 ...

  6. C#泛型简化代码量示例

    泛型简化代码量 下是我在项目中通过泛型来简化工作的一个Demo,记录一下: using System; using System.Collections.Generic;   namespace My ...

  7. java11-2 String面试题

    package cn.itcast_02; /* * String s = new String(“hello”)和String s = “hello”;的区别? * 有.前者会创建2个对象,后者创建 ...

  8. 在matlab中实现遥感影像和shp文件的结合显示

    clc;close all;clear; road=shaperead('boston_roads.shp'); %读取shape文件 figure, mapshow('boston.tif'); % ...

  9. gcc学习

    gcc学习 预处理:gcc –E xxx.c –o xxx.i;产生预处理过的C原始程序 编 译:gcc –S xxx.i –o xxx.s;产生汇编语言原始程序 汇 编:gcc –c xxx.s – ...

  10. 创建Maven工程

    一.Maven工程创建 File->New->Other,进入: 点击Next,进入: 勾选上Create a simple project(不使用骨架) 点击Next,进入: 输入项目名 ...