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