《javascript設計模式與開發實踐》讀書筆記（一）

標籤：

一.高階函數

1.函數作為參數傳遞

最經典的例子就是毀掉函數

var fs  = require(‘fs‘);fs.readFile(‘test.txt‘,function(data,err){    console.log(data);});

2.函數作為傳回值

作為傳回值時候，要注意此時的this指向。

3.函數柯裡化

函數柯裡化指首先接受一些參數，接受到的參數後不立即執行，而是返回一個新函數，剛才傳入的參數在函數形成的閉包中被儲存起來，待到真正求值的時候剛才儲存的參數才會真正的求值。

var cost = (function(){    var args = [];    return function(){        if(arguments.length===0){            var money =0;            for(var i-0;i<args.length;i++){                money+=args[i];            }            return money;        }else{            [].push.apply(args,arguments);        }    }})();cost(100);//100cost(200);//200cost();//300

 

4.函數節流

函數節流的思想就是讓一些頻繁執行的函數減少執行頻率；比如因為瀏覽器視窗變化引起resize事件的頻繁執行，mouseover，上傳進度等等。

var throttle = function(fn,interval){    var _self = fn,timer,firstTime;    return function(){        var args = arguments,_me = this;        if(firstTime){            _self.apply(_me,args);            return firstTime = false;        }        if(timer){            return false;        }        timer = setTimeout(function(){            clearTimeout(timer);            timer = null;            _self.apply(_me,args);        },interval||500);    }};window.onresize = throttle(function(){    console.log(1)},500);

代碼的解決辦法是利用定時器順延強制，如果定時器在規定時間後還沒執行完，那麼，下一次執行的時候就不會執行，直接返回；

 5.分時函數

分時函數應用的情境比如，你的QQ好友有上千個，每一個好友是一個dom，這是載入的時候瀏覽器可能吃不消，就要用到setInterval函數來消極式載入。

//ary需要載入的資料，fn載入邏輯，count每一批載入的個數
var timeChunk = function(ary,fn,count){    var obj, t;    var len = ary.length;    var start = function(){        for(var i=0;i<Math.min(count||1,ary.length);i++){            var obj = ary.shift();            fn(obj);        }    };    return function(){         t = setInterval(function(){            if(ary.length===0){                return clearInterval(t);            }            start();        },200);    }}

var ary = [];
for(var i=0;i<1000;i++){
   ary.push(i);
}
var renderFirendList = timeChunk(ary,function(n){
   var div = document.createElement(‘div‘);
   div.innerHTML = n;
   document.body.appendChild(div);
},8);
renderFirendList();

 6.惰性載入函數

惰性 載入函數也很常見，比如瀏覽器嗅探中的時間綁定函數

var addEvent = function(elem,type,handler){    if(window.addEventListener){        return elem.addEventListener(type,handler,false);    }    if(window.addEvent){        return elem.addEvent(‘on‘+type,handler);    }}

 

 以上代碼在非IE瀏覽器下每次都不會走第二個分支，並且每次添加一個事件就會執行一次判斷，雖然這不會增加效能開銷，但是可以利用惰性載入來解決

var addEvent = function(elem, type, handler){    if(window.addEventListener){        addEvent = function(elem, type, handler){            elem.addEventListener(type, handler, false)        }    }else if(window.addEvent){        addEvent = function(elem, type, handler){            elem.addEvent(‘on‘+type, handler);        }    }    addEvent(elem,type,handler);}

 二.this

this的判斷只要記住一點，就是在執行的時候動態綁定的，以下是優先順序

if(hava new){

　　this 就是new返回的這個對象

}else if(hava call,apply 綁定){

　　apply,call綁定的那個對象就是this

}else if(有對象調用){

　　this就是這個調用的對象

}else{

　　預設綁定到window

}

《javascript設計模式與開發實踐》讀書筆記（一）