2018年，我覺得前端可以從這三個方向可以突破
前端邏輯層（包括三大框架准潭，webpack趁俊，前端數(shù)據(jù)管理）
前端交互層（包括css3，canvas刑然，svg寺擂，vr等，以及對應(yīng)性能優(yōu)化）
node服務(wù)器層（即服務(wù)器領(lǐng)域泼掠，以及前端開發(fā)工具的開發(fā)）
當然還可以說怔软，有electron這樣開發(fā)桌面應(yīng)用的，但是我覺得大部分人的規(guī)劃還是在web領(lǐng)域范疇的择镇。
一挡逼、前端邏輯層
前端邏輯層解決的問題：前端的渲染問題。
其實就是沐鼠，從后端拿到的各種數(shù)據(jù)（數(shù)據(jù)庫的結(jié)構(gòu)化數(shù)據(jù)挚瘟，各種素材）叹谁，如何組合成頁面元素饲梭。
前端的渲染，其實就是 模板+數(shù)據(jù) = 頁面
① html 負責結(jié)構(gòu)
② css 負責樣式
③ js 負責邏輯
只有模板沒有后端數(shù)據(jù)的頁面我們可以理解為靜態(tài)頁面
而我們目前主流的三大框架藐唠，則提供 模板與數(shù)據(jù)之間的映射關(guān)系山析。
在邏輯層的研究购裙，主要就是學習并熟練三大框架： Vue, React, Angular
這一塊是我們90%前端，日常工作的主要部分兜叨。也是很多公司面試會去重點考察的內(nèi)容。
但是衩侥，目前的行情已經(jīng)不是国旷，你會個新框架就可以任性拿OFFER的時期了。
前端的井噴的情況下茫死，僅僅會一些基礎(chǔ)知識是不夠的跪但。你必須往下深挖。
可以深挖的部分
①框架部分： 舉個例子峦萎，如 Vue+ Vuex+ Vue-router+axios的全家桶
react和angular的也類似屡久，有這么一套全家桶忆首。
要想在前端競爭中取得優(yōu)勢，需要在這些框架的原理上深挖被环。
研究： a. 源碼和實現(xiàn)原理 （理論）
?????b.?常見的應(yīng)用場景和常見問題的實現(xiàn)?（經(jīng)驗）
?????c.?同類問題的橫向?qū)Ρ龋ū热缬昧藇uex?需要了解一下?redux是怎么實現(xiàn)的）
②構(gòu)建部分： webpack + npm/yarn + 腳手架（如vue-cli） +sass
構(gòu)建部分糙及，其實是一塊很容易出區(qū)分度的領(lǐng)域。你研究透一點筛欢，你就越能駕馭住項目的變化浸锨。
研究： a. webpack的配置和對應(yīng)應(yīng)用場景
????b.?npm的命令使用，以及一些高級的用法（架設(shè)私有npm或者自己寫全局包等）
????c.?腳手架快速搭建的過程版姑，以及如何自定義更改
????d.?如何配置eslint和單元測試等
③代碼規(guī)范部分： es6 + ts + css規(guī)范 等等等
代碼規(guī)范不多說揣钦，前端的js和css都是設(shè)計得很粗糙的語言。如果你想hold住更大型的項目漠酿，那么規(guī)范是你不可忽視的地方冯凹。
邏輯層部分，是我們通常意義上理解的前端本職炒嘲。
二宇姚、前端交互層
所謂交互層，可以理解為我們常說的 特效夫凸。
當前的趨勢下浑劳，移動端瀏覽器的性能逐步提升。未來一個大的趨勢就是
前端開發(fā)的效果夭拌，正無限逼近原生效果
同時一些大廠也在紛紛提前布局了魔熏，之前驚艷四方的天貓造物節(jié) H5
淘寶造物節(jié)-風靡朋友圈的h5怎么做的？
如果我們要在這波浪潮上取得先機鸽扁，那么就必須提前學習蒜绽。
也許再過三年，前端的開發(fā)特效的能力桶现，也會成為標配技能躲雅。
可以分三塊來看
1.呈現(xiàn)效果學習：
很多同學不是不會特效，而是不知道要實現(xiàn)成什么樣子骡和。用前端的各種東西鼓搗了相赁，終于出來了特效，但是效果卻很難看慰于。
不不不钮科，做特效，應(yīng)該先把特效樣子調(diào)好了再去做婆赠。
建議學習Adobe Effects （AE）绵脯，直觀地看動效是什么樣子，然后再翻譯成前端的動效。
2.相關(guān)數(shù)學/視覺原理：
a.貝塞爾曲線原理
b.視差原理
c.阻尼公式
3.相關(guān)技術(shù)手段實現(xiàn)
前端目前實現(xiàn)動畫特效的八種方式
①gif:設(shè)計直接出GIF桨嫁，前端直接用
②逐幀動畫： css3 step屬性 或 js制作逐幀動畫
③css3： transition/ transform/animation
④svg: svg 很適合移動端
⑤canvas: canvas適合一些比較大面積的動效
⑥flash轉(zhuǎn) canvas : 這個我不了解
⑦video: 用h5 video標簽
⑧js動畫： 可以配合平臺提供的api（重力感應(yīng)等）開發(fā)更復(fù)雜的動效
三植兰、node 服務(wù)層
node在前端應(yīng)該是無人不知了。在實際使用中node的使用場景應(yīng)該有這幾個：
① 作為前端構(gòu)建輔助工具： 如各種腳手架中璃吧，經(jīng)常有node的參與
② 作為服務(wù)端做渲染層： 實現(xiàn)接口合并和模板渲染
③ 作為完整服務(wù)器： 一般是創(chuàng)業(yè)公司中楣导，可以一人搭建起全部web功能。如微信公眾號項目等
那么如果要學習的話畜挨，要從哪里入手呢筒繁？
學習一個新技術(shù)，我個人的方式都是
先把原生的文檔巴元，快速過一遍毡咏，然后學框架。
不看原生的逮刨，很容易學一套框架呕缭，就是一次學習量。
學習原生知識修己，可以讓你學框架速度提升恢总。
框架里面常用的：
①express ②koa ③基于以上兩者衍生的框架 ④其余框架
我建議新手學習express 框架。理由很簡單睬愤，易學片仿，使用多，教程多尤辱。
我個人想學習的node框架是天貓的egg.js 砂豌。
推薦理由是
①大廠開發(fā)，面向工程
②經(jīng)受住了雙十一的考驗光督，質(zhì)量有保障
總結(jié)
前端是端工程師阳距，一切特性依賴于客戶端。
因此各位前端的同仁可帽，除了上述的功能外娄涩，還是要多留意瀏覽器以及移動端環(huán)境的變遷。
一些類似與 HTTP2協(xié)議映跟，PWA，openGL等技術(shù)扬虚，都隨時有可能改變前端的工作方式努隙。
我上面列了那么多，其實我很多都沒有學過（手動狗頭）辜昵。但是除了技術(shù)能力荸镊，也許以下幾個綜合能力，對于前端er也是要注意的
①自我規(guī)劃能力：對于技術(shù)領(lǐng)域的趨勢的洞察，以及個人對應(yīng)的學習計劃
②快速學習能力：搜索能力（利用網(wǎng)上的各種知識）躬存，知識遷移能力
③溝通能力和知識輸出能力： 面向產(chǎn)品张惹，以及面向后端，面向社區(qū)同仁
最后
“相信有很多想學前端的小伙伴岭洲，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨宛逗，從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小伙伴盾剩，53763雷激，1707這里是小白聚集地，歡迎初學和進階中的小伙伴告私∈合荆”
祝大家早日學有所成，拿到滿意offer驻粟，快速升職加薪根悼，走上人生巔峰。
