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

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

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

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

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

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

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

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

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

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

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

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

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

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