Jquery有多神奇?

明天我就要開(kāi)始改改jq的源碼了…

為了配合項(xiàng)目,我設(shè)想了一個(gè)方式,修改readylist的執(zhí)行順序,以便資源加載完成之后開(kāi)始初始化頁(yè)面…

先留個(gè)坑,明天實(shí)現(xiàn)以后寫(xiě)后續(xù)…

2017.2.22 22:41

待續(xù)。。。

-------------------------------------------------

2017-10-21 13:43:01

我去。一個(gè)待續(xù)就等到了這個(gè)時(shí)候了,要不是來(lái)看看,我都快忘了還有這么個(gè)東西

這還是在天津的時(shí)候搞的東西,現(xiàn)在我在杭州,新公司已經(jīng)待了快半年了,看看之前的代碼,來(lái)把這篇補(bǔ)上好了。。。

--------------------------------------------------

正文開(kāi)始

我印象里邊這個(gè)修改是因?yàn)槲覀冊(cè)瓉?lái)的項(xiàng)目里頭有一個(gè)include插件,也是作為一個(gè)jQuery的插件存在的

然后這個(gè)插件是同步的,用xhr,這導(dǎo)致了很大的性能問(wèn)題

所以我希望能改成異步的

但是異步的加載,響應(yīng)domready事件的時(shí)間點(diǎn)又不對(duì)了

這樣會(huì)導(dǎo)致如果頁(yè)面的js提前加載完畢,但是依賴的插件并沒(méi)有加載回來(lái),這樣就會(huì)報(bào)錯(cuò)

所以我希望在jQuery執(zhí)行domready回調(diào)的時(shí)候,等待我的異步加載完成,加載完成了再開(kāi)始回調(diào),這樣就不會(huì)有問(wèn)題

現(xiàn)在就有兩個(gè)問(wèn)題

1.?我需要監(jiān)測(cè)異步加載的完成(當(dāng)然我們的插件僅依賴于jQuery,所以不需要做依賴管理)

2.?我需要修改jQuery的源碼,以等待異步加載完成

具體的include源碼在我的github上,本來(lái)是在天津的時(shí)候說(shuō)把我自己寫(xiě)的一些插件都放上去,但是后來(lái)工作的關(guān)系,沒(méi)時(shí)間,公司也不讓上傳代碼,我自己電腦基本就懶得弄那些東西了。。。

其實(shí)說(shuō)出來(lái)之后解決就比較簡(jiǎn)單了,代碼簡(jiǎn)單到隨便瞄一眼就能看懂,不解釋了,上代碼


jquery1.9.1

找到這個(gè)domReady處理函數(shù),看一眼,里面起作用的就是被我包起來(lái)的那句話


readyList.resoveWith( document, [ jQuery ] );


把這個(gè)封起來(lái),做成一個(gè)函數(shù),然后監(jiān)測(cè)如果加載了include插件,并且include插件并沒(méi)有完成所有加載,那么將這個(gè)回調(diào)傳給include插件

否則執(zhí)行


另外一部分就是在include中處理了,這里不多講

主要是等待,這個(gè)簡(jiǎn)單到不行,做一個(gè)計(jì)數(shù)器,javascript又沒(méi)有線程問(wèn)題,直接加減就可以了

稍微注意一下的是,我做異步加載使用的是script標(biāo)簽形式,這有幾個(gè)好處,第一是這個(gè)異步,第二個(gè)是這個(gè)能跨域

但是這個(gè)也會(huì)有個(gè)問(wèn)題,兼容性問(wèn)題,直接使用原生的技術(shù)就會(huì)遇到這種狗屁的問(wèn)題

在ie8下,標(biāo)簽沒(méi)有l(wèi)oad事件,只有一個(gè)readystatechange事件(這個(gè)事件會(huì)相應(yīng)超過(guò)一次,需要判斷狀態(tài)值,跟xhr差不多,不過(guò)狀態(tài)沒(méi)有那么多就是了),所以需要注冊(cè)兩種事件

but

恩,萬(wàn)事萬(wàn)物都有一個(gè)but。。。

but?ie9尼瑪支持兩種事件,所以這里需要稍微注意一下


..............................end.........................

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,679評(píng)論 18 503
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,349評(píng)論 25 708
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,372評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,200評(píng)論 0 1
  • 總角心跡如枯蓬 無(wú)朱無(wú)碧無(wú)再生 閑人何解冬雪下 桃紅梅紅或猩紅
    就叫Oscar好了閱讀 107評(píng)論 1 0