Web前端開發課程設置研究

邱紅麗 張舒雅

（河南質量工程職業學院，河南 平頂山 467000）

隨著互聯網的迅猛發展，各種互聯網項目的不斷興起，前端開發也由此逐漸成為一個不可缺少的專業研發角色。Web前端開發在國內開始被重視的時間不超過五年。從2014年至今，“前端工程師”熱度持續走高，百度指數呈現指數增長趨勢。身邊學前端的人越來越多，前端招聘市場也異常熱鬧。雖然近兩年人工智能、大數據很火，但Web前端開發依然熱門。從招聘網站的數據分析來看，Web前端的崗位需求已經遠遠超過主流編程語言Java的開拓人員的數量。YouTube、谷歌等大廠也紛紛將視線轉向Web前端。據統計，我國對于Web前端工程師人員的缺口將達到12萬左右。

與其他計算機主流技術所不同的是，Web前端所包含的知識模塊很多，且隨著實際需求的變化一直在更新迭代。目前而言，HTLL、CSS、JS、DOM仍然是目前前端技術最為基礎也是最為主要的四大基礎模塊。在掌握基礎模塊的基礎上，Web前端工程師還必須進一步將技能層次化、系統化，從而能夠勝任頁面架構、移動頁面開發等任務。

1 什么是Web前端開發

Web前端開發是協調前端設計師和后端工程師實現網站前端的開發、優化、交互的一個職位。在Web前端興起之前，html+css的工作是被視覺人員所承擔的，而js這部分則是由后端完成的。一個簡單的網頁可能用div+css就可以把它寫出來，但是這里面是充滿經驗的。隨著智能手機和移動互聯網的普及，各種定制化的UI風格讓兼容問題變得越來越頭疼。因為要確保一個頁面在任何瀏覽器當中能正常顯示是很不容易的，瀏覽器廠商那么多，各自還有自己的專屬屬性，而且有的還要求在手機中能夠顯示，能夠自適應屏幕等。單純的css無法來控制，就需要學習javascript。因此，有企業開始把html+css+js這部分工作獨立出來，由一個新的崗位來處理，成為一個處理視覺和交互的綜合崗位，這才有了Web前端的出現。

因此，Web前端開發行業是伴隨Web興起而細分出來的行業。實際上，Web前端是最接近產品和設計的工程師，起到銜接產品和技術的作用，它存在互聯網的每個角落。從廣義上來講，所有用戶終端產品與視覺和交互有關的部分，都屬于前端工程師的專業領域。從狹義上講，Web前端就是使用HTML、CSS、JavaScript等專業技能和工具將產品的UI設計稿實現成網站產品，涵蓋用戶PC端、移動端等網頁，處理視覺和交互問題。

2 web前端開發的主要職責及技能要求

Web前端開發的就業面很廣，選擇的崗位有：前端開發工程師、資深前端開發工程師、網站重構工程師、前端架構師等等。他們既要與上游的交互設計師、視覺設計師和產品經理溝通，又要與下游的服務器端工程師溝通，需要掌握的技能非常多。所以，不單單要掌握前端必需的各種技術，同時還需要對后臺的知識以及網站架構和SEO網站優化技術都要有所了解。

Web前端的主要崗位職責如下：

1）負責系統前端的開發和優化，包括PC前端和移動端。

2）與后端工程師協作，完成前端代碼，實現前后端邏輯分離開發，實現交互效果。

3）制作標準優化的代碼，優化網站前端功能設計，解決軟件系統前端相關的穩定性、效率性能的問題。

web前端的主要技能要求如下：

1）精通HTML/HTML5/CSS/CSS3/Javascript/jquery/Ajax/json等前端開發技術。

2）熟悉vue、react、angular、nodejs、bootstrap等常用前端框架，并對框架實現原理有深入了解； 熟悉ES5、ES6新特性。

3）理解Web標準、語義化，可以解決主流瀏覽器及不同版本的兼容性問題。

4）了解服務端后臺技術。

3 專業課課程設置

Web前端處于程序開發的一個重要環節，既要與UI工程師溝通，又要與服務端的工程師溝通。

既然涉及視覺和用戶體驗，首先對UI設計知識，要涉及或者懂一些設計方面的技能和基本素養，比如PS的一些基本操作、切圖、顏色搭配、尺寸設計、屏幕適配方案等。然后，既要精通HTML5、CSS3、JavaScript、JQuery、Ajax等這些核心的Web前端技術，又要具備互聯網交互設計能力，熟悉后端服務器運行環境和數據通信協議，掌握響應式布局框架、Bootstrap、AngularJS等新的JS框架的軟件技術人才。

下面根據web前端工程師的主要職責，對專業課程進行了分模塊設置。

基礎模塊UI設計基礎、美學基礎核心模塊HTML5+CSS3、JavaScript程序設計、JQuery框架模塊Bootstrap、Vue、Angular 、React、 NodeJS進階模塊面向對象程序設計、數據庫、SEO

其中，基礎模塊和進階模塊是與UI設計師和服務端工程師進行交互的模塊。作為Web前端工程師，也要有所了解。在制定課程體系時，可以根據具體上課情況，對不同模塊中的課程重新命名、重新重組，并加上相對應的實訓課程。比如：

1）專業基礎課：把美學基礎作為一個章節融入到UI設計基礎中，再加上UI的實訓課程；

2）專業核心課1：HTML5+CSS3、JavaScript程序設計，再加上靜態前端的實訓課程；

3）專業核心課2：JQuery 、Bootstrap、java（python或其他的后端開發語言）、mysql，再加上軟件開發的實訓課程；

4）專業核心課3：框架課程（包括Vue、Angular 、React、NodeJS），SEO。

4 總結

經過近幾年的快速發展，目前Web前端開發技術棧已經進入成熟期。在Angular 、React和Vue等框架出現后，前端在代碼開發方面的復雜度已經基本得到解決，再加上Node解決前后端分離，前端技術棧本身其實已經非常成熟，新框架的出現，也已經慢慢取代了幾年前的jQuery+Bootstrap模式。在設置課程體系中，可以根據實際情況設置課程，對新的框架技術，可以有所側重的講解。