使用闭包的举例

 
使用闭包的举例
-> 缓存
闭包允许函数带有一个缓存结构, 也就是说只有该函数可以使用的一个私有的独立的内存空间
用法
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;
};
})();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <b>b</b>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <b>b</b>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <b>b</b>
</body>
<script>
    var length = 3;
    var $ = (function () {
        var cacheKeys = [];
        var cache = {};
        return function ( selector ) {
            // 首先判断缓存中有没有, 有的就直接使用缓存中的, 如果没有就再来获取
            var nodeList;
            if ( cache[ selector ] ) {
                // 有
                nodeList = cache[ selector ];
            } else {
                // 没有
                nodeList = [].slice.call( document.querySelectorAll( selector ) ); 
                // 将 伪数组 NodeList 转换成 真数组 Array, 为了在后面调用 forEach 方法

                // 存储之前需要判断长度
                if ( cacheKeys.length >= length ) {
                    // 需要删除
                    var key = cacheKeys.shift();
                    delete cache[ key ];
                }

                cacheKeys.push( selector );
                cache[ selector ] = nodeList; // 在 缓存中存起来
            }
            return nodeList;
        };
    })();

    $( 'div' ).forEach( function ( v ) {
        v.style.border = '1px solid red';
    });
    // ES6 里的 箭头函数写法
    $( 'p' ).forEach( v => v.style.border = '1px dashed blue' );  
    $( 'span' ).forEach( v=> v.style.backgroundColor = 'yellow' );   
    $( 'b' ).forEach( v => v.style.color = 'pink' );


</script>
</html>

 

posted @ 2017-08-01 09:54  Joyce前端  阅读(475)  评论(0)    收藏  举报