使用闭包的举例

-> 缓存

闭包允许函数带有一个缓存结构, 也就是说只有该函数可以使用的一个私有的独立的内存空间

用法

var func = (function () {

// 内存私有

 

return function () {

// 函数体

};

})();

 

 

例如, 在实际开发中会有频繁的获取元素的行为. 获取元素最简单的处理形式就是使用选择器.

在 h5 中, 引入了 一个新的 方法 document.querySelectorAll

 

var $ = function ( selector ) {

return document.querySelectorAll( selector );

};

 

在完成一个页面应用的时候, 一般会频繁的对元素进行获取操作. 为了提高效率我们可以将元素缓存.

 

$( ... ).事件(function () {

$( this )

$( ... )

})

 

缓存代码

var $ = (function () {

 

var cache = {};

 

return function ( selector ) {

// 首先判断缓存中有没有, 有的就直接使用缓存中的, 如果没有就再来获取

var nodeList;

if ( cache[ selector ] ) {

// 有

nodeList = cache[ selector ];

} else {

// 没有

nodeList = document.querySelectorAll( selector );

cache[ selector ] = nodeList; // 在 缓存中存起来

}

return nodeList;

};

})();

 

 

为了更高效的时候, 缓存需要一个容量. 所以给定一个 length 属性, 缓存中存储数据如果超过了

这个 length 那么就将最早加入的数据删除.

 

在私有空间中引入一个数组, 用于存储 键,

1> 保存顺序

2> 可以获得长度

 

 

var length = 3;

var $ = (function () {

 

var cacheKeys = [];

var cache = {};

 

return function ( selector ) {

// 首先判断缓存中有没有, 有的就直接使用缓存中的, 如果没有就再来获取

var nodeList;

if ( cache[ selector ] ) {

// 有

nodeList = cache[ selector ];

} else {

// 没有

nodeList = document.querySelectorAll( selector );

 

// 存储之前需要判断长度

if ( cacheKeys.length >= length ) {

// 需要删除

var key = cacheKeys.shift();

delete cache[ key ];

}

 

cacheKeys.push( selector );

cache[ selector ] = nodeList; // 在 缓存中存起来

}

return nodeList;

};

})();

    
              
      
       div
      
    
p
    span    b    
      
       div
      
    
p
    span    b    
      
       div
      
    
p
    span    b