銜接職場的Web前端開發課程重構探究

李小蘭　陳員義

關鍵詞：職場；Web 前端；工程師；職業技能

中圖分類號：G642 文獻標識碼：A

文章編號：1009-3044（2023）10-0145-03

0 引言

隨著互聯網的快速發展，傳統的網頁制作、網頁設計崗位已經被邊緣化，甚至被淘汰了。而另一個新型的職業崗位：Web前端工程師，在近幾年占據市場主導地位，幾乎每個互聯網企業都會招聘一個經驗豐富的Web前端工程師，Web2.0甚至3.0的發展也對當前的Web前端開發提出了更高的要求。在現階段，一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度。很多大公司即使開出高薪也很難招聘到理想的前端開發工程師[1]。然而殘酷的現實是不少高職高專院校的師資水平及Web前端開發課程的設置與定位、教學實踐等問題都還定格在Web 1.0時代。直接造成職場上的崗位需求與高職高專計算機專業畢業生的就業需求嚴重脫節，中間造成巨大的真空地帶。

上述的真空地帶被市場上各大計算機培訓機構所吞噬，稍微有點名氣的培訓機構都把Web前端開發課程的崗位直接對接市場上的Web前端工程師，并作為重點培訓項目。其中緣故是：這門課程的入門學習曲線平滑，比較適合高職高專學生的學知水平，同時容易出教學成果，學員經過一段時間的學習及實踐，可以比較順利地把Web前端設計效果圖轉換成比較炫及且實用的Web頁面，從而提高學員的成就感，增強學員的自信心。這樣就自然有利于把學員打造成合格的Web前端工程師，并且讓學員迅速地在職場應聘到自己比較滿意的崗位，可以快速地形成品牌效應。

培訓機構與高職院校教學模式不同的關鍵點在于培訓機構能夠做到與時俱進，隨著Web前端開發技術的不斷更新及Web前端工程師的崗位職責變遷，可以迅速地調整項目的培訓目標、計劃等內容，始終做到與職場需求無縫對接。

為了讓高職高專的學生少走彎路，不需要先流入培訓市場，再到人才市場。為學生節省時間、資金等成本，讓學生能夠在校期間通過系統地學習直接掌握Web前端開發的技能；讓高職高專院校的培養目標及定位能夠直接與職場需求銜接，提高學生畢業生專業對口率及就業率。為此Web前端開發課程構建及教學模式重構就顯得迫切需要。

1 依據職場需求，歸納初、中級Web 前端工程師能力及分析就業前景

在互聯網行業，人才和企業供給是失衡的，人才的需求量遠遠大于其供給量。特別是隨著“互聯網+”的提出以及未來十幾年的發展趨勢，這種供需矛盾將日益加劇。通過查閱拉勾網、智聯招聘、前程無憂、獵聘網等大型專業招聘網站，發現每天都發布眾多的Web前端工程師崗位。并且根據拉勾網的調查研究Web前端工程師的供求關系達到1：4，同時，Web前端工程師將作為未來最容易就業、薪資較高的熱門職業。在眾多Web前端工程師的相關招聘信息里，Web 前端工程師被分為四級：初級、中級、高級、資深，最簡單的區分方法主要體現在工作經驗上及掌握的職業技能、職業素養、職業行為等方方面面。

本文主要以職業技能作為切入點。崗位職業技能要求也是高職高專院校重構Web前端開發課程教學內容和實踐環節的重要依據。同時，由于高職高專院校的培養目標定位是初、中級Web前端工程師，通過詳細分析、梳理企業發布的招聘信息，可以清晰地歸納初、中、高、資深級Web前端工程師的職位描述（崗位職責）、職位要求（或任職資格）、薪資情況。其中初、中級具體層次劃分如表1。

2 基于職場需求的課程理念與目標

2.1 基于職場需求的課程理念

Web前端開發課程是一個大課程，它的理念更新快，涉及技術比較多。為了符合職場需求的發展趨勢。必須做到以下兩點：首先課程理念要做到與時俱進，持續更新教學內容，做到讓學生深刻體會到“學有所用，學有所思”，多次反復在現場展示各招聘網對Web前端人才的需求及對職業技能的要求。同時，強調它的學習曲線比較平，容易出效果，可以有效地提高學生的學習興趣，激發學習的熱情。其次要多寫代碼，通過不斷模仿網站加強職業技能，學習編程，特別作為就業時成為一名碼農的學生，在校期間沒有寫代碼并且到達一定數量是無法符合任職資格的。需要達到“熟能生巧”的目標，“熟”指定的是學生的職業技能的熟練程度，“巧”表示學生的創新能力。歸根到底通過各種途徑要做到三多：“多寫代碼、多仿站、多創新”，融會貫通所學課程的知識和技能，著力培養學生完成實際應用開發的能力[2]，讓學生在競聘過程中有作品自己的展示，提高競爭力。

2.2 基于職場需求的課程目標

Web前端開發課程目標是培養優秀的Web前端開發專業技術人才，使職業素質、職業技能、行為素質達到初、中級Web前端工程師的職場需求，即符合任職要求（或任職資格）。一般說來，學生能否順利就業并取得成就，在很大程度上取決于其的職業素質、職業技能、行為素質，素質及技能越高的人，獲得成功的機會就越多。所以只有把職業素質、職業技能、行為素質三者在基于職場需求教學模式中加以協調發展，才能有效地促進Web前端開發技術課程教學目標向技能化、專業化、職場化方向發展，讓學生成為優秀的Web前端開發工程師。

3 基于職場需求的教學核心——課程體系設置

Web前端開發課程是一個大課程，它涉及的技術比較多，如此眾多內容中需要在有限課時中講授完，同時保持各個Web技術教學的連續性，就必須科學地甄選。甄選的主要依據是學生的學識能力及現實中職場需求，所以合理地安排課程內容、課時就顯得尤其重要。

Web前端開發課程的基礎核心技術的內容是HT?ML5、CSS3、JavaScript。它們涉及Web前端的結構、表現層、行為層。首先Html5、CSS3的學習門檻低，只要學生能熟練書寫代碼及認識一些英文單詞即可，關鍵是多加練習，所以Web前端開發技術中的HTML5與CSS3這部分要強調它們的語義性及書寫代碼的規范性以達到職場需求。其次通過分析主流各類網站，讓學生全方位地了解、學習書寫代碼的規范化及通用技巧。增設CSS3的編程語言Sass，提高CSS代碼的可重用性、可維護性，同時可提高書寫CSS代碼的效率。最后為了適應職場需求，有效地提高工作效率，增設HTML與CSS的主流框架內容，如：傳統的面向PC端的960Grid、網易NEC等框架，以及興起的面向移動端的Bootstrap、AmazeUI、Vue等框架。

Web前端開發課程中另一個重要的核心技術是JavaScript，它是Web前端的行為層。這部分內容由于學生的學識問題只講授基本編程知識，以便降低學生的受挫折感。以中小網站所需要解決的問題為目標，如簡單的動畫及交互效果，在JavaScript、CSS3的基礎上以JavaScript 的框架jQuery 為切入點，主要講授jQuery基礎編程，其中最主要的內容是各種插件在網站的應用，使學生能做出完整的中小型Web頁面。

上述主要涉及Web前端開發課程的講授的內容部分。但在課程設置中實踐部分更為重要，不斷地實踐，在實踐不斷犯錯誤、遇到新問題，鍛煉學生自我解決問題的能力。在此過程中再不斷深化Web前端開發技術，提高學生Web前端開發技能。實踐課程內容分為兩部分：仿站和分析開源項目的源代碼，讓學生尋找自己感興趣的網站，然后要求學生自己做Web前端部分。或通過威客、項目外包網站等途徑，讓學生分析客戶給定項目的需求，做出Web前端頁面。要求學生至少要完成20 個各種類型網站的Web 前端部分，積累技能及知識，強調Web前端的結構、表現和行為的獨立性及相關性；介紹一些主流JavaScript的框架，如Node.js、Vue.js、Ext JS等知識，拓寬學生的視野，為學生今后提供一個明確學習內容、就業方向。

4 基于職場需求的教學新思路、新方法

4.1 基于職場需求的教學新思路

CDIO 分別代表構思（Conceive）、設計（Design）、實現（Implement）和運作（Operate），它以產品研發到產品運行的生命周期為載體，讓學生以主動的、實踐的、課程之間有機聯系的方式學習工程。CDIO 工程教育理念倡導以綜合的培養方式使學生具備工程基礎知識、個人能力、人際團隊能力和工程系統能力。近年來，基于CDIO 理念的項目驅動教學模式已成為工程教育領域公認的發展方向，得到了廣泛的應用[3-6]。

在Web前端開發課程的教學思路有別于傳統的思路，不再是重理論輕實踐，具體表現為：大部分教學都是講授一遍，讓學生書寫代碼量少，實踐內容更少，這樣學生自然獲得的職業技能就少，解決問題能力不足。為解決傳統教學模式產生的弊端，應使用開源項目或學生感興趣的網站作為教學案例，進行項目驅動教學。

基于職場需求的教學新思路主要體現在“少講多練”的循環過程。重要的特點是依據學生的學識水平，通過每次講解少量的Web前端開發技術，然后進行項目分析，完美詮釋這些技術在產品中的應用。通過反復優化案例的代碼來加深理解相關的知識點，逐步掌握Web前端開發技術。特別注意的是高職高專學生的學識層次原因，不可能通過講授一遍就讓學生理解、掌握相關的職場技能，上述過程是一個循環過程，直到學生掌握Web前端開發相關技術為止。

4.2 基于職場需求的教學新方法

Web前端開發課程的教學方法主要采用微視頻Demo法及翻轉課堂法。通過事先錄制好微視頻再上傳到網絡教學平臺，同時配套的相關資料及資源也上傳。在每次上課前兩周要求同學們自主學習本周微視頻并動手完成視頻的所有Web前端代碼，同時記錄無法完成的代碼及遇到的問題，通過在課堂上進行講授，重點解決遇到的問題及不懂的知識點。引導學生使用Markdown語言或通過博客園網站書寫有關技術類文章，記錄自己的學習歷程。每天進步一點，不斷提高自己的自學能力及技能。

同時根據生產環境的需求，模擬Web前端開發場景，如：在威客網站或者外包網站的查詢相關的項目，將學生分成若干個開發小組并成立工作室，通過互相學習，團體合作，快速學習Web前端開發技能并完成所要求的Web頁面。最后橫向比較各個開發小組開發出的Web前端頁面的優劣，讓學生可以做到熟練地運用Web開發技術在相應的場景中，并學會與自己的上游和下游團隊的合作。在此過程中，需要學生花費大量的時間來訓練、學習代碼規范并書寫代碼。

5 基于職場需求培養職業規劃能力

職業規劃能力需要全面的、長期的關注及培養。本課程中的職業規劃涉及的主要內容：在培養學生Web前端開發技能中滲透行業的發展趨勢及職場崗位的需求變化，隨著學生學識水平的提高及職業技能成熟化，學生渴望在職場希望進一步提升或者職場角色的轉變，則需要提前了解相關職位及所需的職業技能。教師可在授課過程中給學生提供必要的指導，明確崗位轉換方向：若繼續技術類工作，則可晉級或轉變的崗位有：JS工程師、Web全棧工程師、AI工程師（Python方向）等崗位；若轉變成技術管理類工作，則可轉變的崗位有：項目經理、項目架構師、項目分析師，可讓學生通過國家軟考了解相關知識。最終讓學生對自己的將來職業有一個比較清晰的認知，具備一定的職業規劃能力。

6 結束語

通過重構Web前端開發技術課程，已取得初步成效，2021、2022屆畢業生不少同學都應聘到了Web前端開發崗位，成為合格的Web前端工程師。Web前端開發崗位要求將隨著技術進步和市場的需求不斷變化，因此，在今后的Web前端開發技術課程教學中必須緊跟技術發展前沿和市場需求，不斷重構、完善、優化課程教學內容，探索與實踐新的教學方法。