Web前端技術實驗練習環節教學方法研究

摘 要：本文著力解決學生在進行Web前端技術課程實驗練習的過程中，學習效率低下和實踐無法聯系理論的問題。以Vue.js前端技術為例，本文分析了教學與實踐過程的差異性，然后提出了適合于學生的漸進式實驗課程目標，并根據知識點的復雜程度對實驗進行了類別的劃分，在此基礎上探討了其具體實施方法，為Web前端技術實驗課程提供了高效、可行的教學方案。

關鍵詞：Web前端技術;Vue.js;實驗課程;教學方法

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

當前關于Web前端技術的教學研究，多傾向于整體的教育模式、方法的探討，單純論述實踐練習環節的較少。現有的觀點多集中在項目驅動和網絡在線練習、討論及答疑[2-4]、模仿工作流程[5]等實驗方法上。這些方法大都關注實驗課程的宏觀方面，對課程的微觀實施方面論述得不夠細致。而學生缺乏的正是具體實驗方法的指導，因此本文從學生在上機實踐過程中遇到的問題入手，分析了教學和實踐過程的差異性，提出了分步驟的漸進式實驗目標和實驗的分類練習方法;并以Vue.js前端技術為例，對其中的觀點進行了闡釋。

1 學生在上機實踐中遇到的問題

（1）基礎知識不扎實，查詢資料浪費時間。學生對HTML標簽、CSS樣式規則、JavaScript庫函數或Vue.js框架知識等不熟悉，致使在代碼編寫過程中反復查詢校驗知識細節，從而造成代碼編寫緩慢。

（2）受語法細節及語言形式變化困擾。Vue.js技術存在很多語法形式變化和細節，在編寫代碼過程中，學生往往無法區分和選擇到底應該使用那一種語法形式，也容易因為忽視語法細節而出錯。

（3）對編程及調試工具不熟悉。Vue.js主要使用Google等瀏覽器和命令終端進行查錯，很多學生存在著看不懂錯誤提示的情況，造成調試過程浪費大量時間。

（4）實踐應用聯系不上理論知識。學生在解決實際問題時，往往缺乏做題思路和方法，無法確定使用那部分知識來解決問題，知識信息提取不暢。

2 教學與實踐差異性分析

（1）教學過程的模型分析。教學的內在本質是分解理論，由抽象理論分解成具體、淺顯的知識點;以知識點為據點，尋找能夠解決的問題域，再由問題域設計形成對應的代碼示例。這一過程逐漸細化和多樣化，從左到右形成樹狀發散結構。教學中理論、問題、示例的聯結模型如下：

抽象理論→細節知識點→對應問題域→對應代碼示例

（2）實踐過程的模型分析。實踐解決的是實際問題，本質是以實際問題為據點來尋找理論方法的過程。實際問題一般都具有一定的抽象性，有隱藏條件和限制，通過分析和細化后變成不可分割的細節問題。在對技術知識熟練的情況下，可以直接根據問題找到對應的細節知識點，開始編寫代碼;但不熟練的情況下，細節問題確定后，一般會尋找解決問題的對應示例，然后由對應示例來確定細節知識點。實踐中確定采用哪種技術之后，問題、理論、示例的聯結模型如下：

抽象問題→細節問題→對應細節示例（非必需）→對應細節知識點→代碼實現

（3）教學與實踐過程的差異性。由上述分析可知，由實踐到理論的過程并不順利，首先是因為解決問題有繁雜和巧妙、成本高和成本低等的更高層次的考慮;其次教學過程和實踐過程的信息提取過程是完全相反的;再次學生缺乏來源于真實案例的訓練，教學時采用的實例更有針對性，但也必然存在角度單一、淺顯、條件及限制因素少、不嚴謹的缺陷，對知識點的考查是平面化的;而實踐時的問題是來源于現實，必然具有角度多、復雜、條件及限制因素多、嚴謹性要求更高的特點，而且對知識點的考查是非平面化的。

3 學生上機實踐中問題的解決思路

針對語法和形式變化干擾問題，需要對知識點的分析更加透徹，尤其是對語法規則和形式變化要有更針對性的練習;解決問題的思路就是對經常出現的錯誤問題進行分類，并在此基礎上設計實驗進行強化練習。在解決該問題的同時，不熟悉編程及調試工具的問題也會隨之解決。

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

因此，從培養學生動手實踐能力的角度出發，針對學生在上機實踐中遇到的問題，按照由易到難、循序漸進的教學思路，逐漸培養學生對該課程的自信心，本文設計了漸進式的實驗目標：（1）能夠看懂課件、教材及其他資料中的代碼示例;（2）能夠順利對所給代碼示例進行調試;（3）能夠獨立思考，寫出各種單一效果的代碼;（4）能夠獨立寫出復雜效果的代碼;（5）能夠將前端與后端知識相結合，構建出完整的Web應用。

4 實驗的分類

按照知識點在語義完整的基礎上是否可以再分解，劃分為單一實驗（不可分）和綜合實驗（可分）。

（1）單一實驗有三種。①介紹知識點語言規則的實驗。幾乎有編程語言出現的地方就會有語言規則，這部分練習是進行后續獨立編程的基礎。比如：書寫位置、單詞拼寫、名稱一致性、大小寫、連接符、結束符等。②介紹知識點原理規則的實驗。一般需要介紹原理規則的知識點不多，設計實驗內容時使用類比及對比的方法，能夠將特征理解的更為清晰。比如：Vue生命周期鉤子函數、指令鉤子函數等。③知識點單一應用場合的實驗。應用性實驗是最重要的，是解決實際問題的核心，豐富性在這部分實例中非常關鍵。比如：Vue指令v-for循環輸出列表、表格和模塊等。

（2）綜合實驗的劃分。按照由易到難的順序來排列：①知識點簡單組合的實驗。知識點及邏輯關系部分明確，知識點考查為平面。②知識點復雜組合的實驗。知識點及邏輯關系不明確，需要經過思考，知識點考查為平面。③模擬現實作品的實驗。截取現實中網站的網頁截圖，內容具有代表性;知識點及邏輯關系不明確，但效果直觀可見，具有豐富的提示信息，知識點考查不為平面。④模擬現實問題的實驗。問題來源于現實，并具有代表性，知識點及邏輯關系不明確，效果不直觀，提示信息較少，知識點考查不為平面。

5 實驗練習的具體方法

（1）實驗練習的順序。在每個章節的學習過程中，要求學生首先對課件及課本上的代碼知識進行查詢，然后再進行上機實驗。練習的順序為先進行單一實驗的練習，再進行綜合實驗的練習;練習的順序基本按照上文介紹順序進行。根據學生的掌握情況，來調整進度。在課時量較少的情況下，單一實驗可以合并進行，以掌握單一應用場合為主，同時解決語法規則和工具使用問題。而綜合實驗不適于合并，要按部就班進行。

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

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

6 總結

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

參考文獻：

[1]黑馬程序員.Vue.js前端開發實戰[M].人民郵電出版社，2020.

[2]焦禹淦.Web前端開發技術課堂教學改革的實踐研究[J].科技經濟導刊，2020，28（28）：149+148.

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

[4]魏歡.前端開發，數字媒體應用技術——淺析互聯網下教學一體化Web前端開發課程的教學模式[J].科學咨詢（教育科研），2020，（07）：38.

[5]胡曉頻.基于項目驅動的Web前端開發課程混合式教學探索[J].計算機產品與流通，2020，（05）：191.

項目：南陽師范學院校級青年項目（編號：2018QN027）題目：基于智能手機的實時圖像計數研究

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