對于前端開發(fā)者而言，HTML5全棧工程師前景更好！

2017突然流行起來的一個新職位“全棧工程師”。大概在很多人眼里，全棧工程師是一個全能人才，事實的確如此。以Web前端為主，需求、后臺、前臺、用戶、設(shè)計等內(nèi)容為輔。全棧工程師擁有更廣闊的視野和更廣泛的學(xué)識，全棧工程師可以從更高的角度去看待問題，這比某個專業(yè)領(lǐng)域的開發(fā)專家，更不容易做出錯誤的決策。

8/2定律在哪都適用，全棧工程師就是掌握20%常用技能的人，但這20%的技能會有80%的幾率被用到，剩下那80%不常用的，讓我們Google吧。

那HTML5全棧工程師好就業(yè)嗎？為什么現(xiàn)在很多企業(yè)都熱衷于HTML5全棧工程師呢？這是很多想學(xué)HTML5全棧的小伙伴比較關(guān)注的問題。本文，千鋒武漢HTML5培訓(xùn)的講師就給大家詳細(xì)分析一下！

為什么現(xiàn)在很多企業(yè)都熱衷于HTML5全棧工程師呢？

1、全局性思維

現(xiàn)代項目的開發(fā)，需要掌握多種技術(shù)?；ヂ?lián)網(wǎng)項目，需要用到后端開發(fā)、前端開發(fā)、界面設(shè)計、產(chǎn)品設(shè)計、數(shù)據(jù)庫、各種移動客戶端、三屏兼容、restFul API設(shè)計和OAuth等等，比較前衛(wèi)的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3這些技術(shù)以及像第三方開發(fā)像微信公眾號微博應(yīng)用等等。

Web前端也遠(yuǎn)遠(yuǎn)不是從前的切個圖用個jQuery上個AJAX兼容各種瀏覽器那么簡單了?，F(xiàn)代的Web前端，你需要用到模塊化開發(fā)、多屏兼容、MVC，各種復(fù)雜的交互與優(yōu)化，甚至你需要用到Node.js來協(xié)助前端的開發(fā)。

所以說一個現(xiàn)代化的項目，是一個非常復(fù)雜的構(gòu)成，我們需要一個人來掌控全局，他不需要是各種技術(shù)的資深專家，但他需要熟悉到各種技術(shù)。對于一個團(tuán)隊特別是互聯(lián)網(wǎng)企業(yè)來說，有一個全局性思維的人非常非常重要。

2、溝通成本

項目越大，溝通成本越高，做過項目管理的都知道，項目中的人力是1+1<2的，人越多效率越低。因為溝通是需要成本的，不同技術(shù)的人各說各話，前端和后端是一定會掐架的。每個人都會為自己的利益而戰(zhàn)，毫不為已的人是不存在的。

而全棧工程師的成本幾乎為零，因為各種技術(shù)都懂，胸有成竹，自己就全做了。即使是在團(tuán)隊協(xié)作中，與不同技術(shù)人員的溝通也會容易得多，讓一個后端和一個前端去溝通，那完全是雞同鴨講，更不用說設(shè)計師與后端了。但如果有一個人懂產(chǎn)品懂設(shè)計懂前端懂后端，那溝通的結(jié)果顯然不一樣，因為他們講的，彼此都能聽得懂。

3、創(chuàng)業(yè)公司

對于創(chuàng)業(yè)公司來說，全棧工程師的價值是非常大的，創(chuàng)業(yè)公司不可能像大公司一樣，各方面的人才都有。所以需要一個多面手，各種活都能一肩挑，獨擋多面的萬金油。對于創(chuàng)業(yè)公司，不可能說DBA前端后端客戶端各種人才全都備齊了，很多工作請人又不飽和，不請人又沒法做，外包又不放心質(zhì)量，所以全棧工程師是省錢的一妙招。雖然說全棧工程師工資會比一般的工程師會高很多，但綜合下來，成本會低很多。

對于前端開發(fā)者而言，HTML5全棧工程師前景更好

近年來，隨著HTML5的快速發(fā)展，微軟、蘋果、谷歌等行業(yè)巨頭級企業(yè)都紛紛向其示好。HTML5相關(guān)崗位需求逐年增加，行業(yè)崗位薪資直線飆升。權(quán)威分析指出，至少在10年之內(nèi)，HTML5會是Web應(yīng)用的最佳解決方案、移動互聯(lián)網(wǎng)領(lǐng)域的主宰者。從事HTML5相關(guān)開發(fā)工作，就業(yè)前景一片光明。

與此同時，企業(yè)用人也發(fā)生了一些變化，精通一門開發(fā)技術(shù)，并且會多門開發(fā)語言的全棧工程師，成了市場上的“香餑餑”。因為企業(yè)開發(fā)的項目往往是多語言、跨平臺，團(tuán)隊成員之間溝通很重要，會多語言開發(fā)、具有全局意識不但能降低溝通成本，還能提升開發(fā)效率。這樣的人才，企業(yè)當(dāng)然搶著要。

、什么是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)；
SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形；
SVG 使用 XML 格式定義圖形；
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失；
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)；

二、SVG的優(yōu)勢

SVG 圖像可通過文本編輯器來創(chuàng)建和修改；
SVG 圖像可被搜索、索引、腳本化或壓縮；
SVG 是可伸縮的；
SVG 圖像可在任何的分辨率下被高質(zhì)量地打??；
SVG 可在圖像質(zhì)量不下降的情況下被放大；

三、使用SVG繪制圓形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
 <circle cx="200" cy="100" r="100" stroke="#afeedd"
 stroke-width="5" fill="#f0ddff" />
 </svg>
</body>
</html>

<svg>標(biāo)簽中height和width屬性是設(shè)置SVG文檔的高寬，version屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間；
<circle>是SVG中用來創(chuàng)建圓形的標(biāo)簽，cx 和 cy 屬性定義圓中心的 x 和 y 坐標(biāo)，如果忽略這兩個屬性，那么圓點會被設(shè)置為 (0, 0)，r屬性定義圓的半徑；
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓，fill 屬性設(shè)置形狀內(nèi)的顏色；
我們看一下演示效果圖：

1.png

四、使用SVG繪制矩形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
 <rect x="50" y="100" width="300" height="150"
 style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
 </svg>
</body>
</html>

rect 元素的 width 和 height屬性可定義矩形的高度和寬度；
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）；
CSS 的 stroke-width 屬性定義矩形邊框的寬度；
CSS 的 stroke 屬性定義矩形邊框的顏色；
屬性定義矩形的左側(cè)位置，y 屬性定義矩形的頂端位置
CSS 的 fill-opacity 屬性定義填充顏色透明度，取值為0-1；
CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度，取值為0-1；
我們看一下效果演示圖：

2.png

五、使用SVG繪制多邊形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#B4EEB4;stroke:#DB7093 ;stroke-width:3;fill-rule:nonzero;"/>
 </svg>
</body>
</html>

<polygon> 標(biāo)簽用來創(chuàng)建含有不少于三個邊的圖形，也就是多邊形，多邊形是由直線組成，其形狀是"封閉"的；
points 屬性定義多邊形每個角的 x 和 y 坐標(biāo)，x和y之間用逗號隔開，坐標(biāo)與坐標(biāo)之間用空格隔開；
fill-rule屬性用于指定使用哪一種算法去判斷畫布上的某區(qū)域是否屬于該圖形“內(nèi)部”，它有三個有效值nonzero（非零）、evenodd（奇偶）、inherit，默認(rèn)為nonzero；
我們來看一下效果演示圖：

3.png

六、SVG模糊效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
 <filter id="keai" x="0" y="0">
 <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
 </filter>
 </defs>
 <rect width="150" height="100" stroke="red" stroke-width="5"
 fill="#7EC0EE" filter="url(#keai)" />
 </svg>
</body>
</html>

<filter>元素id屬性定義一個濾鏡的唯一名稱；
<feGaussianBlur>元素定義模糊效果；
in="SourceGraphic"這個部分定義了由整個圖像創(chuàng)建效果；
stdDeviation屬性定義模糊量；
<rect>元素的濾鏡屬性用來把元素鏈接到"f1"濾鏡，這里是一個矩形；
效果演示圖：

4.png

七、SVG 陰影

<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <defs>
 <filter id="myImg" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
 <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
 <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 </filter>
 </defs>
 <rect width="200" height="200" stroke="#90EE90" stroke-width="5" fill="#FFEFDB" filter="url(#myImg)" />
 </svg>
</body>

<defs>元素定義短并含有特殊元素（如濾鏡）定義；
<filter>標(biāo)簽用來定義SVG濾鏡，<filter>標(biāo)簽使用必需的id屬性來定義向圖形應(yīng)用哪個濾鏡；
<feOffset>元素是用于創(chuàng)建陰影效果；
<feColorMatrix>過濾器是用來轉(zhuǎn)換偏移的圖像使之更接近黑色的顏色；
<feGaussianBlur>元素的stdDeviation屬性定義了模糊量；
演示圖：

5.png

八、SVG漸變

<body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
 <defs>
 <linearGradient id="yuan" x1="0%" y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(238,210,238);stop-opacity:1" />
 <stop offset="100%" style="stop-color:rgb(255,250,205);stop-opacity:1" />
 </linearGradient>
 </defs>
 <ellipse cx="200" cy="200" rx="150" ry="80" fill="url(#yuan)" />
 </svg>
</body>

漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應(yīng)用到同一個元素上；
<linearGradient>元素用于定義線性漸變，<linearGradient>標(biāo)簽必須嵌套在<defs>的內(nèi)部；
<linearGradient>標(biāo)簽的id屬性可為漸變定義一個唯一的名稱；
<linearGradient>標(biāo)簽的X1，X2，Y1，Y2屬性定義漸變開始和結(jié)束位置；
漸變的顏色范圍可由兩種或多種顏色組成，每種顏色通過一個<stop>標(biāo)簽來規(guī)定，offset屬性用來定義漸變的開始和結(jié)束位置；
演示圖：

6.png

中國互聯(lián)網(wǎng)行業(yè)崛起的大背景下，大家普遍對互聯(lián)網(wǎng)行業(yè)發(fā)展持樂觀態(tài)度。據(jù)今年第二季度招聘信息顯示，目前web前端工程師日均崗位缺口已經(jīng)超過50000，隨著互聯(lián)網(wǎng)+的深入發(fā)展，html5作為前端展示技術(shù)，市場人才需求量將呈直線上漲。

Web前端工程師的崗位職責(zé)是利用HTML、CSS、Java、DOM等各種web技能結(jié)合產(chǎn)品的界面開發(fā)，制作標(biāo)準(zhǔn)化純手工代碼，并增加交互功能，豐富互聯(lián)網(wǎng)的Web開拓，致力于改進(jìn)用戶體驗?，F(xiàn)如今，Web前端工程師已經(jīng)成為各大互聯(lián)網(wǎng)公司不可或缺的熱門職位，從業(yè)者隊伍日漸龐大，這其中不乏零基礎(chǔ)學(xué)習(xí)者和轉(zhuǎn)行人士。為了方便大家系統(tǒng)而全面的掌握前端基礎(chǔ)知識，小編特意整理了web前端開發(fā)入門學(xué)習(xí)線路圖，涵蓋20大實戰(zhàn)項目的知識點詳細(xì)講解，希望對大家的學(xué)習(xí)有所幫助。

項目一：PC端網(wǎng)站布局

所含知識點：HTML基礎(chǔ)，CSS基礎(chǔ)，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出及元素類型，瀏覽器兼容與寬高自適度，定位，錨點與透明，圖片整合，表格，CSS屬性與濾鏡

項目二：HTML5+CSS3基礎(chǔ)項目

所含知識點：HTML5新增的元素與屬性，表單域增強元素，CSS3選擇器，文字字體相關(guān)樣式，CSS3位移與變形處理，CSS3 2D轉(zhuǎn)換與過度動畫，CSS3 3D轉(zhuǎn)換與關(guān)鍵幀動畫，彈性盒模型，媒體查詢，響應(yīng)式設(shè)計

項目三：WebApp頁面布局項目

所含知識點：移動端頁面設(shè)計規(guī)范，移動端切圖，文字流式/控件彈性/圖片等比例/特殊設(shè)計的100%布局，等比縮放布局，viewport/meta，rem/vw的使用，flexbox詳解，移動web特別樣式處理（reset, 1px border, 高清圖片）

項目四：原生JavaScript交互功能開發(fā)項目

所含知識點：基本語法，循環(huán)語句，函數(shù)與數(shù)組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲，正則表達(dá)式，Ajax，面向?qū)ο蠡A(chǔ)，運動與游戲開發(fā)

項目五：面向?qū)ο筮M(jìn)階與ES5/ES6應(yīng)用項目

所含知識點：Promise/A+，設(shè)計模式（觀察者模式等），原型鏈，構(gòu)造函數(shù)，執(zhí)行上下文棧與執(zhí)行上下文，變量對象與活動對象，作用域鏈，閉包，this，ES5，ES6

項目六：JavaScript工具庫自主研發(fā)項目

所含知識點：DOM庫，事件庫，AJAX庫，原型和繼承庫，MVVM核心庫，基于SPA的路由庫

項目七：jQuery經(jīng)典交互特效開發(fā)

所含知識點：時間軸特效，tab頁面切換效果，網(wǎng)頁定位導(dǎo)航特效，滑動門特效，焦點圖輪播特效，導(dǎo)航條菜單效果，瀑布流特效，彈出層效果，倒計時效果，抽獎效果

項目八：PHP+MySQL后端基礎(chǔ)項目

所含知識點：PHP，MySQL，HTTP(s)協(xié)議詳解，Ajax進(jìn)階、跨域與Defered，Apache與Nginx 環(huán)境搭建與配置，接口的定義，Mock數(shù)據(jù)，Restful，前后端聯(lián)調(diào)，前端安全(XSS,CSRF,JSON注入)

項目九：前端工程化與模塊化應(yīng)用項目

所含知識點：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模塊化

項目十：PC端全棧開發(fā)項目

所含知識點：大首頁、列表頁與詳情頁展示與交互特效、搜索、登錄與注冊、購物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平臺系統(tǒng)前端

項目十一：應(yīng)用Vue.js開發(fā)WebApp項目

所含知識點：Vue.js基礎(chǔ)，模塊化，單文件組件，路由，與服務(wù)器通信，狀態(tài)管理，單元測試與生產(chǎn)發(fā)布，服務(wù)端渲染SSR與Nuxt.js，基于Vue.js企業(yè)級項目開發(fā)(Mint UI, Element UI)

項目十二：應(yīng)用React.js開發(fā)WebApp項目

所含知識點：ReactJS基礎(chǔ)，JSX語法，組件，flux+Redux，React，Router路由，動畫效果，基于React 企業(yè)級項目研發(fā)( Antd, Antd Mobile）

項目十三：應(yīng)用Angular開發(fā)WebApp項目

所含知識點：TypeScript 基礎(chǔ)與進(jìn)階，開發(fā)環(huán)境配置，Hello World，架構(gòu)、模塊與組件，模板，元數(shù)據(jù)、數(shù)據(jù)綁定與數(shù)據(jù)顯示，表單，服務(wù)與指令，依賴注入，路由，Ionic 3 MUI框架

項目十四：微信公眾號開發(fā)

所含知識點：初識微信公眾號，訂閱號的基本功能，使用百度BAE實現(xiàn)代碼的快速上線，使用Git完成線上代碼部署，公眾號開發(fā)權(quán)限及功能接入，微信JSSDK接口API，微信場景項目開發(fā)與接入

項目十五：微信小程序開發(fā)

所含知識點：微信小程序初探，小程序入門必學(xué)，小程序組件體驗，小程序大功能，項目實戰(zhàn)帶你征服小程序

項目十六：React Native

所含知識點：React Native 初探，React Native 項目導(dǎo)航，React Native 項目文本框，React Native 項目滾動分頁，React Native 項目第三方登錄，React Native 其他組件

項目十七：各類混合應(yīng)用開發(fā)

所含知識點：自主原生Navtive Hybrid(iOS、Android)，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架MUI + HTML5+

項目十八：NodeJS全棧開發(fā)

所含知識點：

（1）Node.js基礎(chǔ)項目——NodeJS介紹，開發(fā)環(huán)境搭建，模塊與包管理工具，CommonJS模塊，URL網(wǎng)址解析，QueryString參數(shù)處理，HTTP模塊，HTTP小爬蟲，request方法，事件 events模塊，文件 fs模塊，Stream 流模塊，原生路由與參數(shù)接收，讀取圖片文件，npm scripts，Yarn 與 PM2

（2）MongoDB——MongoDB介紹與環(huán)境搭建，數(shù)據(jù)庫常用命令，Collection聚集集合，document文檔操作，聚集集合查詢，NodeJS連接MongoDB

（3）GraphGL——GraphQL初探：從REST到GraphQL，GraphGL安裝，準(zhǔn)備數(shù)據(jù)源，搭建GraphQL服務(wù)器，數(shù)據(jù)查詢

（4） Express——express 介紹，安裝和創(chuàng)建基于Express的項目，Express 4.1x 初始化項目詳解，路由簡介，模板引擎EJS，模板引擎Pug（Jade）

（5）Koa——Koa入門、Koa應(yīng)用、中間件、Context、async await、請求與響應(yīng)

（6）測試框架mocha——搭建框架、斷言assert、項目測試、運行多個測試

（7）socket 即時通信項目——Socket簡介和通訊流程，基于net模塊實現(xiàn)socket，WebSocket，Socket.io

項目十九：Node.js高級全棧項目

所含知識點：基于Vue+Node+MongoDB+微信的高級全棧項目開發(fā)

項目二十：大數(shù)據(jù)可視化

所含知識點：數(shù)據(jù)可視化入門，數(shù)據(jù)可視化基礎(chǔ)，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高級應(yīng)用，D3.js 應(yīng)用工具：NVD3、n3，charts，Highcharts，F(xiàn)usionCharts，Polymaps

在前端學(xué)習(xí)的起步階段，最重要的就是要有明確目標(biāo)和合理的學(xué)習(xí)規(guī)劃，為此小編特別為大家總結(jié)了web前端基礎(chǔ)學(xué)習(xí)階段的四大學(xué)習(xí)要點，希望能讓大大家的學(xué)習(xí)變得更加高效：

一、基本知識的掌握

在我們梳理的知識架構(gòu)中，按照我們分析的兩個維度里最前置的、最淺顯的部分，作為打基礎(chǔ)的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認(rèn)為這部分知識和內(nèi)容掌握。

二、常用工具的掌握

對于常用工具的掌握應(yīng)該掌握一些有大公司或?qū)I(yè)團(tuán)隊背景的流行工具，這些工具的熟練掌握能夠提升專業(yè)度、職業(yè)度，同時，能提升我們的工作效率。

三、溝通技巧的掌握

在國內(nèi)，技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案，在執(zhí)行過程中又缺乏相關(guān)產(chǎn)品、交互設(shè)計等人員的溝通，大多是在自己的思路貫徹下進(jìn)行開發(fā)，久而久之，我們習(xí)慣于信任自己的觀點、在自己的視角看問題，對于挑戰(zhàn)總是百般地“據(jù)理”力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在用戶的視角看問題。

四、良好的開發(fā)習(xí)慣

開發(fā)習(xí)慣是養(yǎng)成的，一旦有不好的習(xí)慣，對于將來去修正帶來的將是很大的麻煩，培養(yǎng)良好的開發(fā)習(xí)慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文檔、先寫注釋等等。

最后希望大家通過自己的努力與學(xué)習(xí)，都能成為一名能力全棧的web前端工程師。

在線咨詢

上一篇：電腦網(wǎng)頁通過XPath注入介紹
下一篇：JS｜帶有控制按鈕的簡單幻燈展示

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

對于前端開發(fā)者而言，HTML5全棧工程師前景更好！

、什么是SVG？

二、SVG的優(yōu)勢