前端1年學(xué)了node等7門技術(shù)感覺累！網(wǎng)友：這些我做后端的都知道！

于web開發(fā)，在第一代web開發(fā)時，基本上都是靜態(tài)網(wǎng)頁，大多數(shù)是html，連js都很少寫，那時候還是后端開發(fā)工程師的天下，前端還稱不上開發(fā)工程師，當(dāng)時覺得前端很弱的樣子，可什么事情都不是一成不變，自從移動互聯(lián)網(wǎng)時代的到來和html5問世，前端頁面的表現(xiàn)形式越來越多樣化，各種前端技術(shù)，前端框架紛紛出現(xiàn)，關(guān)于前后端的技術(shù)比重又重新洗牌，前端的地位逐漸與后端均衡甚至有超越后端開發(fā)的趨勢，近期一名前端開發(fā)工程師分享了他的一些情況。

據(jù)這名前端開發(fā)工程師說，他已經(jīng)參加工作一年了，在這一年內(nèi)，他除了工作之外，已經(jīng)學(xué)習(xí)了7門技術(shù)，webpack，es6，react，node，koa，css3，html5，另外他還感覺自己挺累的，對這些技術(shù)的了解程度他都是處在會用的階段，并沒有看過源碼，當(dāng)然如果是認(rèn)真看源碼的話，估計一年也沒精力學(xué)這么多，他還問大家這個進(jìn)度如何，是不是太慢了，針對他的情況，讓我們先來看一下網(wǎng)友們是如何看待的吧！

網(wǎng)友一：這些東西我大學(xué)就會了，有點(diǎn)基礎(chǔ)的想會用這些東西全部加起來可能只需要一個月的時間而已，想要有競爭力必須要有專精的領(lǐng)域，例如可以自己用c++寫個node輪子出來

上世是朵花：了解，會，熟練，精通這中間有很大的差別，在這個行業(yè)內(nèi)，大家會的東西都差不多，從廣度看大家涉獵面一樣，可是薪資跨度卻很大，這就是與技術(shù)深度有關(guān)了，當(dāng)然，也沒有必要重復(fù)發(fā)明輪子呀，站在巨人的肩膀上也是可以做巨人的，但是前提是首先要把別人發(fā)明的輪子吃透了，不了解底層原理，對上層的發(fā)揮也是受限的。

網(wǎng)友二：會用是說用的很熟練嘛，說的太寬泛了，實現(xiàn)原理知道嗎，自己寫過組件嘛。不要太著急，找一個感興趣的往深得挖。

上世是朵花：是的，結(jié)合工作中的實際需要，選一門技術(shù)，在深度上挖掘一下是很有必要的，這樣對自己的競爭力是很有優(yōu)勢的。

網(wǎng)友三：確實太慢了，還是非常low的階段。不過技多不壓身，慢慢來。

上世是朵花：此言差矣，單看數(shù)量沒什么意義，需要看都是掌握到什么程度，如果一年就是深度掌握兩門技術(shù)那也是很不錯了。

網(wǎng)友四：你說的這些，作為后端的我也知道

上世是朵花：知道這個詞就顯的蒼白無力了，我可以認(rèn)為知道就是“聽說過”，這個顯然是沒有什么學(xué)習(xí)成本，只是停留在一個概念，一個詞匯而已，或者就是了解其中一些皮毛。

網(wǎng)友五：畢業(yè)一年，工作里用到vue react koa mysql redis mongodb，仍然覺得自己啥也不會

上世是朵花：這種感覺是正常的，如果一個人覺得啥都會了，說明他不知道他還不會的有很多，說明他的視野已經(jīng)受限了，就像井底的青蛙以為它看到了整個天空一樣。

網(wǎng)友六：這些剛接觸前端半年就會了…

上世是朵花：還是那句話，會的程度不一樣。

網(wǎng)友七：螞蟻金服封裝了一套，ant-design+dvajs+umijs，底層也是你學(xué)的這些。前端能精通也很厲害了，開發(fā)效率，高性能都是有很大意義的

上世是朵花：沒錯，如今的前端已經(jīng)不是以往的前端了，可發(fā)揮的地方真是太多了。

網(wǎng)友八：這其實就是大部分人的現(xiàn)狀，只會用人家寫好的輪子寫沒有價值的業(yè)務(wù)代碼。

上世是朵花：這就是自然規(guī)律呀，什么事情都是發(fā)明者是少數(shù)，使用者是多數(shù)，都只是發(fā)明，都不去使用的世界你認(rèn)為存在么？還要糾正一點(diǎn)就是寫業(yè)務(wù)代碼為什么就沒有價值了?什么事情不都需要有人去做么？如果都沒人去做那就徹底創(chuàng)造不出價值了。

從大家的評論中可以看出，有的認(rèn)為學(xué)這么些技術(shù)已經(jīng)很厲害了，而有的網(wǎng)友則認(rèn)為學(xué)這些太少，或者說不值一提，自己大學(xué)都學(xué)過，自己作為后端都會，這樣的回答顯然是膚淺了一點(diǎn)，這樣的觀點(diǎn)都是停留在廣度上，單獨(dú)從技術(shù)數(shù)量談學(xué)習(xí)進(jìn)度都是沒什么意義的，如果對這些技術(shù)了解的程度都是一知半解，那就是毫無意義的，在這樣的基礎(chǔ)上的評價也是毫無價值的，通過這個案例告訴我們，平時學(xué)習(xí)技術(shù)不要為了學(xué)習(xí)去學(xué)習(xí)，也不要盲目的去追隨新技術(shù)，不要做猴子掰苞米的行為，學(xué)一樣，丟一樣，到頭來什么技術(shù)都沒沉淀下來，應(yīng)該結(jié)合自己的實際情況，去選擇一門有用的技術(shù)深度挖掘，不是停留在了解階段，不但知道其然，也要知道其所以然，只有研究的越深，對底層的原理及思想才能更了解，這部分技術(shù)知識才更容易沉淀下來。

以上所有圖片均來之互聯(lián)網(wǎng)

大家好，我是“上世是朵花”。如果你有什么好的看法或者觀點(diǎn)可以在評論區(qū)展現(xiàn)你的才華，互動交流，如果想進(jìn)一步了解我，那就關(guān)注我吧！

言語法層面

1：ES6

標(biāo)配各種特性要熟練掌握應(yīng)用。

ECMAScript 6文檔：http://caibaojian.com/es6/

ES6中文手冊：https://www.jianshu.com/p/b6c882e59b07

官網(wǎng)：http://www.es6js.com/

2：TypeScript

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。學(xué)完你肯定會后悔，后悔為啥沒有早點(diǎn)學(xué)，TypeScript是一個幫你提高代碼質(zhì)量的東西，一定要學(xué)習(xí)哦。

TypeScript 中文網(wǎng)：https://www.tslang.cn/

TypeScript 入門教程：http://www.runoob.com/w3cnote/getting-started-with-typescript.html

3：Rust

可能在學(xué)習(xí) Rust 的過程中會遇到不少困難，它的學(xué)習(xí)曲線確實比較大，Rust 雖然定位是一門系統(tǒng)語言，但是其實在 Web 領(lǐng)域已經(jīng)是老熟人了，計劃用Rust寫點(diǎn)wasm。

4：Dar

對 Flutter 的宿主語言 Dart 進(jìn)行了一些簡單探索，F(xiàn)lutter & Dart 、是跨端的一個方向，但是目前的問題仍然多多。

Dart中文社區(qū)：https://www.dart-china.org/

5：WebAssembly

WebAssembly是近年來非常流行并且發(fā)展很快的一種語言（實際上我覺得稱其為運(yùn)行機(jī)制很合適），WebAssembly 的日益成熟，也帶來了很多新奇的玩法兒。

官網(wǎng)：https://webassembly.org/

框架層面

1：Vue 2.0

Vue 2.0不多說了，花一個月的時間寫個小項目練手，并且寫一套專題技術(shù)博客。

文檔：https://cn.vuejs.org/

社區(qū)：https://www.vue-js.com/

關(guān)注 Vue 3.0 的進(jìn)展；

Vue CLI 3：https://cli.vuejs.org/

2：React

React 并非很差，但我發(fā)現(xiàn)它太笨拙，難以掌握，而且有些地方的代碼看起來完全沒有邏輯性。

React 持續(xù)跟蹤升級，使用 Hooks 與 Suspense 改造現(xiàn)有項目，使用 Context API 替換項目中的 mobx 狀態(tài)管理，使用React實現(xiàn)交互式組件的新方法，稱為Hooks：https://reactjs.org/docs/hooks-intro.html

React 中文文檔：https://react.docschina.org/

社區(qū)：http://react-china.org/

菜鳥教程：http://www.runoob.com/react/react-tutorial.html

3：Angular

Angular 的“用過但是不想再用“的比重又大了，可以自行決斷是否要學(xué)習(xí)，了解即可。

官網(wǎng)：https://angular.cn/

Angular2.0之前的版本（1.x）中文網(wǎng)：http://www.angularjs.net.cn/

數(shù)據(jù)層

1：Redux

Redux 目前用戶很多，Redux因其簡單易學(xué)體積小在短時間內(nèi)成為最熱門的前端架構(gòu)。但是 React 新的 Hooks等不知道會不會在來年給它帶來影響。

Redux 中文文檔：https://www.redux.org.cn/

2：GraphQL

GraphQL 和 Apollo 這段時間一直被討論宣傳，調(diào)查顯示有非常多的人想要學(xué)習(xí)了解，可以關(guān)注下，Graphql + Apollo 學(xué)習(xí)與實踐

http://graphql.cn/

http://graphql.cn/learn/

JS 后端框架

1：Express

Express 一家獨(dú)大，基于 Node.js]平臺，快速、開放、極簡的 Web 開發(fā)框架：http://www.expressjs.com.cn/

菜鳥教程：http://www.runoob.com/nodejs/nodejs-express-framework.html

2： Next.js

Next.js 想學(xué)的人比較多，提供一些學(xué)習(xí)資料。

Nextjs中文文檔：https://www.jianshu.com/p/8d070e2b39a5

Next.js中文站點(diǎn) http://nextjs.frontendx.cn

Next.js中文站Github https://github.com/raoenhui/next-site-cn

3：Koa

Koa 在國內(nèi)的歡迎程度比較高，不妨多看看。

基于 Node.js 平臺的下一代 web 開發(fā)框架：https://koa.bootcss.com/

另外，國內(nèi)比較知名的 Egg.js 和 Think.js 等可以了解。

4：Egg.js

egg 為企業(yè)級框架和應(yīng)用而生：https://eggjs.org/zh-cn/

快速入門https://eggjs.org/zh-cn/intro/quickstart.html

5：Think.js

官網(wǎng)：https://thinkjs.org/

文檔：https://thinkjs.org/zh-cn/doc/2.2/app_structure.html

測試框架

使用分布比較勻稱，Jest 和 Mocha 比較靠前，

jest 是facebook推出的一款測試框架，集成了很強(qiáng)大的功能。

但是 Mocha 相比略有下降趨勢。

Enzyme 也還可以。

教程：https://www.jianshu.com/p/eaaf07c1b88f

跨端框架

Electron 和 React Native 排名比較靠前，受到廣大開發(fā)者的喜愛和追捧。

1：Electron

Electron這個玩意簡直是做團(tuán)隊內(nèi)部工具的利器，也是前端老手秒上手的東西，可以給團(tuán)隊做些玩意了。

使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用：https://electronjs.org/

Electron 文檔：https://electronjs.org/docs

Electron 中文文檔：https://www.w3cschool.cn/electronmanual/

2：React Native

React Native中文網(wǎng)

使用JavaScript和React編寫原生移動應(yīng)用：https://reactnative.cn/

當(dāng)然今年 RN 發(fā)展很不順利，被很多大公司移除掉了，繼續(xù)關(guān)注后續(xù)發(fā)展。

3：Flutter -跨端解決方案

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面，前端對于 Flutter 的熱忱度之高一度讓人有點(diǎn)驚訝，事實上我在 Flutter 社區(qū)內(nèi)見到的客戶端開發(fā)者遠(yuǎn)多于前端開發(fā)，不過前端對于跨端解決方案確實有著天然的渴求。

Flutter中文網(wǎng)：https://flutterchina.club/

后端編程語言

1：Python

Python有大數(shù)據(jù)處理、數(shù)據(jù)分析、人工智能加持，學(xué)完 Python，可以上天，一款集入手快、顏值高、內(nèi)涵豐富、效率高、應(yīng)用廣的編程語言，讓Python輕松俘獲從業(yè)人員的心。

Python 基礎(chǔ)教程：http://www.runoob.com/python/python-tutorial.html

2：PHP

PHP 符合預(yù)期，PHP是一種通用開源腳本語言。它的語法吸收了 C語言、java語言和Perl語言的特點(diǎn)，使用廣泛，主要應(yīng)用于web領(lǐng)域。

菜鳥教程：http://www.runoob.com/php/php-tutorial.html

教程：http://www.w3school.com.cn/php/index.asp

構(gòu)建工具

1：Webpack

Webpack 一家獨(dú)大，第二是 gulp，第三是 Grunt，后兩者應(yīng)該都在慢慢下降

webpack中文文檔：https://www.webpackjs.com/

2：gulp

gulp：https://www.gulpjs.com.cn/

Grunt：https://www.gruntjs.net/

3：Grunt

Grunt中文網(wǎng)：https://www.gruntjs.net/

工具庫

Lodash、Moment 以及 jQuery 排名靠前。

1：Lodash

Lodash中文網(wǎng)：https://www.lodashjs.com/

2：Moment

Moment中文網(wǎng)：http://momentjs.cn/

Moment 現(xiàn)在一般用 date-fns 代替，函數(shù)式而且很輕巧，Moment 體積太大。

瀏覽器 API

Service Workers、PWA、Web Components 這三個比較靠前，

知道 Web Components 啥時候才能被大規(guī)模使用，反正 Polymer 看數(shù)據(jù)基本涼透了。

Service Workers：https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

Web Components：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

PWA: 持續(xù)關(guān)注，不過這玩意其實真的很簡單很簡單，只要學(xué)會 Service Worker + Cache API 就算掌握了 80% 了，需要的時候再學(xué)也來得及。

微信小程序

隨著各種方案（mpvue 、Taro等等）出現(xiàn)，也變得越來越成熟了。

1：mpvue

mpvue官方文檔：http://mpvue.com/mpvue/

2：Taro

Taro 是一套遵循 React 語法規(guī)范的多端開發(fā) 解決方案

Taro文檔：https://taro.aotu.io/

其他熱點(diǎn)技術(shù)

1：Vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

文檔：https://vuex.vuejs.org/zh/

2：rxjs

RxJS是一個異步編程的庫，同時它通過observable序列來實現(xiàn)基于事件的編程

中文文檔：https://cn.rx.js.org/

3：Docker

Docker 是一個開源的應(yīng)用容器引擎，讓開發(fā)者可以打包他們的應(yīng)用以及依賴包到一個可移植的容器中。

4：Deno

運(yùn)行時：Deno：返回deno社區(qū)繼續(xù)參與deno

5：Lavas

基于 Vue.js 的 PWA 解決方案：https://lavas.baidu.com/

把這些作為自己來年的一個flag，然后年終的時候能夠完成以上的一半的內(nèi)容我就已經(jīng)很開心了，大家一起努力進(jìn)步吧。

間件用法——講解 Koa2 中間件的用法及如何開發(fā)中間件

iKcamp 制作團(tuán)隊

原創(chuàng)作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃

文案校對：李益、大力萌、Au、DDU、小溪里、小哈

風(fēng)采主播：可木、阿干、Au、DDU、小哈

視頻剪輯：小溪里

主站運(yùn)營：給力xi、xty

教程主編：張利濤

視頻地址：https://www.cctalk.com/v/15114357763623文章

middleware 中間件

正是因為中間件的擴(kuò)展性才使得 Koa 的代碼簡單靈活。

在 app.js 中，有這樣一段代碼：

app.use(async (ctx, next)=>{
 await next()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>' 
})

它的作用是：每收到一個 http 請求，Koa 都會調(diào)用通過 app.use() 注冊的 async函數(shù)，同時為該函數(shù)傳入 ctx 和 next 兩個參數(shù)。而這個 async 函數(shù)就是我們所說的中間件。

下面我們簡單介紹一下傳入中間件的兩個參數(shù)。

ctx

ctx 作為上下文使用，包含了基本的 ctx.request 和 ctx.response。另外，還對 Koa 內(nèi)部對一些常用的屬性或者方法做了代理操作，使得我們可以直接通過 ctx 獲取。比如，ctx.request.url 可以寫成 ctx.url。

除此之外，Koa 還約定了一個中間件的存儲空間 ctx.state。通過 state 可以存儲一些數(shù)據(jù)，比如用戶數(shù)據(jù)，版本信息等。如果你使用 webpack 打包的話，可以使用中間件，將加載資源的方法作為 ctx.state 的屬性傳入到 view 層，方便獲取資源路徑。

next 參數(shù)的作用是將處理的控制權(quán)轉(zhuǎn)交給下一個中間件，而 next() 后面的代碼，將會在下一個中間件及后面的中間件（如果有的話）執(zhí)行結(jié)束后再執(zhí)行。

注意：中間件的順序很重要！

我們重寫 app.js 來解釋下中間件的流轉(zhuǎn)過程：

// 按照官方示例
const Koa = require('koa')
const app = new Koa()
// 記錄執(zhí)行的時間
app.use(async (ctx, next) => {
 let stime = new Date().getTime()
 await next()
 let etime = new Date().getTime()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>'
 console.log(`請求地址: ${ctx.path}，響應(yīng)時間：${etime - stime}ms`)
});
app.use(async (ctx, next) => {
 console.log('中間件1 doSoming')
 await next();
 console.log('中間件1 end')
})
app.use(async (ctx, next) => {
 console.log('中間件2 doSoming')
 await next();
 console.log('中間件2 end')
})
app.use(async (ctx, next) => {
 console.log('中間件3 doSoming')
 await next();
 console.log('中間件3 end')
})
app.listen(3000, () => {
 console.log('server is running at http://localhost:3000')
})

運(yùn)行起來后，控制臺顯示：

server is running at http://localhost:3000

然后打開瀏覽器，訪問 http://localhost:3000，控制臺顯示內(nèi)容更新為：

server is running at http://localhost:3000
中間件1 doSoming
中間件2 doSoming
中間件3 doSoming
中間件3 end
中間件2 end
中間件1 end
請求地址: /，響應(yīng)時間：2ms

從結(jié)果上可以看到，流程是一層層的打開，然后一層層的閉合，像是剝洋蔥一樣 —— 洋蔥模型。

此外，如果一個中間件沒有調(diào)用 await next()，會怎樣呢？答案是『后面的中間件將不會執(zhí)行』。

修改 app.js 如下，我們?nèi)サ袅说谌齻€中間件里面的 await：

const Koa = require('koa')
const app = new Koa()
// 記錄執(zhí)行的時間
app.use(async (ctx, next)=>{
 let stime = new Date().getTime()
 await next()
 let etime = new Date().getTime()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>'
 console.log(`請求地址: ${ctx.path}，響應(yīng)時間：${etime - stime}ms`)
});
app.use(async (ctx, next) => {
 console.log('中間件1 doSoming')
 await next();
 console.log('中間件1 end')
})
app.use(async (ctx, next) => {
 console.log('中間件2 doSoming')
 // 注意，這里我們刪掉了 next
 // await next()
 console.log('中間件2 end')
})
app.use(async (ctx, next) => {
 console.log('中間件3 doSoming')
 await next();
 console.log('中間件3 end')
})
app.listen(3000, () => {
 console.log('server is running at http://localhost:3000')
})

重新運(yùn)行代碼后，控制臺顯示如下：

server is running at http://localhost:3000
中間件1 doSoming
中間件2 doSoming
中間件2 end
中間件1 end
請求地址: /，響應(yīng)時間：1ms

與我們的預(yù)期結(jié)果『后面的中間件將不會執(zhí)行』是一致的。

下一篇：我們將學(xué)習(xí)下如何響應(yīng)瀏覽器的各種請求。

上一篇：iKcamp新課程推出啦～～～～～iKcamp團(tuán)隊制作｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 環(huán)境準(zhǔn)備

您的項目需求

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

整合營銷服務(wù)商