旁白:遥远的外太空,一个代号为js的星球暴露了它的坐标,程序员星球派出了三位美女程序员,去这个神秘的星球考察。
特效:飞船
演员出场,摆pose
旁白: 然后飞船在登陆过程中被层层阻挠,经过破译信号,三位美女程序员发现,她们需要回答对方提出的问题,才能登星球。
js: 开发一个网页,用来展示服务端数据,用户可以对数据进行筛选,使用什么技术
a: 当然是用react
js: 什么是react
b: react是用来展示数据的库,它可以使代码维护性更高。使用react很简单,只需要引入react和react dom这两个依赖,然后用babel编译一下就可以了。
js: 什么是babel
c: Babel 是一个转译工具,Babel 能把你写的 JS 转译成任意版本的 JS。babel也可以用来编译es6
js: es6是什么
a: es6是javascript的一个版本,因为绝大部分浏览器都支持es5,所以需要把es6编译成es5,现在没人直接用es5了,都是用6,或7,就像iphone一样。
js:所以我只需要引入依赖的库,把代码用babel编译,就可以了?
b: 其实你可以用「模块管理器」把这三个库「打包」成一个文件。
js: 什么是模块管理器
c: 一般指的是管理amd或cmd模块的东西
js:什么是amd,cmd
a: 两种定义,用来描述模块的交互方式,你可以按amd或cmd的api来写代码,然后用browserify打包
js:什么是browserify
b: 是一个将commonjs形式的js文件打包起来的工具。npm上的模块都是commonjs形式的
js:什么是npm
c: 是一个公开的仓库,用于放置可依赖的模块。
js:所以我用 npm 安装 React 然后用 Browerify 来打包就好了?
a: 是的,你应该使用 Grunt、Gulp 或者 Broccoli 这样的任务管理工具,它们能自动运行 Browserify。
js:又是什么
b: 任务管理工具。不过我们现在已经不用了,现在我们用的都是 Webpack。
js: Webpack 是什么?
c: 另一种模块管理工具,同时也是一个任务管理工具。你可以认为它是 Browserify 的加强版。。Webpack 告诉你应该如何管理你的依赖,Webpack 允许你使用不同的模块管理器,不只是 CommonJS,甚至支持 ES6 模块。
js:回到 React 吧,用 React 我怎么从服务器获取数据?
a:额,React 没有提供这个功能,你只能用 React 展示数据。
js:服了啊。那我怎么获取数据?
b:你用 Fetch API 就可以了。
js:啥玩意?这个 API 的名字很烂啊。
c:我也觉得是啊。Fetch API 是浏览器提供的异步请求接口。
js:哦,那不就是 AJAX。
a:AJAX 只是使用 XMLHttpRequest 对象,但是 Fetch API 可以让你用 Promise 风格来发起异步请求,帮你摆脱「回调地狱」。
js:天呐我到底需要多少个库?
b:这是 JS,同一件事情有上千个库在做。我们了解库,而且我们有最好的库,我们有海量的库,要什么有什么。
js:好吧,有了这些,我终于可以获取数据然后用 React 展示数据了,对吧?
c:你的网页需要处理状态变更吗?
js:唔,不用吧。我只是想展示数据。
a: 那就好,不然我就得跟你解释 Flux,以及 Flux 的一些实现,比如 Flummox、Alt、Fluxible。不过说真的你应该用 Redux。
js: 吐血,这么多知识,你们是怎么知道的。
abc:我们都在程序员星球的alloyteam学院进修!
js: 我也想去
特效。飞船着陆,两个星球建交。