資訊專欄INFORMATION COLUMN
摘要：未來一個(gè)大的趨勢(shì)就是前端開發(fā)的效果，正無限逼近原生效果同時(shí)一些大廠也在紛紛提前布局了，之前驚艷四方的天貓?jiān)煳锕?jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。我個(gè)人想學(xué)習(xí)的框架是天貓的。
面向2018年，我覺得前端有這么三個(gè)方向可以突破
前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理）
前端交互層（包括css3，canvas，svg，vr等，以及對(duì)應(yīng)性能優(yōu)化）
node服務(wù)器層 （即服務(wù)器領(lǐng)域，以及前端開發(fā)工具的開發(fā)）
當(dāng)然還可以說，有electron這樣開發(fā)桌面應(yīng)用的，但是我覺得大部分人的規(guī)劃還是在web領(lǐng)域范疇的。
一、前端邏輯層
前端邏輯層解決的問題：前端的渲染問題。
其實(shí)就是，從后端拿到的各種數(shù)據(jù)（數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)，各種素材），如何組合成頁(yè)面元素。
前端的渲染，其實(shí)就是 模板+數(shù)據(jù) = 頁(yè)面
① html 負(fù)責(zé)結(jié)構(gòu)
② css 負(fù)責(zé)樣式
③ js 負(fù)責(zé)邏輯
只有模板沒有后端數(shù)據(jù)的頁(yè)面我們可以理解為靜態(tài)頁(yè)面
而我們目前主流的三大框架，則提供 模板與數(shù)據(jù)之間的映射關(guān)系。
在邏輯層的研究，主要就是學(xué)習(xí)并熟練三大框架： Vue, React, Angular
這一塊是我們90%前端，日常工作的主要部分。也是很多公司面試會(huì)去重點(diǎn)考察的內(nèi)容。
但是，目前的行情已經(jīng)不是，你會(huì)個(gè)新框架就可以任性拿OFFER的時(shí)期了。
前端的井噴的情況下，僅僅會(huì)一些基礎(chǔ)知識(shí)是不夠的。你必須往下深挖。
可以深挖的部分
①框架部分： 舉個(gè)例子，如 Vue+ Vuex+ Vue-router+axios的全家桶
react和angular的也類似，有這么一套全家桶。
要想在前端競(jìng)爭(zhēng)中取得優(yōu)勢(shì)，需要在這些框架的原理上深挖。
研究： a. 源碼和實(shí)現(xiàn)原理 （理論）
b. 常見的應(yīng)用場(chǎng)景和常見問題的實(shí)現(xiàn) （經(jīng)驗(yàn)）
c. 同類問題的橫向?qū)Ρ龋ū热缬昧藇uex 需要了解一下 redux是怎么實(shí)現(xiàn)的）
②構(gòu)建部分： webpack + npm/yarn + 腳手架（如vue-cli） +sass
構(gòu)建部分，其實(shí)是一塊很容易出區(qū)分度的領(lǐng)域。你研究透一點(diǎn)，你就越能駕馭住項(xiàng)目的變化。
研究： a. webpack的配置和對(duì)應(yīng)應(yīng)用場(chǎng)景
b. npm的命令使用，以及一些高級(jí)的用法（架設(shè)私有npm或者自己寫全局包等）
c. 腳手架快速搭建的過程，以及如何自定義更改
d. 如何配置eslint和單元測(cè)試等
③代碼規(guī)范部分： es6 + ts + css規(guī)范 等等等
代碼規(guī)范不多說，前端的js和css都是設(shè)計(jì)得很粗糙的語(yǔ)言。如果你想hold住更大型的項(xiàng)目，那么規(guī)范是你不可忽視的地方。
邏輯層部分，是我們通常意義上理解的前端本職。
二、前端交互層
所謂交互層，可以理解為我們常說的 特效。
當(dāng)前的趨勢(shì)下，移動(dòng)端瀏覽器的性能逐步提升。未來一個(gè)大的趨勢(shì)就是
前端開發(fā)的效果，正無限逼近原生效果
同時(shí)一些大廠也在紛紛提前布局了，之前驚艷四方的天貓?jiān)煳锕?jié) H5
淘寶造物節(jié)-風(fēng)靡朋友圈的h5怎么做的？
如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。
也許再過三年，前端的開發(fā)特效的能力，也會(huì)成為標(biāo)配技能。
可以分三塊來看
1.呈現(xiàn)效果學(xué)習(xí)：
很多同學(xué)不是不會(huì)特效，而是不知道要實(shí)現(xiàn)成什么樣子。用前端的各種東西鼓搗了，終于出來了特效，但是效果卻很難看。
不不不，做特效，應(yīng)該先把特效樣子調(diào)好了再去做。
建議學(xué)習(xí)Adobe Effects （AE），直觀地看動(dòng)效是什么樣子，然后再翻譯成前端的動(dòng)效。
2.相關(guān)數(shù)學(xué)/視覺原理：
a.貝塞爾曲線原理
b.視差原理
c.阻尼公式
3.相關(guān)技術(shù)手段實(shí)現(xiàn)
前端目前實(shí)現(xiàn)動(dòng)畫特效的八種方式
http://www.offcn.com/it/2017/...
①gif: 設(shè)計(jì)直接出GIF，前端直接用
②逐幀動(dòng)畫： css3 step屬性 或 js制作逐幀動(dòng)畫
③css3 ： transition/ transform/animation
④svg : svg 很適合移動(dòng)端
⑤canvas: canvas適合一些比較大面積的動(dòng)效
⑥flash 轉(zhuǎn) canvas : 這個(gè)我不了解
⑦video: 用h5 video標(biāo)簽
⑧js動(dòng)畫： 可以配合平臺(tái)提供的api（重力感應(yīng)等）開發(fā)更復(fù)雜的動(dòng)效
三、node 服務(wù)層
node在前端應(yīng)該是無人不知了。在實(shí)際使用中node的使用場(chǎng)景應(yīng)該有這幾個(gè)：
① 作為前端構(gòu)建輔助工具： 如各種腳手架中，經(jīng)常有node的參與
② 作為服務(wù)端做渲染層： 實(shí)現(xiàn)接口合并和模板渲染
③ 作為完整服務(wù)器： 一般是創(chuàng)業(yè)公司中，可以一人搭建起全部web功能。如微信公眾號(hào)項(xiàng)目等
那么如果要學(xué)習(xí)的話，要從哪里入手呢？
學(xué)習(xí)一個(gè)新技術(shù)，我個(gè)人的方式都是
先把原生的文檔，快速過一遍，然后學(xué)框架。
不看原生的，很容易學(xué)一套框架，就是一次學(xué)習(xí)量。
學(xué)習(xí)原生知識(shí)，可以讓你學(xué)框架速度提升。
框架里面常用的：
①express ②koa ③基于以上兩者衍生的框架 ④其余框架
我建議新手學(xué)習(xí)express 框架。理由很簡(jiǎn)單，易學(xué)，使用多，教程多。
我個(gè)人想學(xué)習(xí)的node框架是天貓的egg.js 。
推薦理由是
①大廠開發(fā)，面向工程
②經(jīng)受住了雙十一的考驗(yàn)，質(zhì)量有保障
總結(jié)
前端是端工程師，一切特性依賴于客戶端。
因此各位前端的同仁，除了上述的功能外，還是要多留意瀏覽器以及移動(dòng)端環(huán)境的變遷。
一些類似與 HTTP2協(xié)議，PWA，openGL等技術(shù)，都隨時(shí)有可能改變前端的工作方式。
我上面列了那么多，其實(shí)我很多都沒有學(xué)過（手動(dòng)狗頭）。但是除了技術(shù)能力，也許以下幾個(gè)綜合能力，對(duì)于前端er也是要注意的
①自我規(guī)劃能力：對(duì)于技術(shù)領(lǐng)域的趨勢(shì)的洞察，以及個(gè)人對(duì)應(yīng)的學(xué)習(xí)計(jì)劃
②快速學(xué)習(xí)能力：搜索能力（利用網(wǎng)上的各種知識(shí)），知識(shí)遷移能力
③溝通能力和知識(shí)輸出能力： 面向產(chǎn)品，以及面向后端，面向社區(qū)同仁
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92156.html
摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...
摘要：年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關(guān)注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應(yīng)用同等的待遇與權(quán)限。但是無論都值得關(guān)注。 1.前言 2017悄然過去，2018已經(jīng)來到。人在進(jìn)步，技術(shù)在發(fā)展。2018年前端有哪些領(lǐng)域，技術(shù)值得關(guān)注，哪些技術(shù)會(huì)興起，哪些技術(shù)會(huì)沒落。下面就我個(gè)人的判斷進(jìn)行一個(gè)預(yù)測(cè)判斷，希望能對(duì)大家...
摘要：走過了這一年，公眾號(hào)的名稱前前后后改了三次，最后定格為閏土大叔。均價(jià)，這價(jià)格絕對(duì)屬于太原市最便宜的樓盤之一了。據(jù)售樓部的朋友說，未來兩年太原的房?jī)r(jià)還會(huì)迎來新一波的漲價(jià)潮，到了年，太原會(huì)承辦全國(guó)青少年運(yùn)動(dòng)會(huì)，簡(jiǎn)稱青運(yùn)會(huì)。 前言 從年前就嚷嚷著要走出去走出去，轉(zhuǎn)眼間已經(jīng)到了年底依然在我的大太原呆著。年底了，不能免俗的我，也來寫一篇2017年度工作總結(jié)的文章，湊湊熱鬧。如果對(duì)你有一點(diǎn)點(diǎn)啟發(fā)，...
摘要：走過了這一年，公眾號(hào)的名稱前前后后改了三次，最后定格為閏土大叔。均價(jià)，這價(jià)格絕對(duì)屬于太原市最便宜的樓盤之一了。據(jù)售樓部的朋友說，未來兩年太原的房?jī)r(jià)還會(huì)迎來新一波的漲價(jià)潮，到了年，太原會(huì)承辦全國(guó)青少年運(yùn)動(dòng)會(huì)，簡(jiǎn)稱青運(yùn)會(huì)。 前言 從年前就嚷嚷著要走出去走出去，轉(zhuǎn)眼間已經(jīng)到了年底依然在我的大太原呆著。年底了，不能免俗的我，也來寫一篇2017年度工作總結(jié)的文章，湊湊熱鬧。如果對(duì)你有一點(diǎn)點(diǎn)啟發(fā)，...
閱讀 1278·2021-09-22 15:18
閱讀 2607·2021-09-22 15:17
閱讀 2231·2019-08-30 15:55
閱讀 1576·2019-08-30 15:54
閱讀 1049·2019-08-30 13:12
閱讀 628·2019-08-30 13:12
閱讀 1681·2019-08-29 11:33
閱讀 1443·2019-08-26 17:04
