使用闭包的举例

最新推荐文章于 2022-04-11 08:55:03 发布

转载最新推荐文章于 2022-04-11 08:55:03 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joyce123/p/7266928.html

本文介绍如何利用JavaScript中的闭包特性实现DOM元素的缓存，通过限制缓存大小来提高网页应用的性能。文章详细展示了闭包的用法，并提供了具体的代码示例。

使用闭包的举例

-> 缓存

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

用法

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>