1. 函数节流
也许不太懂这个名词,不过他提到的东西还是我熟悉的那个.他要解决的问题就是,在会高频率触发一个事件处理程序的情况下,为了避免大量重复计算带来的性能问题,而引入的一个限制触发频率的机制.典型的问题就是window.onresize.虽然之前我解决过这种问题,但是看了设计模式之后,我发现我采用的方法是很挫的.
以前,我大概会使用这样的方法来解决这个问题
function test() {
test._time_id = setTimeout(function(){
if (test._time_id === -1 || typeof test._time_id === 'undefined') {
test._time_id = -1;
// 大量的计算
}
},300)
}
这个问题的方法在于,我的函数里面混进了限制执行次数的逻辑,很明显,里面不再只是纯粹的业务逻辑了.
看了书之后,我会使用这种方法了.
function throttle(fn, interval) {
let time_id;
let first_time = true;
return function(...args) {
if (first_time) {
time_id = -1;
first_time = false;
fn.apply(this,args);
}
if (time_id === -1) {
time_id = setTimeout(() => {
time_id = -1;
fn.apply(this,args);
}, interval || 300)
}
}
}
function test() {
// 大量的计算
}
window.onresize = throttle(test,500);
这个实现的思路确实很棒,以前的确没有想到过这种解决方法.
2. 分时函数
其实我感觉这个和函数节流挺像的,但是它有一个关键点,就是他的处理的数据会依赖上一次处理的结果,而不像函数节流里面提到的例子.
这个模式处理的情况是一次性大量插入dom节点时带来的性能问题.在如今的开发模式,使用了vue或则是react,基本上就不需要考虑这个问题了,不过,如果需要需要才做dom来实现的特效的话,也许能帮得上忙吧(额,虽然我暂时考虑不出具体是什么情况).
function timeChunk(fn,each,data,interval) {
let _arr = [];
let _start = function(){
for(let i = 0; i < Math.min(each || data.length); i ++) {
fn(data.shift())
}
}
let time_id = -1;
let _func = function () {
if (time_id === -1) {
time_id = setTimeout(function(){
time_id = -1;
if (data.length !== 0) {
_start();
_func();
}
}, interval || 300)
}
}
return _func;
}
3. 惰性加载函数
他的用法之一就是在给dom元素添加事件处理程序的时候,因为ie浏览器和其他现代浏览器用了不同的语法,所以,我们需要考虑这个特殊的情况.虽然在如今的浏览器的环境下,不需要考虑这个问题了,不过了解一下里面的原理还是很有意思的.
具体分为两种情况吧.
- 在加载脚本的时候,就完成函数的切换
- 在第一次运行函数的时候,进行切换
这两种方法各有各自的好处,比较没啥意思,还是看一下代码吧.
let browser = (function(){
if ( version === 'ie') {
browser = function () {
console.log('ie')
}
} else {
browser = function () {
console.log('not ie')
}
}
})()
let browser = function () {
if (version === 'ie') {
browser = function() {
console.log('ie')
}
} else {
browser = function() {
console.log('not ie');
}
}
browser();
}
4.其他
除了这些意外,还有一些别的有意思的模式,比如单例模式就很不错,还有科currying和uncurrying,面向切面编程等,这里就不一一总结了.
