-
常見的異步操作:
1、定時器setTimeout
2、postmessage
3、WebWorker
4、CSS3 動畫
5、XMLHttpRequest
6、HTML5的本地數據讀寫JS是單線程語言:
1、就簡單性而言,把每一件事情(包括GUI事件和渲染)都放在一個線程里來處理是一個很好的程序模型,因為這樣就無需再考慮線程同步這些復雜問題
2、另一方面,他也暴露了應用開發中的一個嚴重問題,單線程環境看起來對用戶請求響應迅速,但是當線程忙于處理其它事情時,就不能對用戶的鼠標點擊和鍵盤操作做出響應
Deferreds:Deferreds 的引入對這個問題提供了一個更好的解決方案,它是非阻塞的,并且與代碼完全解耦
查看全部 -
靜態接口設計:
靜態方法是直接操作數據類的 data_user.access 方法。將數據存放在全局緩存(我們稱之為“globalCache”)中,即 “globalCache” 包含了多個 DOM Element 的 “cache”,并在 DOM Element 上添加一個屬性,存放 “cache” 對應的 uid
$.data() 與?$.fn.data() 的區別:一個對應jQuery對象,一個對應DOM元素
1:jQuery.data(element,[key],[value]),每一個element都會有自己的一個{key:value}對象保存著數據,所以新建的對象就算有key相同它也不會覆蓋原來存在的對象key所對應的value,因為新對象保存是是在另一個{key:value}對象中
2:$("div").data("a","aaaa") 它是把數據綁定每一個匹配div節點的元素上
說到底,數據緩存就是在目標對象與緩存體間建立一對一的關系,整個Data類其實都是圍繞著 thia.cache 內部的數據做增刪改查的操作
查看全部 -
jQuery.access:
jQuery的方法設計大都是多用的,可以根據傳遞參數的個數判斷是set還是get處理,不僅如此jQuery還對參數的傳遞類型還抽出了一個處理的方法jQuery.access,我們可以傳遞字符串、數組、對象等等,根據這種類型自動分解成接口所有能接受的參數
查看全部 -
Data類的設計:
1、先在jQuery內部創建一個cache對象{}, 來保存緩存數據。 然后往需要進行緩存的DOM節點上擴展一個值為expando的屬性
2、接著把每個節點的dom[expando]的值都設為一個自增的變量id,保持全局唯一性。 這個id的值就作為cache的key用來關聯DOM節點和數據。也就是說cache[id]就取到了這個節點上的所有緩存
3、每個uid對應一個elem緩存數據,每個緩存對象是可以由多個name value(名值對)對組成的,而value是可以是任何數據類型的
注:expando的值,用于把當前數據緩存的UUID值做一個節點的屬性給寫入到指定的元素上形成關聯橋梁,所以,所以元素本身具有這種屬性的可能性很少,所以可以忽略沖突。
查看全部 -
jQuery緩存的設計思路:
數據存放在內存中,通過一個映射關系與直接的DOM元素發生關聯
數據緩存,jQuery現在支持兩種:
1. dom元素,數據存儲在jQuery.cache中。
2. 普通js對象,數據存儲在該對象中。數據緩存的特點:
1、如果是DOM元素,通過分配一個唯一的關聯id把DOM元素和該DOM元素的數據緩存對象關聯起來,關聯id被附加到以jQuery.expando的值命名的屬性上,數據存儲在全局緩存對象jQuery.cache中。在讀取、設置、移除數據時,將通過關聯id從全局緩存對象jQuery.cache中找到關聯的數據緩存對象,然后在數據緩存對象上執行讀取、設置、移除操作。
2、如果是Javascript對象,數據則直接存儲在該Javascript對象的屬性jQuery.expando上。在讀取、設置、移除數據時,實際上是對Javascript對象的數據緩存對象執行讀取、設置、移除操作。
3、為了避免jQuery內部使用的數據和用戶自定義的數據發生沖突,數據緩存模塊把內部數據存儲在數據緩存對象上,把自定義數據存儲在數據緩存對象的屬性data上。
查看全部 -
緩存處理的靜態與實例方法的區別:
1.jQuery.data()可以實現為dom元素或js對象添加緩存
2.$("ele").data()實是對前者的擴展,其目的是可以方便的通過選擇器為多個dom元素添加緩存數據查看全部 -
把很多屬性,比如狀態標志都寫到dom節點中,也就是HTMLElement。
好處:直觀,便捷
壞處:
1、循環引用
2、直接暴露數據,安全性?
3、增加一堆的自定義屬性標簽,對瀏覽器來說是沒意的
4、取數據的時候要對HTML節點做操作jQuery緩存系統的的好處:
A.允許我們在DOM元素上附加任意類型的數據,避免了循環引用的內存泄漏風險
B.用于存儲跟dom節點相關的數據,包括事件,動畫等
C.一種低耦合的方式讓DOM和緩存數據能夠聯系起來jQuery緩存系統的真正魅力在于其內部應用中,動畫、事件等都有用到這個緩存系統。試想如果動畫的隊列都存儲到各DOM元素的自定義屬性中,這樣雖然可以方便的訪問隊列數據,但也同時帶來了隱患。如果給DOM元素添加自定義的屬性和過多的數據可能會引起內存泄漏,所以要盡量避免這么干。
對于jQuery來說,數據緩存系統本來就是為事件系統服務而分化出來的,到后來,它的事件克隆乃至后來的動畫列隊實現數據的存儲都是離不開緩存系統,所以數據緩存也算是jQuery的一個核心基礎了
$.data(element, key, value )
$(elem).data(key, value)查看全部 -
內存泄露是指一塊被分配的內存既不能使用,又不能回收,直到瀏覽器進程結束。
常見內存泄露的幾種情況:
1、循環引用
2、Javascript閉包
3、DOM插入
其實絕大部分內存泄漏都不是由Javascript引起的,瀏覽器的回收機制已經做的相當好了,多數的泄漏都是由于與DOM交互而產生的。
循環引用很常見且大部分情況下是無害的,但當參與循環引用的對象中有DOM對象或者ActiveX對象時,循環引用將導致內存泄露。
由于DOM元素(節點)也是對象, 所以我們可以直接擴展DOM元素的屬性,但是如果給DOM元素添加自定義的屬性和過多的數據可能會引起內存泄漏,所以應該要盡量避免這樣做。?
查看全部 -
stopOnFalse: 當一個回調返回false 時中斷調用
jQuery.Callbacks("once memory")的組合了,無非就是組合起來的時候要考慮一些判斷了
查看全部 -
Unique:確保一次只能添加一個回調(所以在列表中沒有重復的回調)
過濾重復的比較簡單,因為是數組的保存方式,我們可以在入口處通過indexOf判斷即可
查看全部 -
memory:保持以前的值,將添加到這個列表的后面的最新的值立即執行調用任何回調 (像一個遞延 Deferred)。
結果可以看出,我們在執行cbs.add(fn2);的時候,此時除了把fn2添加到了回調隊列之外而且還立刻執行了這個方法,唯一的區別就是,參數是用的之前的。所以解釋就叫“保持以前的值”。
私有變量memory緩存這上一個參數的屬性,我們靠firingStart用來定位最后通過add增加的回調數據的索引。在遍歷的時候直接通過firingStart的起始索引定位,然后傳遞memory的參數,而且實現這種“保持以前的值”的設計
查看全部 -
once定義是很明確的,確保這個回調列表只執行( .fire() )一次(像一個遞延 Deferred)
查看全部 -
通過學習了觀察者模式的思路,我們知道callback需要在內部維護著一個list的隊列數組,用于保存訂閱的對象數據。同時也需要提供了add、remove、fire等訂閱、發布、刪除類似的接口
查看全部 -
jQuery回調對象
jQuery.Callbacks一般開發者接觸的很少,雖然jQuery向開發者提供了外部接口調用,但是$.Callbacks()模塊的開發目的是為了給內部$.ajax() 和 $.Deferred()模塊提供統一的基本功能組件。它可以用來作為類似基礎定義的新組件的功能。
jQuery.Callbacks還提供“once memory”等參數用來處理:
1、once: 確保這個回調列表只執行( .fire() )一次(像一個遞延 Deferred)。
2、memory: 保持以前的值,將添加到這個列表的后面的最新的值立即執行調用任何回調 (像一個遞延 Deferred)。
3、unique: 確保一次只能添加一個回調(所以在列表中沒有重復的回調)。
4、stopOnFalse: 當一個回調返回false 時中斷調用。
查看全部 -
觀察者模式的實際應用:
設計該模式背后的主要動力是促進形成松散耦合。
觀察者模式所做的工作就是在解耦,讓耦合的雙方都依賴于抽象,而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。
查看全部
舉報