额外扩展 -- 对象池 · 前端知识 -- 学习整理

>[success] # 对象池 ~~~ 1.对象池是另外一种性能优化方案，它跟享元模式有一些相似之处，但没有分离内部状态和外部状态这个过程 ~~~ >[danger] ##### 书中的例子 ~~~ 1.书中举了一个地图的案例：在搜索我家附近地图的时候，页面里出现了 2 个小气泡。当我再搜索附近的兰州拉面馆时，页面中出现了 6 个小气泡。按照对象池的思想，在第二次搜索开始之前，并不会把第一次创建的 2 个小气泡删除掉，而是把它们放进对象池。这样在第二次的搜索结果页面里，我们只需要再创建 4 个小气泡而不是 6 个。 2.简单的说第二次创建和第一次创建有交叉，我们将交叉的部分缓存起来，在第二次创建的时候使用缓存的内容 ~~~ ~~~ var toolTipFactory = (function(){ var toolTipPool = []; // toolTip 对象池 return { create: function(){ console.log(toolTipPool) if ( toolTipPool.length === 0 ){ // 如果对象池为空 var div = document.createElement( 'div' ); // 创建一个 dom document.body.appendChild( div ); return div; }else{ // 如果对象池里不为空 return toolTipPool.shift(); // 则从对象池中取出一个 dom } }, // 缓存方法 recover: function( tooltipDom ){ return toolTipPool.push( tooltipDom ); // 对象池回收 dom } } })(); var ary = []; for ( var i = 0, str; str = [ 'A', 'B' ][ i++ ]; ){ var toolTip = toolTipFactory.create(); toolTip.innerHTML = str; ary.push( toolTip ); }; // 缓存第二次创建时候调用缓存数据 for ( var i = 0, toolTip; toolTip = ary[ i++ ]; ){ // 需要缓存的数据 toolTipFactory.recover( toolTip ); }; for ( var i = 0, str; str = [ 'A', 'B', 'C', 'D', 'E', 'F' ][ i++ ]; ){ var toolTip = toolTipFactory.create(); toolTip.innerHTML = str; }; ~~~ >[info] ## 创建一个通用的缓存对象池 ~~~ 1.在对象池工厂里，把创建对象的具体过程封装起来，实现一个通用的对象池 ~~~ ~~~ var objectPoolFactory = function( createObjFn ){ var objectPool = []; return { create: function(){ // 利用回调函数的思想外界就可以自定义自己的内部实现 var obj = objectPool.length === 0 ? createObjFn.apply( this, arguments ) : objectPool.shift(); return obj; }, recover: function( obj ){ objectPool.push( obj ); } } } ~~~ * 使用案例 ~~~ var iframeFactory = objectPoolFactory( function(){ var iframe = document.createElement( 'iframe' ); document.body.appendChild( iframe ); // 调用缓存 iframe.onload = function(){ iframe.onload = null; // 防止 iframe 重复加载的 bug iframeFactory.recover( iframe ); // iframe 加载完成之后回收节点 } return iframe; }); var iframe1 = iframeFactory.create(); iframe1.src = 'http:// baidu.com'; var iframe2 = iframeFactory.create(); iframe2.src = 'http:// QQ.com'; setTimeout(function(){ var iframe3 = iframeFactory.create(); iframe3.src = 'http:// 163.com'; }, 3000 ); ~~~