李小兰　陈员义

关键词：职场；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前端开发技术课程教学中必须紧跟技术发展前沿和市场需求，不断重构、完善、优化课程教学内容，探索与实践新的教学方法。