Web前端技術(shù)實(shí)驗(yàn)練習(xí)環(huán)節(jié)教學(xué)方法研究

摘 要：本文著力解決學(xué)生在進(jìn)行Web前端技術(shù)課程實(shí)驗(yàn)練習(xí)的過(guò)程中，學(xué)習(xí)效率低下和實(shí)踐無(wú)法聯(lián)系理論的問(wèn)題。以Vue.js前端技術(shù)為例，本文分析了教學(xué)與實(shí)踐過(guò)程的差異性，然后提出了適合于學(xué)生的漸進(jìn)式實(shí)驗(yàn)課程目標(biāo)，并根據(jù)知識(shí)點(diǎn)的復(fù)雜程度對(duì)實(shí)驗(yàn)進(jìn)行了類別的劃分，在此基礎(chǔ)上探討了其具體實(shí)施方法，為Web前端技術(shù)實(shí)驗(yàn)課程提供了高效、可行的教學(xué)方案。

關(guān)鍵詞：Web前端技術(shù);Vue.js;實(shí)驗(yàn)課程;教學(xué)方法

Web前端技術(shù)是計(jì)算機(jī)類院校普遍開設(shè)的一門實(shí)踐類專業(yè)核心課程，上機(jī)實(shí)踐課時(shí)占有較大比例。該課程與其他計(jì)算機(jī)類課程相比，不僅要求學(xué)生具有扎實(shí)的HTML5、CSS、JavaScript、前端框架類技術(shù)等基礎(chǔ)知識(shí)，還要求學(xué)生具備一定的代碼設(shè)計(jì)和編寫能力。Vue.js是當(dāng)前流行的Web前端開發(fā)框架技術(shù)之一[1]，具有學(xué)習(xí)成本低、學(xué)習(xí)曲線平穩(wěn)等的優(yōu)勢(shì)，但是短時(shí)間內(nèi)學(xué)通學(xué)精這門技術(shù)還有著不小的難度。因此，以vue.js為例探討Web前端課程實(shí)踐練習(xí)環(huán)節(jié)的相關(guān)教學(xué)方法，能夠給相關(guān)的任課教師及學(xué)生提供一定的參考和借鑒，具有一定的研究?jī)r(jià)值和意義。

當(dāng)前關(guān)于Web前端技術(shù)的教學(xué)研究，多傾向于整體的教育模式、方法的探討，單純論述實(shí)踐練習(xí)環(huán)節(jié)的較少?，F(xiàn)有的觀點(diǎn)多集中在項(xiàng)目驅(qū)動(dòng)和網(wǎng)絡(luò)在線練習(xí)、討論及答疑[2-4]、模仿工作流程[5]等實(shí)驗(yàn)方法上。這些方法大都關(guān)注實(shí)驗(yàn)課程的宏觀方面，對(duì)課程的微觀實(shí)施方面論述得不夠細(xì)致。而學(xué)生缺乏的正是具體實(shí)驗(yàn)方法的指導(dǎo)，因此本文從學(xué)生在上機(jī)實(shí)踐過(guò)程中遇到的問(wèn)題入手，分析了教學(xué)和實(shí)踐過(guò)程的差異性，提出了分步驟的漸進(jìn)式實(shí)驗(yàn)?zāi)繕?biāo)和實(shí)驗(yàn)的分類練習(xí)方法;并以Vue.js前端技術(shù)為例，對(duì)其中的觀點(diǎn)進(jìn)行了闡釋。

1 學(xué)生在上機(jī)實(shí)踐中遇到的問(wèn)題

（1）基礎(chǔ)知識(shí)不扎實(shí)，查詢資料浪費(fèi)時(shí)間。學(xué)生對(duì)HTML標(biāo)簽、CSS樣式規(guī)則、JavaScript庫(kù)函數(shù)或Vue.js框架知識(shí)等不熟悉，致使在代碼編寫過(guò)程中反復(fù)查詢校驗(yàn)知識(shí)細(xì)節(jié)，從而造成代碼編寫緩慢。

（2）受語(yǔ)法細(xì)節(jié)及語(yǔ)言形式變化困擾。Vue.js技術(shù)存在很多語(yǔ)法形式變化和細(xì)節(jié)，在編寫代碼過(guò)程中，學(xué)生往往無(wú)法區(qū)分和選擇到底應(yīng)該使用那一種語(yǔ)法形式，也容易因?yàn)楹鲆曊Z(yǔ)法細(xì)節(jié)而出錯(cuò)。

（3）對(duì)編程及調(diào)試工具不熟悉。Vue.js主要使用Google等瀏覽器和命令終端進(jìn)行查錯(cuò)，很多學(xué)生存在著看不懂錯(cuò)誤提示的情況，造成調(diào)試過(guò)程浪費(fèi)大量時(shí)間。

（4）實(shí)踐應(yīng)用聯(lián)系不上理論知識(shí)。學(xué)生在解決實(shí)際問(wèn)題時(shí)，往往缺乏做題思路和方法，無(wú)法確定使用那部分知識(shí)來(lái)解決問(wèn)題，知識(shí)信息提取不暢。

2 教學(xué)與實(shí)踐差異性分析

（1）教學(xué)過(guò)程的模型分析。教學(xué)的內(nèi)在本質(zhì)是分解理論，由抽象理論分解成具體、淺顯的知識(shí)點(diǎn);以知識(shí)點(diǎn)為據(jù)點(diǎn)，尋找能夠解決的問(wèn)題域，再由問(wèn)題域設(shè)計(jì)形成對(duì)應(yīng)的代碼示例。這一過(guò)程逐漸細(xì)化和多樣化，從左到右形成樹狀發(fā)散結(jié)構(gòu)。教學(xué)中理論、問(wèn)題、示例的聯(lián)結(jié)模型如下：

抽象理論→細(xì)節(jié)知識(shí)點(diǎn)→對(duì)應(yīng)問(wèn)題域→對(duì)應(yīng)代碼示例

（2）實(shí)踐過(guò)程的模型分析。實(shí)踐解決的是實(shí)際問(wèn)題，本質(zhì)是以實(shí)際問(wèn)題為據(jù)點(diǎn)來(lái)尋找理論方法的過(guò)程。實(shí)際問(wèn)題一般都具有一定的抽象性，有隱藏條件和限制，通過(guò)分析和細(xì)化后變成不可分割的細(xì)節(jié)問(wèn)題。在對(duì)技術(shù)知識(shí)熟練的情況下，可以直接根據(jù)問(wèn)題找到對(duì)應(yīng)的細(xì)節(jié)知識(shí)點(diǎn)，開始編寫代碼;但不熟練的情況下，細(xì)節(jié)問(wèn)題確定后，一般會(huì)尋找解決問(wèn)題的對(duì)應(yīng)示例，然后由對(duì)應(yīng)示例來(lái)確定細(xì)節(jié)知識(shí)點(diǎn)。實(shí)踐中確定采用哪種技術(shù)之后，問(wèn)題、理論、示例的聯(lián)結(jié)模型如下：

抽象問(wèn)題→細(xì)節(jié)問(wèn)題→對(duì)應(yīng)細(xì)節(jié)示例（非必需）→對(duì)應(yīng)細(xì)節(jié)知識(shí)點(diǎn)→代碼實(shí)現(xiàn)

（3）教學(xué)與實(shí)踐過(guò)程的差異性。由上述分析可知，由實(shí)踐到理論的過(guò)程并不順利，首先是因?yàn)榻鉀Q問(wèn)題有繁雜和巧妙、成本高和成本低等的更高層次的考慮;其次教學(xué)過(guò)程和實(shí)踐過(guò)程的信息提取過(guò)程是完全相反的;再次學(xué)生缺乏來(lái)源于真實(shí)案例的訓(xùn)練，教學(xué)時(shí)采用的實(shí)例更有針對(duì)性，但也必然存在角度單一、淺顯、條件及限制因素少、不嚴(yán)謹(jǐn)?shù)娜毕荩瑢?duì)知識(shí)點(diǎn)的考查是平面化的;而實(shí)踐時(shí)的問(wèn)題是來(lái)源于現(xiàn)實(shí)，必然具有角度多、復(fù)雜、條件及限制因素多、嚴(yán)謹(jǐn)性要求更高的特點(diǎn)，而且對(duì)知識(shí)點(diǎn)的考查是非平面化的。

3 學(xué)生上機(jī)實(shí)踐中問(wèn)題的解決思路

針對(duì)語(yǔ)法和形式變化干擾問(wèn)題，需要對(duì)知識(shí)點(diǎn)的分析更加透徹，尤其是對(duì)語(yǔ)法規(guī)則和形式變化要有更針對(duì)性的練習(xí);解決問(wèn)題的思路就是對(duì)經(jīng)常出現(xiàn)的錯(cuò)誤問(wèn)題進(jìn)行分類，并在此基礎(chǔ)上設(shè)計(jì)實(shí)驗(yàn)進(jìn)行強(qiáng)化練習(xí)。在解決該問(wèn)題的同時(shí)，不熟悉編程及調(diào)試工具的問(wèn)題也會(huì)隨之解決。

針對(duì)基礎(chǔ)知識(shí)不扎實(shí)和實(shí)踐應(yīng)用聯(lián)系不上理論的問(wèn)題，由上述分析可知，為了能夠應(yīng)付多變的實(shí)際問(wèn)題，應(yīng)該改變知識(shí)的信息提取方式。也即建立起“問(wèn)題→示例→理論”的索引模式，以替代“理論→問(wèn)題→示例”的索引模式。但是直接從實(shí)踐中建立起“問(wèn)題→示例→理論”的索引模式是困難的，仍需從教學(xué)過(guò)程中的理論、問(wèn)題、示例模型入手，反向建立起可靠的信息索引模式。另外，應(yīng)多從實(shí)際生活中選擇真實(shí)的案例來(lái)練習(xí)，與其他課程相比，Web前端課程實(shí)際生活中的實(shí)例比較多，資源找尋并不困難。

因此，從培養(yǎng)學(xué)生動(dòng)手實(shí)踐能力的角度出發(fā)，針對(duì)學(xué)生在上機(jī)實(shí)踐中遇到的問(wèn)題，按照由易到難、循序漸進(jìn)的教學(xué)思路，逐漸培養(yǎng)學(xué)生對(duì)該課程的自信心，本文設(shè)計(jì)了漸進(jìn)式的實(shí)驗(yàn)?zāi)繕?biāo)：（1）能夠看懂課件、教材及其他資料中的代碼示例;（2）能夠順利對(duì)所給代碼示例進(jìn)行調(diào)試;（3）能夠獨(dú)立思考，寫出各種單一效果的代碼;（4）能夠獨(dú)立寫出復(fù)雜效果的代碼;（5）能夠?qū)⑶岸伺c后端知識(shí)相結(jié)合，構(gòu)建出完整的Web應(yīng)用。

4 實(shí)驗(yàn)的分類

按照知識(shí)點(diǎn)在語(yǔ)義完整的基礎(chǔ)上是否可以再分解，劃分為單一實(shí)驗(yàn)（不可分）和綜合實(shí)驗(yàn)（可分）。

（1）單一實(shí)驗(yàn)有三種。①介紹知識(shí)點(diǎn)語(yǔ)言規(guī)則的實(shí)驗(yàn)。幾乎有編程語(yǔ)言出現(xiàn)的地方就會(huì)有語(yǔ)言規(guī)則，這部分練習(xí)是進(jìn)行后續(xù)獨(dú)立編程的基礎(chǔ)。比如：書寫位置、單詞拼寫、名稱一致性、大小寫、連接符、結(jié)束符等。②介紹知識(shí)點(diǎn)原理規(guī)則的實(shí)驗(yàn)。一般需要介紹原理規(guī)則的知識(shí)點(diǎn)不多，設(shè)計(jì)實(shí)驗(yàn)內(nèi)容時(shí)使用類比及對(duì)比的方法，能夠?qū)⑻卣骼斫獾母鼮榍逦１热纾篤ue生命周期鉤子函數(shù)、指令鉤子函數(shù)等。③知識(shí)點(diǎn)單一應(yīng)用場(chǎng)合的實(shí)驗(yàn)。應(yīng)用性實(shí)驗(yàn)是最重要的，是解決實(shí)際問(wèn)題的核心，豐富性在這部分實(shí)例中非常關(guān)鍵。比如：Vue指令v-for循環(huán)輸出列表、表格和模塊等。

（2）綜合實(shí)驗(yàn)的劃分。按照由易到難的順序來(lái)排列：①知識(shí)點(diǎn)簡(jiǎn)單組合的實(shí)驗(yàn)。知識(shí)點(diǎn)及邏輯關(guān)系部分明確，知識(shí)點(diǎn)考查為平面。②知識(shí)點(diǎn)復(fù)雜組合的實(shí)驗(yàn)。知識(shí)點(diǎn)及邏輯關(guān)系不明確，需要經(jīng)過(guò)思考，知識(shí)點(diǎn)考查為平面。③模擬現(xiàn)實(shí)作品的實(shí)驗(yàn)。截取現(xiàn)實(shí)中網(wǎng)站的網(wǎng)頁(yè)截圖，內(nèi)容具有代表性;知識(shí)點(diǎn)及邏輯關(guān)系不明確，但效果直觀可見，具有豐富的提示信息，知識(shí)點(diǎn)考查不為平面。④模擬現(xiàn)實(shí)問(wèn)題的實(shí)驗(yàn)。問(wèn)題來(lái)源于現(xiàn)實(shí)，并具有代表性，知識(shí)點(diǎn)及邏輯關(guān)系不明確，效果不直觀，提示信息較少，知識(shí)點(diǎn)考查不為平面。

5 實(shí)驗(yàn)練習(xí)的具體方法

（1）實(shí)驗(yàn)練習(xí)的順序。在每個(gè)章節(jié)的學(xué)習(xí)過(guò)程中，要求學(xué)生首先對(duì)課件及課本上的代碼知識(shí)進(jìn)行查詢，然后再進(jìn)行上機(jī)實(shí)驗(yàn)。練習(xí)的順序?yàn)橄冗M(jìn)行單一實(shí)驗(yàn)的練習(xí)，再進(jìn)行綜合實(shí)驗(yàn)的練習(xí);練習(xí)的順序基本按照上文介紹順序進(jìn)行。根據(jù)學(xué)生的掌握情況，來(lái)調(diào)整進(jìn)度。在課時(shí)量較少的情況下，單一實(shí)驗(yàn)可以合并進(jìn)行，以掌握單一應(yīng)用場(chǎng)合為主，同時(shí)解決語(yǔ)法規(guī)則和工具使用問(wèn)題。而綜合實(shí)驗(yàn)不適于合并，要按部就班進(jìn)行。

（2）實(shí)驗(yàn)練習(xí)的方法。知識(shí)點(diǎn)語(yǔ)法規(guī)則的實(shí)驗(yàn)，要求學(xué)生不接助提示工具，完全手動(dòng)輸入;輸入并調(diào)試教師給出的帶有錯(cuò)誤的完整代碼案例，要求學(xué)生找出錯(cuò)誤之后進(jìn)行調(diào)試，引導(dǎo)學(xué)生向語(yǔ)法細(xì)節(jié)注意，也即向錯(cuò)誤學(xué)習(xí)的方法。每個(gè)案例的錯(cuò)誤設(shè)置不要超過(guò)4個(gè)，邏輯部分要盡量簡(jiǎn)單。知識(shí)點(diǎn)原理規(guī)則的實(shí)驗(yàn)，教師不再給出完整代碼，而是以問(wèn)題形式組織實(shí)驗(yàn)內(nèi)容，讓學(xué)生獨(dú)立編寫出代碼。問(wèn)題的設(shè)計(jì)采用類比和對(duì)比的方法，邏輯依然設(shè)計(jì)盡量簡(jiǎn)單，為了降低學(xué)生的實(shí)驗(yàn)難度，要將實(shí)現(xiàn)代碼的關(guān)鍵知識(shí)寫在實(shí)驗(yàn)文檔中，方便學(xué)生進(jìn)行查找。模擬現(xiàn)實(shí)作品的實(shí)驗(yàn)，一定要注意選取的網(wǎng)頁(yè)截圖要對(duì)應(yīng)當(dāng)下所學(xué)的知識(shí)。另外學(xué)生可以從網(wǎng)絡(luò)中直接找到該網(wǎng)頁(yè)，可以看到網(wǎng)頁(yè)的效果和控件的功能，所以選取時(shí)不要選擇后臺(tái)代碼淺顯直觀的網(wǎng)頁(yè)。學(xué)生對(duì)實(shí)驗(yàn)的處理方法不全部相同，沒有標(biāo)準(zhǔn)答案;在實(shí)驗(yàn)講評(píng)時(shí)可以讓不同版本的學(xué)生上臺(tái)講解自己的做題思路，然后由教師綜合評(píng)述方法的優(yōu)劣性、嚴(yán)謹(jǐn)程度及改進(jìn)的方法。模擬現(xiàn)實(shí)問(wèn)題的實(shí)驗(yàn)，也是來(lái)源于現(xiàn)實(shí)的真實(shí)案例，但是是以書面文字形式進(jìn)行問(wèn)題的描述。讓學(xué)生嘗試對(duì)抽象問(wèn)題進(jìn)行分解，然后尋找理論方法進(jìn)行解決。也沒有標(biāo)準(zhǔn)答案，但應(yīng)從界面設(shè)計(jì)的合理性和代碼編寫的技巧性兩個(gè)角度來(lái)選擇進(jìn)行點(diǎn)評(píng)的作業(yè)。

（3）實(shí)驗(yàn)練習(xí)量的變化。語(yǔ)法規(guī)則的實(shí)驗(yàn)隨著新知識(shí)的出現(xiàn)而出現(xiàn)，在課程最初的幾章里，這部分實(shí)驗(yàn)的練習(xí)強(qiáng)度大;但隨著知識(shí)的增多練習(xí)量越來(lái)越少，沒有新知識(shí)出現(xiàn)，就沒有語(yǔ)法規(guī)則的練習(xí)。知識(shí)點(diǎn)原理規(guī)則實(shí)驗(yàn)的練習(xí)量跟章節(jié)中知識(shí)的特點(diǎn)關(guān)系密切，具有不確定性。綜合實(shí)驗(yàn)的練習(xí)量是隨著知識(shí)的積累而逐漸變多，綜合性越來(lái)越強(qiáng)，難度也越來(lái)越加大;最初的幾章可能找不到適合于學(xué)生練習(xí)的綜合實(shí)驗(yàn)，尤其是來(lái)源于現(xiàn)實(shí)的真實(shí)案例，但到最后的章節(jié)時(shí)綜合性實(shí)驗(yàn)就逐漸豐富起來(lái)。

6 總結(jié)

本文對(duì)學(xué)生在Web前端實(shí)驗(yàn)課程中遇到的問(wèn)題進(jìn)行了原因分析，并提出了具體可行的解決方法。不足之處是人數(shù)較少的班級(jí)執(zhí)行效率高，但作業(yè)版本不夠豐富;人數(shù)較多的班級(jí)的作業(yè)版本足夠豐富，但實(shí)驗(yàn)的進(jìn)度要相對(duì)緩慢些。因此，應(yīng)該進(jìn)一步研究對(duì)于不同規(guī)模的班級(jí)，如何設(shè)計(jì)更為合適的實(shí)驗(yàn)或管理方法。

參考文獻(xiàn)：

[1]黑馬程序員.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].人民郵電出版社，2020.

[2]焦禹淦.Web前端開發(fā)技術(shù)課堂教學(xué)改革的實(shí)踐研究[J].科技經(jīng)濟(jì)導(dǎo)刊，2020，28（28）：149+148.

[3]李宗劍.OBE理念下的Web前端設(shè)計(jì)課程教學(xué)改革[J].電子世界，2020，（19）：16-17.

[4]魏歡.前端開發(fā)，數(shù)字媒體應(yīng)用技術(shù)——淺析互聯(lián)網(wǎng)下教學(xué)一體化Web前端開發(fā)課程的教學(xué)模式[J].科學(xué)咨詢（教育科研），2020，（07）：38.

[5]胡曉頻.基于項(xiàng)目驅(qū)動(dòng)的Web前端開發(fā)課程混合式教學(xué)探索[J].計(jì)算機(jī)產(chǎn)品與流通，2020，（05）：191.

項(xiàng)目：南陽(yáng)師范學(xué)院校級(jí)青年項(xiàng)目（編號(hào)：2018QN027）題目：基于智能手機(jī)的實(shí)時(shí)圖像計(jì)數(shù)研究

作者簡(jiǎn)介：梁媛媛（1984— ），女，碩士研究生，研究方向：圖形圖像處理。