首頁 > web前端 > js教程 > jQuery源碼之資料緩衝的學習

jQuery源碼之資料緩衝的學習

不言
發布: 2018-07-09 15:24:05
原創
1542 人瀏覽過

這篇文章主要介紹了關於jQuery原始碼之資料緩衝的學習,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

記憶體洩漏

什麼事記憶體洩漏

記憶體洩漏是指一塊記憶體既不能被使用,也不能被瀏覽器程序所結束。瀏覽器中採用了自動垃圾回收管理記憶體了,已經是相當不錯了,但任然有bug,所以會產生記憶體洩漏。

常見的記憶體洩漏的情況是:

  1. 循環引用

  2. javascript的閉包

  3. #DOM插入

  • 含有DOM物件的循環引用將導致大部分目前主流瀏覽器記憶體外洩

// [1]
var a = new Object();
var b = new Object();

a.r = b;
b.r = a;

// [2]
var a = new Object();
a.r = a;
// 循环引用很常见且大部分情况下是无害的,但当参与循环引用的对象中有DOM对象或者ActiveX对象时,循环引用将导致内存泄露。
登入後複製
  • 已經從DOM中remove了,但是依然存在物件或變數引用著該元素,導致其無法刪除。這種情況可以透過刷新瀏覽器的方法來消除。

  • 另外一種情況,就是循環引用,一個DOM物件和JS物件之間互相引用,這樣造成的情況更嚴重一些,即使刷新,記憶體也不會減少。這就是嚴格意義上說的記憶體洩漏了。

所以在平時實際應用中, 我們經常需要給元素緩存一些數據,並且這些數據往往和DOM元素緊密相關。由於DOM元素(節點)也是物件, 所以我們可以直接擴展DOM元素的屬性,但是如果給DOM元素添加自訂的屬性和過多的資料可能會引起記憶體洩漏,所以應該要盡量避免這樣做。因此更好的解決方法是使用一種低耦合的方式讓DOM和快取資料能夠連結起來。

jquery的緩衝機制就解決了這個問題。

jquery的緩衝機制

想法:

  1. #由於在dom物件上建立一些自訂屬性,當其再於js物件等存在引用的時候,就會有可能導致出現記憶體洩漏的問題,所以,我們這裡使用的jquery的緩衝機制就是再jquery上創建一個緩衝物件cache來存放我們想要再DOM中儲存的資料。

  2. 但是問題又來了,我們要怎麼實作DOM元素於jquery中的cache物件中的資料的對應呢?

  3. 我們先在DOM物件上建立一個唯一性的屬性,他是expando的值。而expando的值是一個字串,'jquery' date,基本上可以保證這個屬性再不同DOM的唯一性。

  4. 接著把每個結點的dom[expando]`的值設為是一個自增長的id,保持全域的唯一性,既可以使用cache[id]`就可以取得對應的資料了。即id就好比是打開一個房間(DOM節點)的鑰匙。而每個元素的所有快取都被放到了一個map映射裡面,這樣可以同時快取多個資料。

  5. 總之,現在在DOM元素上找到expando的對應值,也就是uid。然後透過這個uid找到資料緩衝Cache物件的具體的資料。

var cache = {
    "uid1": { // DOM节点1缓存数据,
        "name1": value1,
        "name2": value2
    },
    "uid2": { // DOM节点2缓存数据,
        "name1": value1,
        "name2": value2
    }
    // ......
};
登入後複製

jQuery源碼之資料緩衝的學習

jQuery源碼之資料緩衝的學習

#靜態方法data和實例方法的差異

var ele1 = $("#aaron");
var ele2 = $("#aaron");

ele1.data('a',1111);
ele2.data('a',2222);

show('第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖')
show(ele1.data('a'))  // 2222
show(ele2.data('a')) // 2222


show()
//=======第二组=========
show('第二组,通过$.data的方式,取到2组b值,未覆盖')
$.data(ele1,"b","1111")   // 1111
$.data(ele2,"b","2222")   // 2222

show($.data(ele1,"b"))
show($.data(ele2,"b") )



function show(data) {
    if (arguments.length == 2) {
        var info = arguments[0]
        var data = arguments[1];
        for (var key in data) {
            $("body").append('
登入後複製
  • ' + info +'key->' + key + '; value->' + data[key] + '
  • ')         }         return     }     if (!data) {         return $("body").append('')     }     if (typeof data === 'object') {         for (var key in data) {             $("body").append('
  • key->' + key + '; value->' + data[key] + '
  • ')         }     } else {         $("body").append('
  • ' + data + '
  • ')     } }

    以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

    相關推薦:

    jQuery原始碼之回呼函數的解析

    #

    以上是jQuery源碼之資料緩衝的學習的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板