第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

jQuery的異步設(shè)計(jì)邏輯也確實(shí)很復(fù)雜，需要思維跳轉(zhuǎn)很活躍，某一個(gè)時(shí)間在這里，下一個(gè)片段又要另一個(gè)地方去了，不是按照同步代碼這樣執(zhí)行的。需要大家有一定的空間跳躍力了。

when方法的設(shè)計(jì)。我們通過模擬的代碼，可以很簡(jiǎn)單的分析整個(gè)流程：

? 1. 傳遞了多個(gè)異步對(duì)象，然后遍歷每個(gè)異步對(duì)象給每一個(gè)對(duì)象綁定done、fail、progess方法，無非就是監(jiān)聽每一個(gè)異步的狀態(tài)（成功，失?。绻峭瓿闪俗匀粫?huì)激活done方法。

? 2. updateFunc是監(jiān)聽方法，通過判斷異步對(duì)象執(zhí)行的次數(shù)來決定是不是已經(jīng)完成了所有的處理或者是失敗處理

? 3. 因?yàn)閣hen也要形成異步操作，比如when().done()，所以內(nèi)部必須新建一個(gè)jQuery.Deferred()對(duì)象，用來給后面鏈?zhǔn)秸{(diào)用。

? 4. 此刻監(jiān)聽所有異步對(duì)象(d1,d2...)的updateFunc的處理都完畢了，會(huì)給一個(gè)正確的通知給when后面的done方法，因?yàn)閐one是通過第三步j(luò)Query.Deferred()創(chuàng)建的，所以此時(shí)就需要發(fā)送消息到這個(gè)上面，即：

deferred.resolveWith(contexts,?values);

? 5. 內(nèi)部的jQuery.Deferred()因?yàn)橥獠拷壎藈hen().done(),所以done自然就收到了updateFunc給的消息了，可以繼續(xù)之后的操作了。

Deferred的then處理：

我們可以把每一次的then操作，當(dāng)做是創(chuàng)建一個(gè)新的deferred對(duì)象，那么每一個(gè)對(duì)象都?jí)虮４孀约旱臓顟B(tài)與各自的處理方法。通過一個(gè)辦法把所有的對(duì)象操作都串聯(lián)起來，這就是then或者pipe管道設(shè)計(jì)的核心思路了。

其實(shí)在內(nèi)部創(chuàng)建了一個(gè)新的Deferred對(duì)象，不過這里的不同是通過傳遞一個(gè)回調(diào)函數(shù)，參數(shù)是newDefer，其實(shí)Deferred內(nèi)部就是為了改變下上下文this為deferred，然后傳遞deferred給這個(gè)回調(diào)函數(shù)了，所以newDefer就指向內(nèi)部的deferred對(duì)象了。

如果then返回的是一個(gè)promise對(duì)象（ajax）的時(shí)候，也可以直接處理了

if?(returned?&&?jQuery.isFunction(returned.promise))?{
??returned.promise()
????.done(newDefer.resolve)
????.fail(newDefer.reject)
????.progress(newDefer.notify);

Deferred源碼剖析

Deferred自身則圍繞這三組數(shù)據(jù)進(jìn)行更高層次的抽象

1、觸發(fā)回調(diào)函數(shù)列表執(zhí)行(函數(shù)名)

2、添加回調(diào)函數(shù)（函數(shù)名）

3、回調(diào)函數(shù)列表（jQuery.Callbacks對(duì)象）

4、Deferred最終狀態(tài)（第三組數(shù)據(jù)除外）

var?tuples?=?[
??//?action,?add?listener,?listener?list,?final?state
??["resolve",?"done",?jQuery.Callbacks("once?memory"),?"resolved"],
??["reject",?"fail",?jQuery.Callbacks("once?memory"),?"rejected"],
??["notify",?"progress",?jQuery.Callbacks("memory")]
]

通過stateString有值這個(gè)條件，預(yù)先向doneList,failList中的list添加三個(gè)回調(diào)函數(shù)，分別是:

doneList?:?[changeState,?failList.disable,?processList.lock]
failList?:?[changeState,?doneList.disable,?processList.lock]

1、changeState 改變狀態(tài)的匿名函數(shù)，deferred的狀態(tài)，分為三種：pending(初始狀態(tài)), resolved(解決狀態(tài)), rejected(拒絕狀態(tài))；

2、不論deferred對(duì)象最終是resolve（還是reject），在首先改變對(duì)象狀態(tài)之后，都會(huì)disable另一個(gè)函數(shù)列表failList(或者doneList)；

3、然后lock processList保持其狀態(tài)，最后執(zhí)行剩下的之前done（或者fail）進(jìn)來的回調(diào)函數(shù)。

4、所以第一步最終都是圍繞這add方法：done/fail/是list.add也就是callbacks.add，將回調(diào)函數(shù)存入回調(diào)對(duì)象中。

沒有使用promise的情況下，實(shí)現(xiàn)了類似promise的功能，666！

觀察者模式中的訂閱方法：

?Done (操作完成)
?Fail (操作失敗)
?Progress (操作進(jìn)行中

觀察中模式中的發(fā)布方法：

?resolve（解決）
?reject（拒絕）
?notify（通知）

而且還提供了可以定義運(yùn)行時(shí)的this對(duì)象的fire，fireWith，所以擴(kuò)展了3個(gè)可以定義上下文的的接口：

resolveWith
rejectWith
notifyWith

“管道”風(fēng)格

CommonJS Promise/A 標(biāo)準(zhǔn)這樣定義的，promise對(duì)象上的then方法負(fù)責(zé)添加針對(duì)已完成和拒絕狀態(tài)下的處理函數(shù)。then方法會(huì)返回另一個(gè)promise對(duì)象，這樣可以形成“管道”風(fēng)格。

promise背后的思想：不是執(zhí)行一個(gè)方法，然后阻塞應(yīng)用程序等待結(jié)果返回，而是返回一個(gè)promise對(duì)象來滿足未來值，即承諾、許諾完成當(dāng)前操作后，會(huì)執(zhí)行預(yù)先設(shè)定的后續(xù)操作

querySelector的IE8兼容處理：在上下文調(diào)用的context元素上指定一個(gè)id，通過這個(gè)限制范圍，這個(gè)方法用的非常廣泛

具體過程：

1、關(guān)鍵是給context設(shè)置一個(gè)id，所以上下文content，就會(huì)存在這個(gè)id限制范圍

2、拼接出查詢的選擇器，附上這個(gè)ID前綴

newSelector:?"[id='sizzle-1405486760710']?div[class='text']"

3、查詢

newContext.querySelectorAll(?newSelector?)

4、因?yàn)閺?qiáng)制加了ID，所以需要?jiǎng)h除

context.removeAttribute("id");

正則表達(dá)式中【$&】的意思

$1、$2、...、$99 ? ?與 regexp 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本。 ? ?

$& ? ?與 regexp 相匹配的子串。 ? ?

$` ? ?位于匹配子串左側(cè)的文本。 ? ?

$' ? ?位于匹配子串右側(cè)的文本。 ? ?

$$ ? ?直接量符號(hào)。 ? ?

document.querySelectorAll?與?element.querySelectorAll區(qū)別：

1、element.querySelectorAll 在文檔內(nèi)找全部符合選擇器描述的節(jié)點(diǎn)包括Element本身

2、選擇上下文是在aaRoot里面，選擇器是.aaron就父節(jié)點(diǎn)，理論是找不到對(duì)應(yīng)的節(jié)點(diǎn)的。但是結(jié)果跟document調(diào)用如出一轍，所以此時(shí)node ele類似document了。

3、可能的查找機(jī)制是這樣的：首先在document的范圍內(nèi)進(jìn)行查找所有滿足選擇器條件的元素，在上面這段代碼中，我們的選擇器是.aaron span，就是所有的直接父元素類名為.aaron的元素。然后，再看哪些元素是調(diào)用querySelector/querySelectorAll的元素的子元素，這些元素將會(huì)被返回。

IE兼容問題：

1、關(guān)于getElementById，在IE8之前是不區(qū)分大小寫的。除此之外，IE8之前在針對(duì)表單的處理時(shí)候，表單的name與id重名，并且name在id之前，則會(huì)返回表單元素

2、關(guān)于getElementsByTagName，如果選擇器是通配符"*"的話，IE6-8會(huì)混雜注釋節(jié)點(diǎn)，所以針對(duì)如果是tag為*的情況，我們需要做一個(gè)兼容的處理

3、關(guān)于getElementsByClassName，IE卻并不支持這個(gè)方法，我們不得不專門為IE實(shí)現(xiàn)這么一個(gè)函數(shù)

為什么排版引擎解析 CSS 選擇器時(shí)一定要從右往左析？

1、要知道DOM樹是一個(gè)什么樣的結(jié)構(gòu)，一個(gè)元素可能有若干子元素，如果每一個(gè)都去判斷一下顯然性能太差。而一個(gè)子元素只有一個(gè)父元素，所以找起來非常方便。你可以看看CSS的選擇器的設(shè)計(jì)，完全是為了優(yōu)化從子元素找父元素而決定的。

2、打個(gè)比如?p span.showing。你認(rèn)為從一個(gè)p元素下面找到所有的span元素并判斷是否有class showing快，還是找到所有的span元素判斷是否有class showing并且包括一個(gè)p父元素快 ？

CSS選擇器分類：

群組選擇器：逗號(hào)“,”
簡(jiǎn)單選擇器：ID、標(biāo)簽、類、屬性、通配符
關(guān)系選擇器：孩子、后代、相鄰、兄弟
偽類選擇器：動(dòng)作偽類、目標(biāo)偽類、語言偽類、狀態(tài)偽類、結(jié)構(gòu)偽類、取反偽類

偽類細(xì)分：

基本篩選器： eq get first lang It not odd root...
內(nèi)容篩選器： contains empty has parent...
可見篩選器： hidden visible
子元素篩選器： first-child nth-child only-child...
表單： bottom checkbox foucs input text...

Deferred 提供了一個(gè)抽象的非阻塞的解決方案（如異步請(qǐng)求的響應(yīng)），它創(chuàng)建一個(gè)promise對(duì)象，其目的是在未來某個(gè)時(shí)間點(diǎn)返回一個(gè)響應(yīng)。簡(jiǎn)單來說就是一個(gè)異步/同步回調(diào)函數(shù)的處理方案。

一：Ajax的改造

$.ajax({
??url:?"aaron.html",
??success:?function(){
?????alert("成功！");
??},
??error:function(){
????alert("失敗！");
??}
})

$.ajax("aaron.html")?//?返回不再是xhr對(duì)象，而是經(jīng)過包裝的Deferred對(duì)象
.done(function(){?alert("成功");?})
.fail(function(){?alert("出錯(cuò)");?});

二：提供一種方法來執(zhí)行一個(gè)或多個(gè)對(duì)象的回調(diào)函數(shù)

$.when($.ajax("a1.html"),?$.ajax("a2.html"))
　　.done(function(){?alert('2次回調(diào)都正確返回了')?})
　　.fail(function(){?alert('出錯(cuò)了');?});

三：可以混入任意的對(duì)象接口中

jQuery的Deferred最好用的地方，就是模塊化程度非常高，可以任意配合使用:

把需要處理的異步操作，用Deferred對(duì)象給包裝一下，然后通過when方法收集異步的操作

function?task(name)?{
??var?dtd?=?$.Deferred();
??setTimeout(function()?{
????dtd.resolve(name)
??},?1000)
??return?dtd;
}
$.when(task('任務(wù)一'),?task('任務(wù)二')).done(function()?{
??alert('成功')
})