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

李小蘭　陳員義

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

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 基于職場需求培養(yǎng)職業(yè)規(guī)劃能力

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

6 結束語

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