章節(jié)設(shè)計(jì)_第五章頁(yè)面代碼

1、HTML5 App商業(yè)開(kāi)發(fā)實(shí)戰(zhàn)教程課程教學(xué)章節(jié)設(shè)計(jì)第五章：頁(yè)面代碼授課教師：Web課程組授課班級(jí):學(xué)時(shí)：11教學(xué)條件計(jì)算機(jī)、局域網(wǎng)環(huán)境教學(xué)素材教材、課件、授課錄像、案例庫(kù)、教學(xué)網(wǎng)站等教學(xué)目標(biāo)設(shè)計(jì)知識(shí)目標(biāo)：（1） 理解單頁(yè)應(yīng)用使用模塊化JS的必要性（2） 掌握J(rèn)S模塊的定義方法（3） 理解數(shù)據(jù)綁定的用途（4） 掌握綁定表達(dá)式、過(guò)濾表達(dá)式和規(guī)則表達(dá)式的用途及設(shè)置方法（5） 掌握常用JS方法以及調(diào)試方法能力目標(biāo)：（1） 學(xué)會(huì)自定義JS類（2） 使用數(shù)據(jù)綁定設(shè)置綁定表達(dá)式實(shí)現(xiàn)控制組件是否顯示（3） 使用數(shù)據(jù)綁定設(shè)置過(guò)濾表達(dá)式控制列表顯示的數(shù)據(jù)（4） 使用數(shù)據(jù)綁定設(shè)置規(guī)則表達(dá)式實(shí)現(xiàn)自動(dòng)計(jì)算（5） 熟練掌

2、握獲取組件JS對(duì)象的方法、數(shù)據(jù)組件的方法以及打開(kāi)頁(yè)面的方法（6） 掌握調(diào)試自己寫(xiě)的JS代碼，以及系統(tǒng)JS代碼的方法教學(xué)內(nèi)容（1） 介紹實(shí)現(xiàn)數(shù)據(jù)綁定功能的綁定表達(dá)式、過(guò)濾表達(dá)式、規(guī)則表達(dá)式的用法；（2） 介紹常用組件的JS方法和系統(tǒng)JS類的常用方法、以及調(diào)試方法。重點(diǎn)：（1） 掌握綁定表達(dá)式、過(guò)濾表達(dá)式、規(guī)則表達(dá)式的用法（2） 常用組件的JS方法和系統(tǒng)JS類的常用方法（3） 掌握調(diào)試JS代碼的方法難點(diǎn)：（1） 定義符合AMD規(guī)范的JS文件（2） 理解表達(dá)式環(huán)境變量及上下文對(duì)象（3） 理解表達(dá)式中當(dāng)前行和計(jì)算行的區(qū)別（4） 調(diào)試系統(tǒng)JS方法課后作業(yè)（1）5.2.5同步訓(xùn)練：設(shè)置綁定表達(dá)式實(shí)現(xiàn)控制折

3、扣信息是否顯示、設(shè)置過(guò)濾表達(dá)式實(shí)現(xiàn)使用一級(jí)分類ID過(guò)濾二級(jí)分類列表、設(shè)置規(guī)則表達(dá)式實(shí)現(xiàn)購(gòu)物車(chē)頁(yè)中的商鋪合計(jì)金額、商品種類數(shù)量的計(jì)算；（2）5.3.5同步訓(xùn)練：參照附錄中仿微店App的頁(yè)面介紹，將開(kāi)發(fā)出來(lái)的頁(yè)面基本串通起來(lái)。教學(xué)過(guò)程設(shè)計(jì)節(jié)5-1：JS基礎(chǔ)（學(xué)時(shí)數(shù)：1）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)問(wèn)題 引入單頁(yè)應(yīng)用如何提高客戶端性能？教師講授引導(dǎo)文法多媒體學(xué)生：思考教師：演示知識(shí)講解知識(shí)點(diǎn)1： 對(duì)單頁(yè)應(yīng)用來(lái)說(shuō)模塊化的開(kāi)發(fā)和設(shè)計(jì)相當(dāng)重要，能夠?qū)崿F(xiàn)異步、動(dòng)態(tài)加載，從而提高客戶端性能知識(shí)點(diǎn)2： 使用RequireJS實(shí)現(xiàn)模塊化。讓客戶端的代碼分成一個(gè)個(gè)模塊，實(shí)現(xiàn)異步、動(dòng)態(tài)加載知識(shí)點(diǎn)3： 模塊

4、管理遵守AMD規(guī)范（Asynchronous Module Definition）知識(shí)點(diǎn)4：通過(guò)define方法，將代碼定義為模塊；通過(guò)require方法，加載模塊知識(shí)點(diǎn)5： W文件同名的JS文件包含一個(gè)JS模塊，JS模塊包含一個(gè)JS類，JS類包括構(gòu)造方法、屬性、實(shí)例方法啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：?jiǎn)l(fā)示范 操作操作1： 打開(kāi)一個(gè)JS文件，展示JS模塊的定義，展示JS模塊中JS類的定義，包括構(gòu)造方法、屬性、實(shí)例方法操作2： 演示自定義一個(gè)符合AMD規(guī)范的JS文件操作3：在其它JS文件中，引用自定義的JS文件問(wèn)題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸

5、納總結(jié)評(píng)估討論（1） 討論在單頁(yè)應(yīng)用中使用模塊化的必要性（2） 展示學(xué)生的討論結(jié)果（3） 考核學(xué)生結(jié)果教師啟發(fā)討論歸納分?jǐn)?shù)激勵(lì)多媒體學(xué)生：思考教師：結(jié)果演示課堂總結(jié)（1） WeX5的JS文件是一個(gè)符合AMD規(guī)范的JS模塊。在這個(gè)JS模塊中定義了一個(gè)JS類并作為模塊的返回結(jié)果，這個(gè)JS類是頁(yè)面代碼的核心，所有的頁(yè)面代碼都在這個(gè)JS類中實(shí)現(xiàn)（2） JS文件包括兩部分內(nèi)容：聲明模塊引用和JS類定義（3） 在JS文件中，this就是JS類本身，通過(guò)this訪問(wèn)JS類的屬性，調(diào)用JS類的方法。在W文件中$model等同于JS文件中的this，同樣可以通過(guò)$model訪問(wèn)JS類的屬性，調(diào)用JS類的方法（4

6、） 在WeX5中，定義模塊時(shí)需要符合以下規(guī)則：一個(gè)文件定義一個(gè)模塊；所有模塊都定義為匿名模塊，按模塊路徑的方式引用。最常用的是一個(gè)模塊定義一個(gè)JS類。教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新教學(xué)過(guò)程設(shè)計(jì)節(jié)5-2：JS表達(dá)式 （學(xué)時(shí)數(shù)：4）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)問(wèn)題 引入在學(xué)生成績(jī)單上使用紅色顯示不及格分?jǐn)?shù)，這種需求要寫(xiě)代碼實(shí)現(xiàn)嗎，數(shù)據(jù)綁定有沒(méi)有簡(jiǎn)便的方法？教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：演示知識(shí)講解知識(shí)點(diǎn)1： 綁定表達(dá)式是展現(xiàn)組件的公共屬性，可以用數(shù)據(jù)控制組件的屬性。常用bind-visible控制組件是否顯示，用bind-style和bind-css控制組

7、件的顯示樣式知識(shí)點(diǎn)2： 過(guò)濾表達(dá)式特指在list組件的filter屬性上設(shè)置的表達(dá)式，用于list組件的數(shù)據(jù)過(guò)濾知識(shí)點(diǎn)3： 規(guī)則表達(dá)式是數(shù)據(jù)組件的特性，用數(shù)據(jù)控制其他數(shù)據(jù)的只讀、必填、約束以及計(jì)算公式知識(shí)點(diǎn)4： 每種表達(dá)式都有自己的環(huán)境變量和上下文對(duì)象，用于表達(dá)式的計(jì)算啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：?jiǎn)l(fā)示范 操作操作1：演示在商品列表頁(yè)面中，設(shè)置折扣span的綁定表達(dá)式bind-visible，實(shí)現(xiàn)折扣小于10時(shí)才顯示，否則不顯示操作2：演示在一級(jí)分類頁(yè)面中，打開(kāi)二三級(jí)分類頁(yè)面，同時(shí)將選中的一級(jí)分類的ID作為參數(shù)傳給二三級(jí)分類頁(yè)面操作3：演示在二三級(jí)分類頁(yè)面中，使用傳

8、入的一級(jí)分類ID過(guò)濾二級(jí)分類列表操作4：演示在購(gòu)物車(chē)頁(yè)中，設(shè)置商品數(shù)據(jù)組件的金額列fMoney的計(jì)算規(guī)則，計(jì)算單個(gè)選中商品金額操作5：演示在購(gòu)物車(chē)頁(yè)中，設(shè)置商鋪數(shù)據(jù)的合計(jì)金額列的計(jì)算規(guī)則，計(jì)算商鋪中已選中商品的合計(jì)金額問(wèn)題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)實(shí)戰(zhàn) 訓(xùn)練完成5.2.5同步訓(xùn)練動(dòng)手實(shí)踐做中學(xué)多媒體真實(shí)系統(tǒng)環(huán)境學(xué)生：實(shí)踐操作教師：巡視檢查評(píng)估討論（1） 討論表達(dá)式環(huán)境變量及上下文對(duì)象的區(qū)別和作用（2） 展示學(xué)生的討論結(jié)果（3） 考核學(xué)生結(jié)果教師啟發(fā)討論歸納分?jǐn)?shù)激勵(lì)多媒體學(xué)生：思考教師：結(jié)果演示課堂總結(jié)（1） 展現(xiàn)組件有很多綁定屬性，通過(guò)設(shè)置表達(dá)式控制組件的展

9、現(xiàn)（2） 常用的綁定屬性有bind-text：控制組件顯示的文本bind-visible：控制組件是否顯示bind-style和bind-css：控制組件顯示的樣式（3） 列表組件中的數(shù)據(jù)不等同于數(shù)據(jù)組件中的數(shù)據(jù)。列表組件中的數(shù)據(jù)可以是一個(gè)數(shù)組，也可以是數(shù)據(jù)組件中的一部分?jǐn)?shù)據(jù)（4） 數(shù)據(jù)組件才有規(guī)則屬性（5） 通過(guò)設(shè)置規(guī)則表達(dá)式控制整個(gè)數(shù)據(jù)集的只讀，或者某個(gè)列的只讀、必填、計(jì)算公式、約束規(guī)則 教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新課后作業(yè)完成5.2.5同步訓(xùn)練中的拓展訓(xùn)練教師講授多媒體學(xué)生：聽(tīng)講教師：布置作業(yè)、提出要求教學(xué)過(guò)程設(shè)計(jì)節(jié)5-3： 常用JS （學(xué)時(shí)數(shù)：4）主要步驟教學(xué)內(nèi)容

10、教學(xué)方法教學(xué)手段師生活動(dòng)問(wèn)題 引入組件有很多方法，系統(tǒng)又提供了很多JS類庫(kù)，哪些是常用的方法？哪些是必須會(huì)的方法？教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：演示知識(shí)講解知識(shí)點(diǎn)1： WeX5為了支持單頁(yè)應(yīng)用模式，特別提供了Shell，用于維護(hù)單頁(yè)應(yīng)用中頁(yè)面的調(diào)度，包括打開(kāi)頁(yè)面，關(guān)閉頁(yè)面，顯示首頁(yè)、顯示側(cè)邊欄等知識(shí)點(diǎn)2： 當(dāng)需要調(diào)用組件的方法時(shí)，就需要先獲取組件的JS對(duì)象，才能調(diào)用組件的方法。通過(guò)ModelBase中的comp方法來(lái)獲取組件JS對(duì)象知識(shí)點(diǎn)3： 頁(yè)面之間可以傳遞三種參數(shù)，其中的?參數(shù)就是需要在當(dāng)前頁(yè)面的上下文中獲取知識(shí)點(diǎn)4： 掌握數(shù)據(jù)組件的方法對(duì)于實(shí)現(xiàn)頁(yè)面邏輯至關(guān)重要知識(shí)點(diǎn)5： WeX

11、5核心庫(kù)中引入了jQuery，因此在頁(yè)面邏輯中，可以直接使用jQuery操作DOM；除此之外，還可以使用ModelBase以下的api來(lái)獲取DOM元素啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：?jiǎn)l(fā)示范 操作操作1：演示定義頁(yè)面標(biāo)識(shí)，使用頁(yè)面標(biāo)識(shí)打開(kāi)頁(yè)面，傳遞參數(shù)操作2：演示使用組件的xid獲取組件的JS對(duì)象操作3：演示使用to方法定位行操作4：演示刪除購(gòu)物車(chē)中選中的商品問(wèn)題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)實(shí)戰(zhàn) 訓(xùn)練完成5.3.5同步訓(xùn)練動(dòng)手實(shí)踐做中學(xué)多媒體真實(shí)系統(tǒng)環(huán)境學(xué)生：實(shí)踐操作教師：巡視檢查評(píng)估討論（1） 討論為什么數(shù)據(jù)組件的方法是常用方法（2）

12、 展示學(xué)生的討論結(jié)果（3） 考核學(xué)生結(jié)果教師啟發(fā)討論歸納分?jǐn)?shù)激勵(lì)多媒體學(xué)生：思考教師：結(jié)果演示課堂總結(jié)（1） Shell打開(kāi)頁(yè)面有兩種方法，一是使用頁(yè)面標(biāo)識(shí)，二是使用頁(yè)面路徑（2） 數(shù)據(jù)組件的方法是最常用的JS方法。例如：取input組件中的值，不使用input組件的val方法，而是使用數(shù)據(jù)組件的val方法，這兩個(gè)方法取到的值是一樣的，但是使用數(shù)據(jù)組件的方法有兩個(gè)好處，一是如果把input組件換成了select組件，代碼不用改；二是只要掌握數(shù)據(jù)組件的方法即可，不用掌握其他組件的方法，使用變得簡(jiǎn)單教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新課后作業(yè)完成5.3.5同步訓(xùn)練中的拓展訓(xùn)練教師講授

13、多媒體學(xué)生：聽(tīng)講教師：布置作業(yè)、提出要求教學(xué)過(guò)程設(shè)計(jì)節(jié)5-4： JS調(diào)試 （學(xué)時(shí)數(shù)：2）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動(dòng)問(wèn)題 引入JS代碼可以調(diào)試嗎？如何調(diào)試？教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：演示知識(shí)講解知識(shí)點(diǎn)1： 使用Chrome瀏覽器的開(kāi)發(fā)人員工具調(diào)試JS代碼知識(shí)點(diǎn)2： 在JS代碼中加debugger;語(yǔ)句，在Chrome瀏覽器中操作頁(yè)面，觸發(fā)代碼執(zhí)行到debugger;語(yǔ)句，進(jìn)入調(diào)試知識(shí)點(diǎn)3： WeX5將系統(tǒng)JS文件合并，以減少網(wǎng)絡(luò)請(qǐng)求，調(diào)試系統(tǒng)JS文件前，先將JS合并文件重命名，合并文件失效后，即可調(diào)試系統(tǒng)JS文件啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：?jiǎn)l(fā)示范 操作操作1：演示使用Chrome瀏覽器調(diào)試購(gòu)物車(chē)頁(yè)的shopCheckboxChange方法操作2：演示重命名系統(tǒng)JS合并文件common.min.js文件操作3：演示調(diào)試data組件的find方法問(wèn)題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)實(shí)戰(zhàn) 訓(xùn)練調(diào)試自定義的JS方法調(diào)試系統(tǒng)的JS方法動(dòng)手實(shí)踐做