2018給自己準備的前端食糧

2021-08-14 13:42:57 字數 2734 閱讀 2403

面向2023年,我覺得前端有這麼三個方向可以突破

前端邏輯層(包括三大框架,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),直觀地看動效是什麼樣子,然後再翻譯成前端的動效。

3.相關技術手段實現

前端目前實現動畫特效的八種方式

①gif: 設計直接出gif,前端直接用

②逐幀動畫: css3 step屬性 或 js製作逐幀動畫

③css3 : transition/ transform/animation

④svg : svg 很適合移動端

⑤canvas: canvas適合一些比較大面積的動效

⑥flash 轉 canvas : 這個我不了解

⑦video: 用h5 video標籤

⑧js動畫: 可以配合平台提供的api(重力感應等)開發更複雜的動效

三、node 服務層

那麼如果要學習的話,要從**入手呢?

學習乙個新技術,我個人的方式都是

先把原生的文件,快速過一遍,然後學框架。

不看原生的,很容易學一套框架,就是一次學習量。

學習原生知識,可以讓你學框架速度提公升。

框架裡面常用的:

①express ②koa ③基於以上兩者衍生的框架 ④其餘框架

我建議新手學習express 框架。理由很簡單,易學,使用多,教程多。

我個人想學習的node框架是天貓的egg.js 。

推薦理由是

①大廠開發,面向工程

②經受住了雙十一的考驗,質量有保障

總結前端是端工程師,一切特性依賴於客戶端。

因此各位前端的同仁,除了上述的功能外,還是要多留意瀏覽器以及移動端環境的變遷。

一些類似與 http2協議,pwa,opengl等技術,都隨時有可能改變前端的工作方式。

我上面列了那麼多,其實我很多都沒有學過(手動狗頭)。但是除了技術能力,也許以下幾個綜合能力,對於前端er也是要注意的

①自我規劃能力:對於技術領域的趨勢的洞察,以及個人對應的學習計畫

②快速學習能力:搜尋能力(利用網上的各種知識),知識遷移能力

③溝通能力和知識輸出能力: 面向產品,以及面向後端,面向社群同仁

**:

自己給自己的「坑」

斷言旳為200,實際上返回的401 debug發現teacher的使用者名稱和密碼和我設定的是一樣的,但就是登入失敗,返回狀態401我用了最笨的方法找到了問題出在了那,看了很多遍教程,最後把老師的 拿過來發現沒問的,一點點對照出來 發現username字母大寫了,而是實體中是小寫的debug時 斷點...

給自己寫的

多吃些粗糧.給別人比他們自己期許的更多,並且用心去做 熟記你喜歡的詩歌 不要輕信你聽到的每件事,不要花光你的所有,不要想睡多久就睡多久。無論何時說 我愛你 請真心實意。無論何時說 對不起 請看著對方的眼睛。相信一見鐘情。永遠不要忽視別人的夢想。深情熱烈地愛,也許你會受傷,但這是使人生完整的唯一方法。...

給自己的總結

寫部落格整兩個月了,在寫部落格的過程中我學到了不少東西,最重要的一點是,如果我要寫點什麼出來,我就必須先要搞懂它,而且也確實方便了自己以後的查閱.再過幾天就要啟程去學校了,開學馬上大三,還有ccf要考,最近的時間都花在了ios開發上,但卻一直沒有彌補自己在演算法和資料結構方面的不足,但要想在畢業後拿...