享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本《javascript 权威指南》. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的时候就去拿, 看完了还回去. 如果同时有 4 个同学需要看, 此时再去多买一本.
在 webqq 里面, 打开 QQ 好友列表往下拉的时候，会为每个好友创建一个 div( 如果算上 div 中的子节点, 还远不只 1 个元素 ).
如果有 1000 个 QQ 好友, 意味着如果从头拉到尾, 会创建 1000 个 div, 这时候有些浏览器也许已经假死了. 这还只是一个随便翻翻好友列表的操作.
所以我们想到了一种解决办法, 当滚动条滚动的时候, 把已经消失在视线外的 div 都删除掉. 这样页面可以保持只有一定数量的节点. 问题是这样频繁的添加与删除节点, 也会造成很大的性能开销, 而且这种感觉很不对味.
现在享元模式可以登场了. 顾名思义, 享元模式可以提供一些共享的对象以便重复利用. 仔细看下上图, 其实我们一共只需要 10 个 div 来显示好友信息, 也就是出现在用户视线中的 10 个 div. 这 10 个 div 就可以写成享元.
伪代码如下.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var getDiv = (function(){ var created = []; var create = function(){ return document.body.appendChild( document.createElement( 'div' ) ); } var get = function(){ if ( created.length ){ return created.shift(); }else{ return create(); } } /* 一个假设的事件，用来监听刚消失在视线外的div，实际上可以通过监听滚 动条位置来实现 */ userInfoContainer.disappear(function( div ){ created.push( div ); }) })() var div = getDiv(); div.innerHTML = "${userinfo}"; |
原理其实很简单, 把刚隐藏起来的 div 放到一个数组中, 当需要 div 的时候, 先从该数组中取, 如果数组中已经没有了, 再重新创建一个. 这个数组里的 div 就是享元, 它们每一个都可以当作任何用户信息的载体.
当然这只是个示例, 实际的情况要复杂一些, 比如快速拖动的时候, 我们可能还得为节点设置一个缓冲区.
baby 2016 年 5 月 16 日
大牛不解释
原野 2014 年 3 月 30 日
上面示例中的的 getDiv 方法在最后应该还有一句吧 return get ~
【Javascript设计模式17】- 状态模式 | Tencent AlloyTeam 2012 年 10 月 25 日
[…] 享元模式 […]
【Javascript设计模式4】- 适配器模式 | Tencent AlloyTeam 2012 年 10 月 25 日
[…] 享元模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-flyweight/ […]
【Javascript设计模式2】-简单工厂模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 享元模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-flyweight/ […]
【javascript设计模式1】-单例模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 享元模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-flyweight/ […]
【javascript设计模式5】-代理模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 享元模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-flyweight/ […]