成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單的tab開發(fā)解析

caoym / 2001人閱讀

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

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

方法0:

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

如果想弄懂這個(gè)問題我們需要知道函數(shù)在瀏覽器中的操作原理。函數(shù)操作分為2個(gè)階段：函數(shù)創(chuàng)建和函數(shù)執(zhí)行。

【函數(shù)創(chuàng)建】會(huì)經(jīng)歷下面幾個(gè)過程。

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

把開辟的堆內(nèi)存的16進(jìn)制的地址賦值給函數(shù)名。

【函數(shù)執(zhí)行】會(huì)經(jīng)歷下面幾個(gè)過程。

函數(shù)執(zhí)行首先會(huì)形成一個(gè)私有的作用域（棧內(nèi)存）

把之前存儲(chǔ)在堆內(nèi)存中的代碼字符串復(fù)制一份過來，變成js代碼，從上到下依次執(zhí)行。

方法0不可行的原因是，進(jìn)入循環(huán)體后，把字符串拷貝到堆內(nèi)存中，i依然在加1，當(dāng)點(diǎn)擊按鈕出發(fā)函數(shù)執(zhí)行的時(shí)候，1已經(jīng)變成了tabList.length.既然知道了原因，那怎么解決這個(gè)問題呢？我們依次來看下面幾個(gè)方法。

方法1-3中使用的changeTabHandle函數(shù)

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




自定義屬性名


//方法一：自定義屬性方法，把當(dāng)前的i存在我們獲取的對(duì)象上面。讓對(duì)象的一個(gè)屬性（_f_index）把當(dāng)前按鈕的索引保存下來。
   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中l(wèi)et塊級(jí)作用域的概念。
   for(let i=0; i

   tabList[i].onclick = function() {
       changeTabHandle(i);
   }


}




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



下面幾種方法都可以讓函數(shù)自制行
(function(){})()
~function()()
!function()()
+function()()
方法一：


for(var i=0; i

方法二：


 for(var i=0; i



記憶上次是那個(gè)被選中而不是全部清空+自定義屬性


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.記憶上次是那個(gè)被選中而不是全部清空+let


for(let i=0; i

github 實(shí)例代碼  https://github.com/fung-yu/js... 中的tab篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98392.html

相關(guān)文章

  • 前端面試復(fù)盤

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

    Jason 評(píng)論0 收藏0

  • 前端面試復(fù)盤

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

    tomener 評(píng)論0 收藏0

  • 前端面試復(fù)盤

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

    hufeng 評(píng)論0 收藏0

  • Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

    摘要：通常寫代碼時(shí)我們無需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉?duì)我們的回調(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁面，不受區(qū)域或組件劃分影響 使用盡量簡(jiǎn)單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...

    fasss 評(píng)論0 收藏0

  • Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

    摘要：通常寫代碼時(shí)我們無需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉?duì)我們的回調(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁面，不受區(qū)域或組件劃分影響 使用盡量簡(jiǎn)單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...

    VioletJack 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<