簡單的tab開發解析

caoym 發布于2019-08-23 12:22 / 1996人閱讀

摘要：把開辟的堆內存的進制的地址賦值給函數名。閉包有個作用一個是保護其私有作用域的私有變量不受外界干擾，另一個作用就是可以保存以下內容。

使用下面的幾種方法都可以實現我們想要的效果。下面我一一進行描述講解下。
首先我們需要弄清楚一個問題，下面的代碼（方法0:）為什么不可以實現我們想要的效果，而且邏輯上好像也沒有什么問題。

方法0:

for (var i = 0;i < tabList.length; i++){
        tabList[i].onclick = function () {
            console.dir(this);
            changeTabHandle(i);
        }  
}

如果想弄懂這個問題我們需要知道函數在瀏覽器中的操作原理。函數操作分為2個階段：函數創建和函數執行。

【函數創建】會經歷下面幾個過程。

函數屬于引用類型的，首先會開辟一個堆內存，把函數體中的代碼當作字符串存儲在這個對內存中，為了找到這個內置，瀏覽器會為其分配一個16進制的地址。在我們上面的代碼中會把“console.dir(this);changeTabHandle(i);”存儲在對內存中。

把開辟的堆內存的16進制的地址賦值給函數名。

【函數執行】會經歷下面幾個過程。

函數執行首先會形成一個私有的作用域（棧內存）

把之前存儲在堆內存中的代碼字符串復制一份過來，變成js代碼，從上到下依次執行。

方法0不可行的原因是，進入循環體后，把字符串拷貝到堆內存中，i依然在加1，當點擊按鈕出發函數執行的時候，1已經變成了tabList.length.既然知道了原因，那怎么解決這個問題呢？我們依次來看下面幾個方法。

方法1-3中使用的changeTabHandle函數

//n 當前點擊按鈕的索引
function changeTabHandle(n) {
    for(var i=0; i


自定義屬性名
//方法一：自定義屬性方法，把當前的i存在我們獲取的對象上面。讓對象的一個屬性（_f_index）把當前按鈕的索引保存下來。
   console.log(tabList);
   for (var i = 0;i < tabList.length; i++){
   tabList[i]._f_index = i;
   tabList[i].onclick = function () {
       console.dir(this);
       changeTabHandle(this._f_index);
   }  
}


es6 let
//方法二：var --> let，利用了es6中let塊級作用域的概念。
   for(let i=0; i
   tabList[i].onclick = function() {
       changeTabHandle(i);
   }
}

閉包
//下面2個方法都是利用了閉包的保存作用。閉包有2個作用一個是保護其私有作用域的私有變量不受外界干擾，另一個作用就是可以保存以下內容。

下面幾種方法都可以讓函數自制行
(function(){})()
~function()()
!function()()
+function()()
方法一：
for(var i=0; i
方法二：
 for(var i=0; i

記憶上次是那個被選中而不是全部清空+自定義屬性
beforeIndex = 0;
for(var i=0; i
tabList[i]._f_index = i;
tabList[i].onclick = function() {
    
    tabList[beforeIndex].className = "";
    divList[beforeIndex].className = "";
    tabList[this._f_index].className = "active";
    divList[this._f_index].className = "active";
    beforeIndex = this._f_index;
}
}

5.記憶上次是那個被選中而不是全部清空+let
for(let i=0; i
github 實例代碼  https://github.com/fung-yu/js... 中的tab篇

GPU云服務器云服務器簡單的小程序開發簡單的web開發問題簡單的服務器開發開發簡單的小程序

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

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

前端面試復盤

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內邊距下的上外邊距可以看下面這個例子印證第三點。昨天面了html5前端。下面是其中3個問題：雙外邊距疊加。用原生js怎么實現div選項卡。如何去實現一個插件。一、雙外邊距折疊問題描述一上一下兩個di...

Jason 2019-08-29 12:21 評論0 收藏0
前端面試復盤

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內邊距下的上外邊距可以看下面這個例子印證第三點。昨天面了html5前端。下面是其中3個問題：雙外邊距疊加。用原生js怎么實現div選項卡。如何去實現一個插件。一、雙外邊距折疊問題描述一上一下兩個di...

tomener 2019-08-20 15:31 評論0 收藏0
前端面試復盤

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內邊距下的上外邊距可以看下面這個例子印證第三點。昨天面了html5前端。下面是其中3個問題：雙外邊距疊加。用原生js怎么實現div選項卡。如何去實現一個插件。一、雙外邊距折疊問題描述一上一下兩個di...

hufeng 2019-08-01 16:37 評論0 收藏0
Angular 1 深度解析：臟數據檢查與 angular 性能優化

摘要：通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數做了包裝。類似的不只是這些事件回調函數，還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數據映射機制，由 $apply 或 $digest 觸發。臟檢查的范圍是整個頁面，不受區域或組件劃分影響使用盡量簡單的綁定表達式提升臟檢查執行速度盡量減少頁面上綁定表達式的個數（單次綁定...

fasss 2019-08-01 17:17 評論0 收藏0
Angular 1 深度解析：臟數據檢查與 angular 性能優化

摘要：通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數做了包裝。類似的不只是這些事件回調函數，還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數據映射機制，由 $apply 或 $digest 觸發。臟檢查的范圍是整個頁面，不受區域或組件劃分影響使用盡量簡單的綁定表達式提升臟檢查執行速度盡量減少頁面上綁定表達式的個數（單次綁定...

VioletJack 2019-08-20 18:26 評論0 收藏0