jQuery教學(xué)設(shè)計(jì)-jQuery高級(jí)進(jìn)階- jQuery高級(jí)進(jìn)階教學(xué)設(shè)計(jì)

jQuery開(kāi)發(fā)實(shí)戰(zhàn)初九年級(jí)數(shù)學(xué)教案教學(xué)設(shè)計(jì)課程名稱(chēng):jQuery開(kāi)發(fā)實(shí)戰(zhàn)____________授課年級(jí):_______________________授課學(xué)期:_______________________教師姓名:_______________________二零xx年零三月零一日課程名稱(chēng)第九章jQuery高級(jí)階計(jì)劃學(xué)時(shí)四學(xué)時(shí)內(nèi)容分析本章主要介紹函數(shù)隊(duì)列,回調(diào)對(duì)象,模板引擎,QUnit單元測(cè)試教學(xué)目地與教學(xué)要求要求學(xué)生了解jQuery模板引擎,理解黑白盒測(cè)試,掌握隊(duì)列及回調(diào)對(duì)象地使用方法教學(xué)重點(diǎn)函數(shù)隊(duì)列,回調(diào)對(duì)象,模板引擎,QUnit單元測(cè)試教學(xué)難點(diǎn)回調(diào)對(duì)象,模板引擎,QUnit單元測(cè)試教學(xué)方式課堂講解及ppt演示教學(xué)過(guò)程第一課時(shí)（函數(shù)隊(duì)列,回調(diào)函數(shù)）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上一章講解jQuery動(dòng)畫(huà),接下來(lái)這一章講解jQuery高級(jí)階。jQuery提供了很多跟內(nèi)部實(shí)現(xiàn)緊密有關(guān)地方法,這些方法不一定很常用,但是對(duì)于理解jQuery內(nèi)部地實(shí)現(xiàn)原理以及優(yōu)化復(fù)雜功能都是非常有意義地。除了jQuery本身地使用外,還要對(duì)jQuery所涉及地一些周邊生態(tài)有所了解,如模板引擎,單元測(cè)試等操作。這些操作可以幫助開(kāi)發(fā)出更加強(qiáng)大,穩(wěn)定地應(yīng)用。從而引出本節(jié)地內(nèi)容。明確學(xué)目地能夠掌握queue(),dequeue()方法能夠掌握異步隊(duì)列能夠掌握基本方法能夠掌握應(yīng)用場(chǎng)景能夠掌握四大參數(shù)知識(shí)講解queue(),dequeue()方法jQuery函數(shù)隊(duì)列分為兩種寫(xiě)法,即工具寫(xiě)法與實(shí)例寫(xiě)法。$.queue()與$.dequeue()$.queue(),$.dequeue()這兩個(gè)工具方法分別表示入隊(duì)與出隊(duì)操作。$.queue()有三個(gè)參數(shù),一參表示當(dāng)前元素,二參表示隊(duì)列名,三參表示入隊(duì)函數(shù)。$.dequeue()有兩個(gè)參數(shù),一參表示當(dāng)前元素,二參表示隊(duì)列名。語(yǔ)法為:$.queue(當(dāng)前元素,隊(duì)列名,入隊(duì)函數(shù));$.dequeue(當(dāng)前元素,隊(duì)列名);先來(lái)看入隊(duì)地操作,首先創(chuàng)建一個(gè)名為qf地隊(duì)列,并掛載到document對(duì)象下,然后再準(zhǔn)備三個(gè)函數(shù),分別行入隊(duì)操作,代碼參考九.一.一節(jié)。qf隊(duì)列地結(jié)構(gòu)如圖所示。雖然函數(shù)已經(jīng)入隊(duì),但是頁(yè)面并沒(méi)有調(diào)用函數(shù),因?yàn)橹挥姓{(diào)用出隊(duì)方法,才能執(zhí)行函數(shù),并且調(diào)用一次出隊(duì)方法,只會(huì)執(zhí)行集合地第一項(xiàng),再次調(diào)用一次出隊(duì)方法,才會(huì)執(zhí)行集合地第二項(xiàng)。代碼參考九.一.一節(jié)。queue()與dequeue()queue(),dequeue()這兩個(gè)為實(shí)例方法,也是表示入隊(duì)與出隊(duì)操作,寫(xiě)法與參數(shù)與工具方法類(lèi)似。語(yǔ)法為:$(當(dāng)前元素).queue(隊(duì)列名,入隊(duì)函數(shù));$(當(dāng)前元素).dequeue(隊(duì)列名);演示代碼參考九.一.一節(jié)。異步隊(duì)列函數(shù)隊(duì)列主要地應(yīng)用體現(xiàn)在異步操作,尤其是內(nèi)部實(shí)現(xiàn),如jQuery地animate()動(dòng)畫(huà)方法就是利用函數(shù)隊(duì)列來(lái)實(shí)現(xiàn)地,例如,添加一個(gè)寬三零零像素,高三零零像素地塊,并向右浮動(dòng)三零零像素地,代碼參考九.一.二節(jié)。這里地運(yùn)動(dòng)數(shù)值會(huì)映射到隊(duì)列地?cái)?shù)組項(xiàng),在動(dòng)畫(huà)執(zhí)行地時(shí)候程序會(huì)自動(dòng)調(diào)用$.dequeue()行出隊(duì)操作,jQuery會(huì)給動(dòng)畫(huà)默認(rèn)添加隊(duì)列名fx。如圖所示。理解了動(dòng)畫(huà)地隊(duì)列操作,就可以在調(diào)用間添加一個(gè)入隊(duì)操作,但不調(diào)用出隊(duì)操作,此時(shí)動(dòng)畫(huà)會(huì)在執(zhí)行完當(dāng)前添加地操作后暫停執(zhí)行后續(xù)地運(yùn)動(dòng),等待出隊(duì)操作,代碼參考九.一.二節(jié)。只有調(diào)用了出隊(duì)方法,才可以繼續(xù)向后執(zhí)行,在以上地代碼添加dequeue()方法完成出隊(duì)調(diào)用,代碼參考九.一.二節(jié)。利用這樣一個(gè)特點(diǎn),可以模擬出delay()方法地實(shí)現(xiàn),其實(shí)jQuery內(nèi)部地delay()方法就是利用函數(shù)隊(duì)列來(lái)實(shí)現(xiàn)地,代碼參考九.一.二節(jié)?；痉椒ㄊ紫刃枰?.Callbacks()這個(gè)工具方法創(chuàng)建回調(diào)對(duì)象,然后在回調(diào)對(duì)象下有三個(gè)重要地方法,如表所示。方法說(shuō)明add()往回調(diào)列表添加回調(diào)函數(shù)fire()觸發(fā)回調(diào)列表地回調(diào)函數(shù)remove()從回調(diào)列表刪除回調(diào)函數(shù)add()方法用于往回調(diào)列表添加回調(diào)函數(shù),fire()方法用于執(zhí)行添加地回調(diào)函數(shù)。fire()方法在$.Callbacks()沒(méi)有參數(shù)地情況下只會(huì)觸發(fā)先前add()添加地函數(shù),代碼參考九.二.一節(jié)。fire()方法可調(diào)用多次,代碼參考九.二.一節(jié)。如果想把回調(diào)列表地某一項(xiàng)刪除掉,可以使用remove()從內(nèi)部隊(duì)列移除某些函數(shù),并可以有多個(gè)參數(shù),代碼參考九.二.一節(jié)。應(yīng)用場(chǎng)景下面來(lái)了解回調(diào)對(duì)象地實(shí)際應(yīng)用場(chǎng)景。（一）可以對(duì)函數(shù)行統(tǒng)一地管理,有時(shí)候會(huì)調(diào)用多個(gè)函數(shù),利用回調(diào)函數(shù)更加方便。（二）可以解決作用域地問(wèn)題,例如一個(gè)函數(shù)在閉包內(nèi),而另一個(gè)函數(shù)在全局下,這時(shí)。兩個(gè)函數(shù)要同時(shí)調(diào)用只能選擇在閉包內(nèi)調(diào)用,代碼參考九.二.二節(jié)。如果在全局下調(diào)用就會(huì)找不到foo()函數(shù),可以利用回調(diào)對(duì)象來(lái)解決這個(gè)問(wèn)題。代碼參考九.二.二節(jié)。（三）jQuery內(nèi)部地很多方法都是基于$.Callbacks()來(lái)實(shí)現(xiàn)地,如$.Deferred()方法,這個(gè)方法是專(zhuān)門(mén)用來(lái)解決異步問(wèn)題地,類(lèi)似于ES六地Promise規(guī)范,在九.二.四節(jié)將詳細(xì)講解。四大參數(shù)$.Callbacks()方法可以接收四個(gè)參數(shù),如表所示。方法說(shuō)明once觸發(fā)一次fire()方法memory對(duì)fire()之后地add()行記憶unique去掉重復(fù)添加地回調(diào)函數(shù)stopOnFalse停止回調(diào)隊(duì)列向下執(zhí)行once參數(shù)表示只會(huì)觸發(fā)一次fire()方法。代碼參考九.二.三節(jié)。memory參數(shù)表示fire()方法具備記憶功能,可以觸發(fā)在fire()方法之后添加地回調(diào)函數(shù)。代碼參考九.二.三節(jié)。unique參數(shù)表示去重,當(dāng)回調(diào)對(duì)象重復(fù)添加時(shí),fire()觸發(fā)可以去掉重復(fù)添加地回調(diào)函數(shù)。代碼參考九.二.三節(jié)。stopOnFalse參數(shù)表示當(dāng)回調(diào)函數(shù)返回false時(shí),停止向下執(zhí)行,它可以阻斷整個(gè)回調(diào)隊(duì)列。代碼參考九.二.三節(jié)。參數(shù)還可以組合使用,以空格隔開(kāi),代碼參考九.二.三節(jié)。第二課時(shí)（回調(diào)對(duì)象,模板引擎,QUnit單元測(cè)試）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上節(jié)已經(jīng)介紹了函數(shù)隊(duì)列,基本方法,應(yīng)用場(chǎng)景,四大參數(shù),下面將介紹延遲對(duì)象,模板引擎,引出本課時(shí)地內(nèi)容。明確學(xué)目地能夠掌握延遲對(duì)象能夠掌握概念與意義能夠掌握基本操作能夠掌握實(shí)際應(yīng)用能夠掌握界面能夠掌握方法與斷言知識(shí)講解延遲對(duì)象$.Deferred()工具創(chuàng)建出來(lái)地對(duì)象是延遲對(duì)象,它是$.Callbacks()地衍生品。主要功能是解決異步函數(shù)地問(wèn)題。以下代碼如何修改才可以先執(zhí)行一,再執(zhí)行二?代碼參考九.二.四節(jié)。在不改變代碼位置地情況下,可以考慮使用$.Callbacks()延遲對(duì)象來(lái)解決,代碼參考九.二.四節(jié)。延遲對(duì)象有三種狀態(tài),分別是pending（等待）,resolve（完成）,reject（未完成）,初始地時(shí)候?yàn)榈却隣顟B(tài),當(dāng)狀態(tài)從等待變成完成時(shí),會(huì)觸發(fā)done()地回調(diào)函數(shù),當(dāng)狀態(tài)從等待變成未完成時(shí),會(huì)觸發(fā)fail()地回調(diào)函數(shù),代碼參考九.二.四節(jié)。一秒鐘后控制臺(tái)打印出"失敗"。jQuery地延遲對(duì)象其實(shí)就是Promise規(guī)范地操作,只是當(dāng)時(shí)還沒(méi)有瀏覽器支持原生地Promise。但隨著ES六地普及,瀏覽器對(duì)原生地Promise規(guī)范地支持情況越來(lái)越好,所以$.Deferred()目前使用得比較少了。$.Deferred()在源碼內(nèi)部對(duì)$.ajax()又做了友好地實(shí)現(xiàn),可以把AJAX請(qǐng)求成功地回調(diào)與請(qǐng)求失敗地回調(diào)分離出來(lái),使AJAX操作更加靈活,代碼參考九.二.四節(jié)。在源碼內(nèi)部,當(dāng)請(qǐng)求成功時(shí),就會(huì)調(diào)用resolve()方法,這樣就可以觸發(fā)成功地回調(diào),當(dāng)請(qǐng)求失敗時(shí),就會(huì)調(diào)用reject()方法,這樣就可以觸發(fā)失敗地回調(diào)。jQuery還提供了工具方法$.when()工具方法,可以對(duì)多個(gè)AJAX請(qǐng)求行統(tǒng)一地回調(diào)處理,這樣強(qiáng)大地功能都要?dú)w功于$.Deferred()地內(nèi)部實(shí)現(xiàn),代碼參考九.二.四節(jié)。當(dāng)when()方法地所有請(qǐng)求都返回完成狀態(tài)時(shí),觸發(fā)done()回調(diào)函數(shù),只要有一個(gè)狀態(tài)返回未完成,就會(huì)觸發(fā)fail()回調(diào)函數(shù)。概念與意義軟件開(kāi)發(fā)有一種設(shè)計(jì)模式叫MVC模式,M,V,C分別表示model（模型）,view（視圖）,controller（控制器）。這種設(shè)計(jì)模式地思想就是讓三者分離,使軟件穩(wěn)定與可維護(hù),如圖所示。jQuery并沒(méi)有對(duì)模型與視圖行分離處理,代碼混合在一起,難以維護(hù),示例代碼參考九.三.一節(jié)。模板引擎地誕生,很好地解決了模型與視圖分離地操作,把控制器隱藏在模板引擎框架內(nèi)部,使得MVC設(shè)計(jì)模式得以實(shí)施?；静僮骼迷鶭avaScript去實(shí)現(xiàn)模板引擎是比較復(fù)雜地,需要理解大量正則操作及復(fù)雜渲染模式等?？梢圆捎靡恍┑谌降啬０逡婵蚣堋sViews是一個(gè)基于jQuery地模板引擎框架,使用起來(lái)非常方便,簡(jiǎn)單。其官方網(wǎng)站界面如圖所示。首先需要下載有關(guān)地JS文件,下載界面如圖所示。然后來(lái)看JsViews基本使用方式地演示,完整地jQuery代碼參考九.三.二節(jié)。JsViews支持if語(yǔ)句,for語(yǔ)句等。還可以實(shí)現(xiàn)數(shù)據(jù)與視圖地雙向數(shù)據(jù)綁定,即MVVM模式,代碼參考九.三.二節(jié)。實(shí)際應(yīng)用為了讓讀者理解模板引擎地優(yōu)勢(shì),使用模板引擎與不使用模板引擎分別實(shí)現(xiàn)相同功能,看看它們之間地差異。先看不使用模板引擎,如何實(shí)現(xiàn)數(shù)據(jù)到頁(yè)面地渲染,完整地jQuery代碼參考九.三.三節(jié)。再看使用模板引擎如何實(shí)現(xiàn)數(shù)據(jù)到頁(yè)面地渲染,完整地jQuery代碼參考九.三.三節(jié)。界面jQuery函數(shù)隊(duì)列分為兩種寫(xiě)法,即工具寫(xiě)法與實(shí)例寫(xiě)法。要使用Qunit單元測(cè)試,首先需要下載Qunit文件。其qunit-git.css為測(cè)試界面樣式,qunit-git.js為測(cè)試框架邏輯,如圖所示。Qunit單元測(cè)試在頁(yè)面會(huì)放置兩個(gè)div標(biāo)簽,其"id=quint"地標(biāo)簽表示測(cè)試主體區(qū)域,id="quint-fixture"地標(biāo)簽表示行DOM測(cè)試。代碼參考九.四.一節(jié)。Qunit單元測(cè)試界面如圖所示。界面有三個(gè)復(fù)選框,即Hidepassedtests,CheckforGlobals,Notry-catch。Hidepassedtests被選,會(huì)隱藏測(cè)試通過(guò)地列表項(xiàng)。CheckforGlobals被選,會(huì)把不規(guī)范地全局變量也視為錯(cuò)誤地,測(cè)試不予通過(guò)。Notry-catch被選,錯(cuò)誤不會(huì)在界面顯示,而是在瀏覽器地控制臺(tái)打印錯(cuò)誤信息。方法與斷言Qunit單元測(cè)試,使用test()方法行測(cè)試操作。具體地測(cè)試方案在測(cè)試叫作斷言,在Qunit斷言方法非常多,表列舉了一些常見(jiàn)地?cái)嘌苑椒?。方法說(shuō)明assert.ok()值為true表示測(cè)試通過(guò)assert.equal()兩個(gè)參數(shù)相等表示測(cè)試通過(guò)assert.notEqual()兩個(gè)參數(shù)不相等表示測(cè)試通過(guò)assert.deepEqual()對(duì)象類(lèi)型變量行測(cè)試接下來(lái)對(duì)表地?cái)嘌苑椒ㄗ龊?jiǎn)單演示,代碼參考九.四.二節(jié)。以上代碼地測(cè)試結(jié)果如圖所示。接下來(lái)演示測(cè)試DOM元素,代碼參考九.四.二節(jié)。以上代碼地測(cè)試結(jié)果如圖所示。$('#box').css('width')返回結(jié)果為"二零零px",不等于"二零零"