js设计模式-享元模式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js设计模式-享元模式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5798字，纯文字阅读大概需要9分钟。

内容图文

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

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

使用享元模式的步骤：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 timerthis.delay =500;  // 延时时长//create the htmlthis.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 eventsvar 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(){
 2var storedInstance = null;
 3 4/*Tooltip class*/ 5var Tooltip = function(){
 6this.delayTimeout = null; // show tooltip timer 7this.delay = 500;  // 延时时长 8 9//create the html10this.element = document.createElement("div");
11this.element.style.display = "none";
12this.element.style.position = "absolute";
13this.element.className = "tooltip";
14         document.getElementsByTagName("body")[0].appendChild(this.element);
15    };
1617     Tooltip.prototype = {
18         startDelay:function(e,text){
19if(this.delayTimeout == null){
20var that = this;
21var x = e.clientX;
22var y = e.clientY;
23this.delayTimeout = setTimeout(function(){
24                    that.show(x,y,text);
25                 },this.delay);
26            }
27        },
28         show:function(x,y,text){
29             clearTimeout(this.delayTimeout);
30this.element.style.left  = x + "px";
31this.element.style.top = y + "px";
32this.element.style.display = "block";
33this.element.innerHTML = text;
34        },
35         hide:function(){
36             clearTimeout(this.delayTimeout);
37this.delayTimeout = null;
38this.element.style.display = "none";
39        }
40    };
4142return {
43         addTooltip:function(targetElement,text){
44var 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(){
49if(null == storedInstance){
50                 storedInstance = new Tooltip();
51            }
52return storedInstance;
53        }
54    }
55 })();

结果：

技术分享

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

原文：http://www.cnblogs.com/tengri/p/5351634.html

内容总结

以上是互联网集市为您收集整理的js设计模式-享元模式全部内容，希望文章能够帮你解决js设计模式-享元模式所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1228767.html

来源：【匿名】

【上一篇】GoF23种设计模式之行为型模式之模板方法【下一篇】介绍php设计模式中的工厂模式

更多 ►

【js设计模式-享元模式】教程文章相关的互联网学习教程文章

享元模式实际上是一种优化模式，目的在于提高系统的性能和代码的效率。使用享元模式的条件：最重要的条件是网页中必须使用了大量资源密集型对象，如果只会用到了少许这类对象，那么这种优化并不划算。第二个条件是这些对象中所保存的数据至少有一部分能被转换为外在的数据。最后一个条件是，将外在的数据分离出去以后，独一无二的对象的数目相对减少。使用享元模式的步骤：1、将所有外在的数据从目标类剥离。2、创建一个用来控制该...

js设计模式---阅读笔记001--富有表现力的js

js弱类型：原始数据类型按值传送，其他数据类型按引用传送变量可以根据所赋的值改变类型，原始类型之间可以类型转换（toString(),parseInt(),parseFloat(),双重‘非’转变为布尔值） http://i.cnblogs.com/EditPosts.aspx?opt=1函数：匿名函数用来创建闭包（一个受保护的变量空间，由内嵌函数生成）。。函数级作用域--函数内部变量不被外部访问作用域的词发性质---函数...

JS设计模式（6）命令模式【代码】

什么是命令模式？定义：将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。主要解决：在软件系统中，行为请求者与行为实现者通常是一种紧耦合的关系，但某些场合，比如需要对行为进行记录、撤销或重做、事务等处理时，这种无法抵御变化的紧耦合的设计就不太合适。何时使用：在某些场合，比如要对行为进行"记录、撤销/重做、事务"等处理，这种无法抵御变化的紧耦合是不合适的。在这种情况下，如何将"行为请求者...

【JS 设计模式】用单例模式（Singleton）来封装对数据的增删除改查

单例模式单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例单例模式最初的定义出现于《设计模式》（艾迪生维斯理, 1994）：“保证一个类仅有一个实例，并提供一个访问它的全局访问点。”单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”var Singleton = (function(){SingletonClass() {}var singleton = null;return {getInstance: function() {if (sin...

【JS 设计模式】用组合模式来实现树形导航--JS代码结构思路分析（二）【图】

【JS 设计模式】用组合模式来实现树形导航--代码结构思路分析（一）根据上一节中的HTML代码结构我们通过JS来渲染HTML代码，我们先提供一下JS的代码片段，这代码代码不是一个完整的代码是经过简化的。通过JS代码来分析如何组装HTML的Composite类型的代码：function TreeComposite(id, name, total, level, last) {var root = document.createDocumentFragment();var panel = document.createElement("div");panel.setAttribute("cl...

js设计模式--鸭子模型【代码】

1.简介JavaScript没有提供传统面向对象语言的类式继承通过原型委托的形式实现对象与对象之间的继承没有对抽象类和接口的支持编程语言按数据类型可分为静态类型语言和动态类型语言变量的类型要到程序运行的时候，待变量被赋予值之后，才会具有某种类型。代码数量更少，理简洁，专注业务逻辑缺点：无法保证数据的类型在JavaScript中，我们对一个变量赋值时，不需要考虑它的类型。动态类型语言对yojgod型的宽容为JavaScript带来了很...

前端23种js设计模式中参见的7种设计模式的学习【代码】

创建型设计模式是一类处理对象创建的设计模式，通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。　　1）工厂模式class Product {constructor(options) {this.name = options.name;this.time = options.time;this.init();}init() {console.log(`产品名：${this.name} 保质期：${this.time}`);} } class Factory {create(options) {returnnew Product(options);} }let factory = new Fact...

js设计模式鸭子类型【代码】【图】

long long ago, 在JS王国里，有一个国王，他觉得世界上最美妙的声音就是鸭子的叫声，于是国王召集大臣，要组建一个1000只鸭子组成的合唱团。大臣们找遍了全国，终于找到999只鸭子，但是始终还差一只，最后大臣发现有一只非常特别的鸡，它的叫声跟鸭子一模一样，于是这只鸡就成为了合唱团的最后一员。于是大家定义了鸭子类型，“如果它走起来像鸭子，而且叫起来像鸭子，那么它就是鸭子”。用JS模拟这个故事：var duck = { //鸭子...

JS设计模式（二）【代码】

5.迭代器模式　　先实现一个简单的迭代器，类似于JQ里的$.each方法。var each = function (arr, callback) {for (var i = 0, l = arr.length; i < l; i++) {callback(i, arr[i]);}};each([1, 2, 3, 4], function (i, n) {console.log(i, n);}) 原文：http://www.cnblogs.com/zhansu/p/6163145.html

JS设计模式——10.门面模式【代码】【图】

门面模式这是一种组织性的模式，它可以用来修改类和对象的接口，使其更便于使用。它可以让程序员过得更轻松，使他们的代码变得更容易管理。门面模式有两个作用：简化类的接口消除与使用她的客户代码之间的耦合一个简单的门面模式var addEvent = function(el, ty, fn){var cases = [function(el, ty, fn) { el.addEventListener(ty, fn, false); },function(el, ty, fn) { el.attachEvent(‘on‘+ty, fn); },function(el, ty, fn) {...

js 设计模式——建造者模式【代码】【图】

定义将一个复杂对象的构建与它的实例分离，使得同样的构建过程可以创建不同的实例。建造者模式实现比如你打算装修一个房子，首先你会找到开发商提出你的需求/*** @information: 业主*/class Owner {constructor (need){this.need = need || [];}getNeed() {returnthis.need;}}然后开发商会根据你的需求去找设计师设计图纸/*** @information: 开发商*/class Developer {constructor(need) {this.need = need || [];console.log("我需...

设计模式 - 相关标签

设计模式六大原则设计模式之禅

设计模式 - 最热教程

Java的设计模式（7）— 生产者-消费者模...PHP设计模式——策略模式_PHP教程 JavaScript设计模式经典之简单工厂模式...Java设计模式：代理模式 php – Laravel – 在视图中处理if / e...CoreJava学习第十五课-反射，枚举，标注...Java设计模式的常见应用场景 Java设计模式偷跑系列(十八)建模和责任...C#设计模式(6)——原型模式（Prototype...java – 当if-else增长时,应该使用什么...