>[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 ); ~~~