摘要：模式閱讀筆記第一部分函數(shù)模式總的來說模式是一本力薦的進(jìn)階書書里面涉及了很多在學(xué)習(xí)過程中會(huì)碰到的坑然后提供了很不錯(cuò)的解決方法雖然很多人吐槽這本書的翻譯但是糟糕的翻譯還是無法掩蓋這是一本好書的事實(shí)因此這里我會(huì)結(jié)合書上的知識(shí)和我的理解來寫一些

總的來說,javascript模式是一本力薦的js進(jìn)階書,書里面涉及了很多在學(xué)習(xí)javascript過程中會(huì)碰到的坑,然后提供了很不錯(cuò)的解決方法.雖然很多人吐槽這本書的翻譯,但是糟糕的翻譯還是無法掩蓋這是一本好書的事實(shí).

因此這里我會(huì)結(jié)合書上的知識(shí)和我的理解來寫一些我認(rèn)為值得借鑒的內(nèi)容.

隨處可見的是使用new操作符的構(gòu)造函數(shù)

var People = function(){ this.type = "human"}; //構(gòu)造函數(shù)
var aPerson = new People();            //用new操作符來實(shí)例化

所以當(dāng)在new操作符下的構(gòu)造函數(shù)究竟發(fā)生了什么?

//new操作發(fā)生的事情
var this = Object.create(People.prototype); //創(chuàng)建新的對(duì)象,然后繼承自parent.prototype;
this.type = "human";         //屬性和方法被加入到this下;
return this;                 //如果構(gòu)造函數(shù)沒有返回,則自己返回this;

現(xiàn)在有一個(gè)問題,如果用戶在使用構(gòu)造函數(shù)的時(shí)候,漏掉了new操作符,那么this就會(huì)被指向window/global上,從而出現(xiàn)錯(cuò)誤;

var aPerson = People(); //這里的this指向window
console.log(aPerson.type); //undefined
console.log(window.type);  //"human"

如果漏掉了new操作符可能會(huì)導(dǎo)致比較嚴(yán)重的問題.因此也會(huì)有了所謂的安全模式:

var People = function(cfg){
    if(!(this instanceof People)){ //核心代碼
        return new People(cfg);        //做一個(gè)簡(jiǎn)單的檢測(cè)
    }
    .....//該干嘛干嘛
}

所以就算漏掉了new操作符,代碼的檢查機(jī)制也會(huì)幫你new,不會(huì)出現(xiàn)綁定的問題;

回調(diào)函數(shù)是解耦的神器,如果你的函數(shù)內(nèi)部有一個(gè)部分會(huì)頻繁變化,可以考慮把這些部分封裝到一個(gè)函數(shù)里面作為回調(diào)函數(shù)傳入,這樣就可以解除不同函數(shù)之間的耦合,并且會(huì)方便修改;

var function complexFunction(){
    function A(); //變化少的部分
    function B(); //變化多的部分
    function C()  //變化少的部分
}

//重構(gòu)之后:
var function complexFunction(fn){
    function A();
    fn();
    function C();
}
complexFunction(function B(){
    //變化很大的部分
});

這樣就可以把會(huì)經(jīng)常變化的部分從不變的函數(shù)部分中解耦出來;而且書中的例子更好,同樣可以學(xué)習(xí)參考下:

//原始代碼:第一個(gè)先在node里面創(chuàng)建數(shù)據(jù)
var findNodes =function(){
    //大概的作用是在循環(huán)里面重復(fù)處理數(shù)據(jù)
    var i = 100000,
        node = [],
        found;
    while(i){
        i -= 1;
        node.push(found);
    }
    return nodes;
}
//這個(gè)函數(shù)的作用是循環(huán)數(shù)組來讓他消失;為了解耦,所以分開了寫;
var hide = function(nodes){
    var i =0, max = nodes.length;
    for(;i
這樣寫的問題在于做這個(gè)事情需要循環(huán)兩次,效率其實(shí)并不高;所以考慮用下面的方法重構(gòu):
//重構(gòu):提高效率和解耦
var findNodes = function(callback){
    var i =100000,
        node=[],
        found;
    if( typeof callback !== "function"){
        callback = false; //這里多帶帶判斷是為了放在循環(huán)之外
    }
    while(i){
        i -=1;
        
        //這里執(zhí)行很復(fù)雜的過程
        
        if(callback){
            callback(found);
        }
        nodes.push(found);
    }
}

var hide = function(node){
    node.style.display = "none";
};

findNodes(hide);
所以通過回調(diào)函數(shù)的會(huì)讓函數(shù)解耦,特別是在循環(huán)體系之內(nèi);
3.自定義函數(shù)的使用
如果一個(gè)函數(shù)有一些準(zhǔn)備工作要做,但是這些工作也許只需要執(zhí)行一次就好了,那么你需要用自定義函數(shù)來提高性能;
var count = function(){
    var number = 0;
    console.log("Init Done!") //完成只會(huì)執(zhí)行一次的初始化
    count = function(){
        //這里用新的函數(shù)覆蓋原函數(shù)
        number++;
        console.log(number);
    }
}
Test:
count(); //Init Done;
count(); //1
count(); //2
所以完成了第一次的初始化,然后完成了一些初始化的工作.這里可以和下面的技巧一起聯(lián)合使用;
4.初始化分支選擇
如果你開頭就需要判斷一些東西,然后之后這個(gè)判斷都不需要執(zhí)行,那么你可能需要使用這種方法;
說起來比較抽象,但是這個(gè)比較常見,比如說瀏覽器需要知道你正在使用的瀏覽器,但是這個(gè)信息一般只會(huì)有一次判斷就可以了,比如說下面的方法效率就很低;
var utils = {
    addListener:function(el,type,fn){
        if(typeof window.addEventListener ==="function"){
            el.addEventListener(type,fn,false);
        }else if(typeof document.attachEvent ==="function"){ // 判斷這是IE
            el.attachEvent("on"+type,fn);
        }
    }
}
但是實(shí)際上這種信息我只需要判斷一次就好;但是如果寫在了utils里面,那么每次都需要執(zhí)行;所以我們可以優(yōu)化成為:
var utils = { //這里只是簡(jiǎn)單的設(shè)置一個(gè)接口,實(shí)際的執(zhí)行留在后面的初始化分支里面
    addListener:null
};
//
if(typeof window.addEventListener === "function"){
    utils.addListener = function(type,fn,false){
        el.addEventListener(type,fn,false);
    }
}else(typeof document.attachEvent ==="function"){
    utils.addListener = function(type,fn,false){
        el.attachEvent("on"+type,fn);
    }
}
5.備忘模式
函數(shù)是一個(gè)對(duì)象,那么也就是可以在屬性里面添加一些信息.比如說數(shù)組的length,函數(shù)的name屬性就是本來就存在的;
那么我們也可以使用這個(gè)特性來給某些計(jì)算開銷很大的函數(shù),增加一個(gè)緩存,如果下次還需要計(jì)算這個(gè)值,就可以直接返回緩存中的量;
var func = function(param){
    if(!func.cache[param]){
        var result = {};
        //做一些很復(fù)雜的計(jì)算
        func.cache[param] = result;
    }
    return func.cache[param];
};
myFunc.cache = {};
6.配置模式
當(dāng)你在做一個(gè)通用組件的時(shí)候,有時(shí)候你也需要留出一定的配置項(xiàng)出來讓用戶來設(shè)置;
var Widget = function(cfg){
    cfg = cfg||{}; //如果傳入了就用,沒有的話就傳入{};
    cfg.name && this.setName(cfg.name);
    cfg.theme && this.setTheme(cfg.theme);
    ......//一系列的配置項(xiàng)
}
大概的思路就是說如果用戶有傳入配置項(xiàng),那么就使用配置項(xiàng).
7.構(gòu)造函數(shù)中的靜態(tài)函數(shù)
之前學(xué)js的繼承的時(shí)候,一直很揪心的問題就是,到底什么會(huì)繼承,什么不會(huì)呢?這里剛剛做一個(gè)總結(jié)
    var Gadget = function(){
        this.say1 = function(){ console.log("1~")};
        var say2= function(){ console.log("2~")};
    };
    Gadget.prototype.say3 = function(){console.log("3")};
    Gadget.say4 = function(){console.log("4")};

    //This is a test;
    var gadget = new Gadget();
    gadget.say1(); //1 通過this繼承方法效率不高,但是實(shí)際上是可以使用的
    gadget.say3(); //3 最好的還是通過prototype的方法繼承.正常訪問;
    
    Gadget.say2(); //報(bào)錯(cuò)!在Gadget里面設(shè)置的會(huì)無法訪問;
    Gadget.say4();// 4,正常使用,因此通過屬性的方法添加到Gadget里面的是可以作為Gadget靜態(tài)方法調(diào)用的
參考資料
Javascript模式