主页»JavaScript»在 2016 年学 JavaScript 是一种什么样的体会?

在 2016 年学 JavaScript 是一种什么样的体会?

来历:v2ex 发布时刻:2016-10-07 阅览次数:

嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎样触摸 Web 编程,传闻 Web 技术现已发生了一些改变。传闻你是这儿对新技术最了解的 Web 开发工程师?

精确地说,我是一名「前端工程师」。不过你算是找对人了。我对本年的技术别提多熟了,前端可视化、音乐播放器、能踢足球的无人机,你虽然问吧。我刚去 JS 大会和 React 大会逛了一圈,没有什么新技术是我不知道的。

凶猛。是这样的,我要开发一个网页,用来展现用户的最新动态。我想我应该经过后端接口获取数据,然后用一个 table 来展现数据,用户能够对数据进行排序。假如服务器上的数据改变了,我还需求更新这个 table 。我的思路是用 jQuery 来做。

可别用 jQuery !现在哪还有人用 jQuery 。现在是 2016 年了,你肯定应该用 React 。

哦,好吧, React 是什么?

React 是一个十分凶猛的库, Facebook 的牛人写的。它能让页面更可控,功用极高,并且运用起来很简略。

听起来的确不错。我能用 React 展现服务器传来的数据吗?

当然能够,你只需求增加两个依靠,一个是 React ,一个是 React DOM

额,等下,为什么是两个库?

React 是我说的库, React DOM 是用来操作 DOM 的。由于这些 DOM 是用 JSX 写的,所以需求一个专门的库来操作。

JSX ? JSX 是什么?

JSX 是对 JS 的扩展,它看起来跟 XML 差不多,能够用来写 HTML ,你能够以为 JSX 是一种更高雅的 HTML 写法。

为什么不必 HTML 了……?

现在可是 2016 年啊,没有直接写 HTML 的。

对哦。好吧,加了这两个依靠,是不是就能够开端用 React 了?

不可哦。你需求增加 Babel ,然后才干用 React 。

Babel 是另一个库?

嗯, Babel 是一个转译东西, Babel 能把你写的 JS 转译成恣意版其他 JS 。你纷歧定非要用 Babel ,可是假如你不必的话,你就只能写 ES5 的语法了。你知道的,现在是 2016 年,你怎样能不运用 ES2016+ 的语法呢? ES2016+ 多么酷啊。

ES5 是啥? ES2016+ 又是啥?我有点晕。

ES5 便是 ECMAScript 5 。大部分人都会运用 ES5 ,由于大部分浏览器都支撑 ES5 。

ECMAScript 是啥……

你知道的, JS 是 1995 年诞生的,而 JS 的标准是 1999 制定出来的。那时分 JavaScript 还叫做 Livescript ,只能运转在网景的浏览器里。那时真是紊乱的时代,现在好了,咱们有了 JS 的 7 个版其他标准。

7 个版别?那 ES5 和 ES2016+ 是?

分别是第 5 个版别和第 7 个版别。

诶,那第六个版别呢?

你说的是 ES6 。每个版别都是上一个版其他超集,所以你直接运用最新的 ES2016+ 就好了。

对哦。为什么不必 ES6 呢?

好吧,你能够用 ES6 ,可是你就用不到 async 和 await 这么酷的语法了。用 ES2016+ 比较好。用 ES6 的话你就只能用 generator 来操控异步使命流了。

不知道你在说什么……你说了太多我听不懂的名词了。我仅仅想从服务器取点数据,我曾经用 jQuery 挺好的,从 CDN 引进 jQuery ,我就能用 AJAX 获取数据了,现在不能这样做吗?

大哥,都 2016 年了,没人用 jQuery 好吗。一切人都知道用 jQuery 只会造出「意大利面条」相同的代码(不可保护)

好吧,所以我现在要加载三个库才干获取并展现数据。

对的,其实你能够用「模块办理器」把这三个库「打包」成一个文件。

哦,什么是模块办理器……

不同渠道的模块办理器不同啦。前端的模块办理器一般指办理 AMD 或许 CommonJS 模块的东西。

好……吧,什么是 AMD 和 CommonJS ?

是两个界说。咱们有许多办法来描绘 JS 中多个库或类的交互办法,比方 exports 和 requires 。你能够依照 AMD 或许 CommonJS 的 API 来书写 JS ,然后用 Browserify 将它们打包。

听起来很有道理。不过,什么是 Browserify ?

是一个东西,用来将 CommonJS 方式的 JS 文件打包起来,放到浏览器里运转。用 npm 库房的人发明晰 CommonJS 。

npm 库房是什么……

是一个揭露的库房,用于放置可依靠的模块。

就像一个 CDN 么?

不太相同。它更像是一个数据库,每个人都能在上面发布代码,也能下载上面的代码。你能够在开发的时分将这些代码下载到本地来运用,必要的时分也能上传到 CDN 。

听起来像是 Bower !

是的,不过现在是 2016 年了,没有人用 Bower 了……

好吧,我知道了,所以我应该用 npm 来装置依靠。

对的。我举个比方吧,假如你要运用 React ,你直接用 npm 装置 React ,然后在代码里导入 React 就能够了。大部分 JS 库都能这么装置。

嗯, Angular 也能够。

Angular 是 2015 年的作业了。不过本年 Angular 还没死,还有 VueJS 和 RxJS 等等,你想学一学么?

仍是用 React 吧。我方才现已学了够多东西了。所以我用 npm 装置 React 然后用 Browerify 来打包就好了?

是的。

这么做看起来有点过于杂乱啊。

的确。这便是为什么你应该运用 Grunt 、 Gulp 或许 Broccoli 这样的使命办理东西,它们能主动运转 Browserify 。不对,你现在能够用 Mimosa 。

你在说什么……

使命办理东西。不过咱们现在现已不必了。上一年咱们还在用,后来改成了 Makefiles ,可是现在咱们用的都是 Webpack 。

我以为只要 C/C++ 项目才会用 Makefiles 。

是的,不过明显咱们做 Web 开发的,喜爱先把作业搞杂乱,然后回归到最朴素的状况。每年咱们都是这么搞的。你就看着吧,过不了两年,咱们就能够在网页上写汇编了。

唉,你方才说的 Webpack 是什么?

另一种模块办理东西,一起也是一个使命办理东西。你能够以为它是 Browserify 的加强版。

哦,好吧,为什么 Webpack 是加强版?

额,或许并没有加强吧。 Webpack 告知你应该怎样办理你的依靠, Webpack 答应你运用不同的模块办理器,不仅仅 CommonJS ,乃至支撑 ES6 模块。

这都是哪跟哪啊,我都被绕晕了。

咱们都被绕晕了,不过等 SystemJS 出来了就好了。

天呐,又一个 JS 库,这是什么鬼?

呵呵,不像 Browserify 和 Webpack 1.x , SystemJS 是一个动态的模块加载器。

等下,方才不是说应该把一切依靠打包成一个文件吗?

话是这么说,可是等 HTTP/2 遍及之后,不打包反而更好。

那为什么咱们不直接在页面里增加 React 的三个依靠文件呢?

不可。你能够从 CDN 加载这些文件,可是你仍是要在本地用 Babel 转译。

唉,这么鹾?

是的,你不能在出产环境上运转 babel ,你应该在发布到出产环境之前,运转一系列的使命,包含紧缩、混杂、内联化 CSS 、推迟加载 script ……

我懂了我懂了。已然我不能直接用 CDN ,那么我应该怎样做?

我会考虑用 Webpack + SystemJS + Babel 来转译 Typescript 。

Typescript ?咱们不是在说 JavaScript 吗?!

Typescript 也是 JavaScript 呀,它比 JS 更好用,是 JS 的超集,它是根据 ES6 的,便是咱们方才议论的 ES6 ,你还记住吧。

ES2016+ 现已是 ES6 的超集了,怎样又冒出来一个 Typescript ?

是这样的, Typescript 能让咱们写出「强类型」的 JS ,然后削减运转时的过错。 2016 年,咱们应该让 JS 支撑强类型了。

明显 Typescript 能够做到。

Flow 也能够做到,区别是 Typescript 需求编译,而 Flow 仅仅查看语法。

唉, Flow 是?

是一个静态类型查看器,便是 Facebook 的人写的。运用 OCaml 写的,函数式编程很叼的。

OCaml ?函数式编程?

现在大牛都用这些东西,都 2016 年了,你懂的,函数式编程、高阶函数、柯里化、纯函数这些概念。

不知道你在说什么。

一开端咱们都不知道。这么说吧,你只需求知道函数式编程比面向目标编程凶猛, 2016 年咱们就指着函数式编程了。

等下,我大学里学过面向目标编程,其时我觉得它还不错。

Java 在被 Oracle 买下来之前也挺不错啊。我的意思是,面向目标曾经是不错,现在仍然有人用它,可是现在一切人都发觉状况改换是很难保护的,所以咱们都开端用「不可变目标」和函数式编程了。 Haskell 的人现已用这套东西用了很久了,不过走运的是 Web 开发范畴里有 Ramda 这样的库,让咱们用 JS 就能够进行函数式编程了。

你刚刚是不是又抛出了几个名词? Ramnda 又是什么?

不是 Ramnda ,是 Ramda ,跟 Lambda 表达式有点像。是 David Chambers 写的库。

谁?

David Chambers ,大神一个。 blablabla

我不得不打断你一下了。这些东西看起来都不错,可是我觉得它们都太杂乱,并且没必要。我仅仅想获取数据然后展现,我很确认这种情况下我不需求把握这些常识。

回到 React 吧,用 React 我怎样从服务器获取数据?

额, React 没有供给这个功用,你只能用 React 展现数据。

服了啊。那我怎样获取数据?

你用 Fetch API 就能够了。

啥玩意?这个 API 的姓名很烂啊。

我也觉得是啊。 Fetch API 是浏览器供给的异步恳求接口。

哦,那不便是 AJAX 。

AJAX 仅仅运用 XMLHttpRequest 目标,可是 Fetch API 能够让你用 Promise 风格来主张异步恳求,帮你脱节「回调阴间」。

回调阴间?

是的,每次你主张一个异步恳求,就得等候它呼应。这时你就得在函数里运用一个函数,这种嵌套调用便是回调阴间。

好吧。 Promise 处理了这个问题么?

是的。用 Promise 来办理回调,你就能够写出更易读的代码,更简略测验的代码。乃至能够一起主张多个恳求,然后等候它们悉数回来。

Fetch 也能做到吗?

是的。但条件是你的用户运用了新版的浏览器,否则的话你就需求加一个 Fetch 的 「 polyfill 」,或许运用 Request 、 Bluebird 或许 Axios 这些库。

天呐我究竟需求多少个库?

这是 JS ,同一件作业有上千个库在做。咱们了解库,并且咱们有最好的库,咱们有海量的库,要什么有什么。

你方才说的几个库都是干什么的?

这几个库操作 XMLHttpRequest 然后回来 Promise 目标。

如同 jQuery 的 ajax 办法做的是相同的事吧……

从 2016 年起咱们就不必 jQuery 了。用 Fetch ,大不了加个 Polyfill ,要否则用 Bluebird 、 Request 或许 Axios 都行。然后用 await 和 async 办理 Promise ,这样才干操控好异步使命。

这是你第三次说 await 了,那是什么东西?

await 能让你拦住一个异步调用,让你更好地操控异步回来的数据,大大增强了代码的可读性。 await 十分好用,你只需求在 Babel 里增加 stage-3 装备,或许增加 syntax-async-functions 和 transform-async-to-generator 插件就能够了。

听起来像是疯了。

没疯。为了运用 await ,把 Typescript 编译之后再用 Babel 转译一道的人才是疯了。

啥玩意? Typescript 不支撑 await ?

下个版别就支撑了。

我现已无话可说了。

你看其实很简略。用 Typescript 写代码,用 Fetch 主张异步恳求,一切代码编译成 ES6 ,然后用上 Babel 的 stage-3 装备项,把 ES6 转译成 ES5 。一切代码用 SystemJS 加载。假如你用不了 Fetch ,就加个 polyfill ,或许用 Bluebird 、 Request 或许 Axios ,这样你就能够用 await 来处理 Promise 了。

看了咱们关于「简略」的了解是不同的。好吧,有了这些,我总算能够获取数据然后用 React 展现数据了,对吧?

你的网页需求处理状况改变吗?

唔,不必吧。我仅仅想展现数据。

那就好,否则我就得跟你解说 Flux ,以及 Flux 的一些完成,比方 Flummox 、 Alt 、 Fluxible 。不过说真的你应该用 Redux 。

你说的这些我就当耳旁风了。再说一次,我只想展现数据。

这样啊,假如你仅仅想展现数据,其实你不需求 React 。你只需求一个模板引擎。

你逗我呢?

我仅仅告知你你能够用什么技术。

别说了,真的。

我想说,即便仅仅用一个模板引擎,我仍是会用 Typescript + SystemJS + Babel 的。

我仅仅想在页面上展现数据,你就告知我用哪个模板引擎就好了。

有许多,你用过哪一个?

额,太久没用了,不记住了。

jTemplates 、 jQote 仍是 PURE ?

额,不记住,还有其他么?

Transparency? JSRender? MarkupJS? KnockoutJS? 这一个支撑双向绑定。

还有吗?

PlatesJS? jQuery-tmpl? Handlebars? 还有些人在用。

有点像。有哪些跟最终一个比较像的?

Mustache, underscore? 我记住连 Lodash 都有一个模板引擎,不过这是 2014 年的作业了。

额,也许是再新一点的库?

Jade? DustJS?

没用过

DotJS? EJS?

没用过。

Nunjucks? ECT?

没用过。记不起来了,要是你的话,你用哪个?

我应该会用 ES6 原生的模板字符串

我猜猜,只要 ES6 支撑。

对的。

需求用 Babel

对的。

需求用 npm 装置

对的。

需求用 Browserify 或许 Webpack ,或许 SystemJS

对的。

假如没用 Webpack 的话,我还需求一个使命办理东西。

对的。

可是由于我要用函数式编程和强类型言语,所以我首先要用上 Typescript 或许 Flow 。

对的。

假如我要用 await ,那我就必须用 Babel 转译。

对的。

然后我就能用上 Fetch 、 Promise 和各种炫酷的东西。

嗯,别忘了加上 Fetch 的 Polyfill ,由于 Safari 不支撑 Fetch 。

你猜怎样着,咱们就聊到这吧。我不做了,我不做 Web 了,我也不想再碰 JS 了。

没事,过不了几年,咱们都会用 Elm 或许 WebAssembly 了。

我要回后端去了,我受不这些变化、版别更新、编译和转译了, JS 社区假如觉得有人能跟上它的脚步,那这个社区便是疯了。

我了解你。我主张你去 Python 社区。

为什么?

传闻过 Python 3 吗?

译者:知乎-方应杭

原文:https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

QQ群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
网友议论(共1条议论) 正在载入议论......
沉着议论文明上网,回绝歹意咒骂 宣布议论 / 共1条议论
登录会员中心