在 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 社区正好相反，把尚未实现的语言特性都用到生成环境中了！

译者：方应杭