在 2016 年学 JavaScript 是一种什么样的体验?(React从入门到放弃)

jquery 年代 vs 前端模块化


http://blog.csdn.net/offbye/article/details/52793921

++ 嘿,我最近接到一个 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 吗?

完。
译者注:最后一句「听说过 Python 3 吗?」是讽刺 Python 3 发布已经 8 年了,Python 社区却依然在使用 Python 2.7。而 JS 社区正好相反,把还没有实现的语言特性都用到生成环境中了!

译者:方应杭

上一篇:学Android开发,入门语言java知识点


下一篇:哈尔滨理工大学第六届程序设计团队 E-Mod