淺層次分析鏈式調用的部分原理

Sike 發布于2019-08-22 18:03 / 1443人閱讀

摘要：本來是想寫分析的部分原理，想想因為也沒有去看過源碼，就改了下標題。準備工作，用去實例化鏈式調用并非是無限延伸，而是調用完就回撤然后再次調用的過程。所以鏈式調用的基本原理是每個方法都要，并且每個方法調用都是基于的。

本來是想寫分析jQuery的部分原理，想想因為也沒有去看過jQuery源碼，就改了下標題。

出發點很簡單，寫一個類似jQuery的簡化版工具庫。

準備工作，用$去實例化：

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

鏈式調用并非是無限延伸，而是調用完就回撤然后再次調用的過程。
所以鏈式調用的基本原理是每個方法都要return this，并且每個方法調用都是基于this的。
就好比打拳，雖然打出去的動作不一樣，但是打出去就得收回來，再出拳。

出于簡化與個人水平原因，選擇器方面，暫時只寫了id 和 class類型的

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

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

obj.prototype.click  = function (cb) {
    this.init.onclick = cb;//節點點擊觸發回調函數
    return this;
}

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

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

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

obj.prototype.hide  = function () {
    if (this.total  === "majority") {//選擇的節點為多數需要循環
        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;
}

云服務器 GPU云服務器 php的鏈式寫法云計算的層次子窗口的層次相關云計算的服務層次

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95442.html

30分鐘，讓你徹底明白Promise原理

摘要：鏈式是指在當前達到狀態后，即開始進行下一個后鄰。在中發現沒有指定異步操作失敗的回調時，會直接將函數返回的，后同設為狀態，如此達成執行后續失敗回調的效果。原文鏈接前言前一陣子記錄了promise的一些常規用法，這篇文章再深入一個層次，來分析分析promise的這種規則機制是如何實現的。ps:本文適合已經對promise的用法有所了解的人閱讀,如果對其用法還不是太了解，可以移步我的上...

Profeel 2019-08-20 16:41 評論0 收藏0
從圖像到知識：深度神經網絡實現圖像理解的原理解析

摘要：本文將詳細解析深度神經網絡識別圖形圖像的基本原理。卷積神經網絡與圖像理解卷積神經網絡通常被用來張量形式的輸入，例如一張彩色圖象對應三個二維矩陣，分別表示在三個顏色通道的像素強度。本文將詳細解析深度神經網絡識別圖形圖像的基本原理。針對卷積神經網絡，本文將詳細探討網絡中每一層在圖像識別中的原理和作用，例如卷積層(convolutional layer)，采樣層(pooling layer)，...

UnixAgain 2019-04-25 18:03 評論0 收藏0
深度學習-LeCun、Bengio和Hinton的聯合綜述（上）

摘要：三大牛和在深度學習領域的地位無人不知。逐漸地，這些應用使用一種叫深度學習的技術。監督學習機器學習中，不論是否是深層，最常見的形式是監督學習。三大牛Yann LeCun、Yoshua Bengio和Geoffrey Hinton在深度學習領域的地位無人不知。為紀念人工智能提出60周年，的《Nature》雜志專門開辟了一個人工智能 + 機器人專題，發表多篇相關論文，其中包括了Yann LeC...

DrizzleX 2019-04-25 17:59 評論0 收藏0
jQuery 源碼系列（一）總體架構

摘要：到目前為止，的貢獻者團隊共名成員，多條，可想而知，是一個多么龐大的項目。參考源碼分析整體架構源碼解析讀書筆記第二章構造對象函數詳解本文在上的源碼地址，歡迎來。歡迎來我的專欄查看系列文章。決定你走多遠的是基礎，jQuery 源碼分析，向長者膜拜！我雖然接觸 jQuery 很久了，但也只是局限于表面使用的層次，碰到一些問題，找到 jQuery 的解決辦法，然后使用。顯然，這種做法的...

svtter 2019-08-21 15:13 評論0 收藏0
jQuery源碼分析-整體架構（轉）

摘要：文章出處拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。利用下的簡單工廠模式，來將所有對于同一個對象的操作指定同一個實例。所以的中提供了以上中擴展函數。文章出處 http://www.cnblogs.com/aaronjs/p/3278578.html 拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。廢話不多說，jquery這么多年了分析都寫爛了，老早以前就拜讀過，...

voidking 2019-08-21 10:39 評論0 收藏0