使用闭包的举例
-> 缓存
闭包允许函数带有一个缓存结构, 也就是说只有该函数可以使用的一个私有的独立的内存空间
用法
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>