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

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