1. 函數(shù)節(jié)流
也許不太懂這個名詞,不過他提到的東西還是我熟悉的那個.他要解決的問題就是,在會高頻率觸發(fā)一個事件處理程序的情況下,為了避免大量重復(fù)計算帶來的性能問題,而引入的一個限制觸發(fā)頻率的機制.典型的問題就是window.onresize.雖然之前我解決過這種問題,但是看了設(shè)計模式之后,我發(fā)現(xiàn)我采用的方法是很挫的.
以前,我大概會使用這樣的方法來解決這個問題
function test() {
test._time_id = setTimeout(function(){
if (test._time_id === -1 || typeof test._time_id === 'undefined') {
test._time_id = -1;
// 大量的計算
}
},300)
}
這個問題的方法在于,我的函數(shù)里面混進(jìn)了限制執(zhí)行次數(shù)的邏輯,很明顯,里面不再只是純粹的業(yè)務(wù)邏輯了.
看了書之后,我會使用這種方法了.
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);
這個實現(xiàn)的思路確實很棒,以前的確沒有想到過這種解決方法.
2. 分時函數(shù)
其實我感覺這個和函數(shù)節(jié)流挺像的,但是它有一個關(guān)鍵點,就是他的處理的數(shù)據(jù)會依賴上一次處理的結(jié)果,而不像函數(shù)節(jié)流里面提到的例子.
這個模式處理的情況是一次性大量插入dom節(jié)點時帶來的性能問題.在如今的開發(fā)模式,使用了vue或則是react,基本上就不需要考慮這個問題了,不過,如果需要需要才做dom來實現(xiàn)的特效的話,也許能幫得上忙吧(額,雖然我暫時考慮不出具體是什么情況).
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. 惰性加載函數(shù)
他的用法之一就是在給dom元素添加事件處理程序的時候,因為ie瀏覽器和其他現(xiàn)代瀏覽器用了不同的語法,所以,我們需要考慮這個特殊的情況.雖然在如今的瀏覽器的環(huán)境下,不需要考慮這個問題了,不過了解一下里面的原理還是很有意思的.
具體分為兩種情況吧.
- 在加載腳本的時候,就完成函數(shù)的切換
- 在第一次運行函數(shù)的時候,進(jìn)行切換
這兩種方法各有各自的好處,比較沒啥意思,還是看一下代碼吧.
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,面向切面編程等,這里就不一一總結(jié)了.
