淺層次分析鏈?zhǔn)秸{(diào)用的部分原理

Sike 發(fā)布于2019-08-22 18:03 / 1432人閱讀

摘要：本來(lái)是想寫(xiě)分析的部分原理，想想因?yàn)橐矝](méi)有去看過(guò)源碼，就改了下標(biāo)題。準(zhǔn)備工作，用去實(shí)例化鏈?zhǔn)秸{(diào)用并非是無(wú)限延伸，而是調(diào)用完就回撤然后再次調(diào)用的過(guò)程。所以鏈?zhǔn)秸{(diào)用的基本原理是每個(gè)方法都要，并且每個(gè)方法調(diào)用都是基于的。

本來(lái)是想寫(xiě)分析jQuery的部分原理，想想因?yàn)橐矝](méi)有去看過(guò)jQuery源碼，就改了下標(biāo)題。

出發(fā)點(diǎn)很簡(jiǎn)單，寫(xiě)一個(gè)類似jQuery的簡(jiǎn)化版工具庫(kù)。

準(zhǔn)備工作，用$去實(shí)例化：

function $(domName) {
     return new obj(domName);
 }

鏈?zhǔn)秸{(diào)用并非是無(wú)限延伸，而是調(diào)用完就回撤然后再次調(diào)用的過(guò)程。
所以鏈?zhǔn)秸{(diào)用的基本原理是每個(gè)方法都要return this，并且每個(gè)方法調(diào)用都是基于this的。
就好比打拳，雖然打出去的動(dòng)作不一樣，但是打出去就得收回來(lái)，再出拳。

出于簡(jiǎn)化與個(gè)人水平原因，選擇器方面，暫時(shí)只寫(xiě)了id 和 class類型的

function obj(domName) {
     if (String(domName)[0] === "#") {
         this.total = "singular";//表示選擇器獲得節(jié)點(diǎn)為單數(shù)，調(diào)用其他方法的時(shí)候無(wú)需循環(huán)
         this.init = document.getElementById(new String(domName).substring(1,new String(domName).length));//獲取節(jié)點(diǎn)
     }else if(String(domName)[0] === "."){
         this.total = "majority";//表示選擇器獲得節(jié)點(diǎn)為多數(shù)，調(diào)用其他方法的時(shí)候需要循環(huán)
         this.init = document.getElementsByClassName(new String(domName).substring(1,new String(domName).length));//獲取節(jié)點(diǎn)
     } 
     this.length = this.init.length;
 }

click事件(change,mouseover等事件原理類似)

obj.prototype.click  = function (cb) {
    this.init.onclick = cb;//節(jié)點(diǎn)點(diǎn)擊觸發(fā)回調(diào)函數(shù)
    return this;
}

eq選擇器，eq是改變this的選擇對(duì)象（this.init）

obj.prototype.eq= function (index) {
    this.init = this.init[index];
    this.total = "singular";//改變選擇節(jié)點(diǎn)的數(shù)目類型
    return this;
}

hide（show需要獲取一下之前的display。。。相比較hide復(fù)雜一些）

obj.prototype.hide  = function () {
    if (this.total  === "majority") {//選擇的節(jié)點(diǎn)為多數(shù)需要循環(huán)
        for(let i = 0; i < this.init.length; i ++) {
        this.init[i].style.display = "none";
        }
    }else if( this.total === "singular"){
        this.init.style.display = "none";
    }
    
    return this;
}