&img src=&/v2-2e15bb991c86af_b.jpg& data-rawwidth=&1024& data-rawheight=&735& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/v2-2e15bb991c86af_r.jpg&&&p&想体验 Linux，却舍不得卸载 Windows ？&/p&&p&想学习 Linux，却懒得装 VM？&/p&&p&想使用 Linux，却没有第二台电脑？&/p&&p&很多小白内心的 OS 是，为毛这个世界这么复杂，需要各平台切换来切换去的，还能不能让我安静的编程了。&/p&&p&好吧，也许跟我一样喜欢极简的你，可以体验一下这个 Windows 10 的新功能。&/p&&p&确切得说，不应该叫做 Windows / Linux 合体。它实际上是 Windows 10 新推出的专属 Linux 的 Windows 子系统。&/p&&p&官方名称为 &strong&Bash/WSL&/strong&。&/p&&p&也可以叫做 &strong&Bash on Ubuntu on Windows。&/strong&&/p&&p&也许很多人已经使用过这个功能了，但是在这里，我不防再给大家普及一下，因为我觉得使用它确实太方便了。&br&&/p&&br&&br&&h2&&strong&什么是 Bash/WSL&/strong&&/h2&&p&WSL 的全称是 Windows Subsystem for Linux，所谓 Bash，是一个 Linux Shell。&/p&&p&&strong&通俗点讲，就是一个 Windows 中只带命令行、不带 GUI 的 Linux 系统。&/strong&&/p&&p&先上个图给大家感受一下吧。&/p&&p&安装好之后，它会出现在开始菜单。&/p&&img src=&/v2-5b056c637ca5ff4de05b493_b.jpg& data-rawwidth=&400& data-rawheight=&681& class=&content_image& width=&400&&&br&&p&接下来出现的命令行就跟 Linux 上的终端一模一样了。&br&&img src=&/v2-3effcf96dc2ee1f92c0ec8c_b.jpg& data-rawwidth=&979& data-rawheight=&514& class=&origin_image zh-lightbox-thumb& width=&979& data-original=&/v2-3effcf96dc2ee1f92c0ec8c_r.jpg&&&/p&&p&没错，这就是 Windows 中的 Linux 系统。&/p&&p&从图中，你可以看出当前所用系统以及 Linux 目录结构。&/p&&p&Windows 10 creators update 中装的是 Ubuntu 16.04.2 LTS。&/p&&br&&br&&h2&&strong&Bash/WSL 评价&/strong&&/h2&&p&也许有人把它当作一个不中用的玩具，可是微软的确是想把它打造成一个真的 Linux 系统，让用户可以在 Windows 和 Linux 之间自由切换。&/p&&p&从微软的官方说明看，这不仅仅是给拿来学习和练手的大学生用的，Bash/WSL 面向的用户是众多的开发者：&/p&&ul&&li&Web / App 开发者，&br&&/li&&li&Open Source 开发者，&br&&/li&&li&跨平台开发者。&br&&/li&&/ul&&br&&p&所以我们有理由相信，跟原生 Linux 相比，Bash/WSL 有着接近相同的使用体验。&/p&&p&有权威人士使用跨平台的性能测试工具进行测试发现，在 Windows 下运行这些原生的 ELF 二进制程序和在 Linux 下运行所消耗的 CPU 、内存和 IO 性能相当。&/p&&br&&br&&p&另外，Bash/WSL 拥有原生 Linux 大部分的功能：&/p&&ul&&li&执行 Linux 大部分的命令，例如 grep, sed, awk 等等。&br&&/li&&li&使用 Linux 兼容文件系统、目录结构，无缝访问 Windows 目录。&br&&/li&&li&执行 Bash Shell 脚本，以及 Linux 命令行 App （vim，emacs 等）。它支持多种语言 （Javascript/node.js, Ruby, Python, C/C++, C# & F#, Rust, Go 等）和服务（sshd, MySQL, Apache, lighttpd）。&br&&/li&&li&通过 apt 安装 Linux 工具。&br&&/li&&li&等等。&br&&/li&&/ul&&br&&br&&p&当然， 目前来说，它仅仅只有一岁，还有着很多的局限，例如：&/p&&ul&&li&仅仅支持命令行，不支持 GUI&br&&/li&&li&只支持 Ubuntu&br&&/li&&li&Linux 功能支持不完备&br&&/li&&/ul&&br&&p&不过我相信以微软的实力，Bash/WSL 功能会越来越完善，体验会越来越好的。&/p&&p&我在前面一篇文章中讲过，VS 可以进行 Linux 开发，这恰恰是 Bash/WSL 的有力补充。 有了WSL，再加上 Visual Studio，真的给开发人员带来很大的便利，不用再恼火得在各个平台之间切换了。&/p&&p&网上有人评论说，这个功能晚了 10 年，早出来的话，早就大一统了。虽然略显夸张，但我还是很支持微软的这个 Linux 功能，因为对开发人员来说，有的时候，简单未必不是好事。&/p&&p&不过有一点大家搞清楚，微软提供的 Linux 的所有功能都在 User Mode，做嵌入式或者本身需要操作 Linux Kernel 的，你还得用真实的 Linux ，这一点不可替代。&/p&&img src=&/v2-5edbbe_b.jpg& data-rawwidth=&620& data-rawheight=&348& class=&origin_image zh-lightbox-thumb& width=&620& data-original=&/v2-5edbbe_r.jpg&&&br&&h2&&strong&尝试一下&/strong&&/h2&&p&我前面说了这么多，你是不是也有点跃跃欲试，想安装下体验看看了？&/p&&p&那么开始吧。&/p&&p&首先，你的电脑系统必须同时满足以下两个条件：&/p&&p&&strong&至少是 Windows 10 Anniversary Update&/strong&&/p&&p&&strong&必须是 64 bit&/strong&&/p&&p&然后，想继续安装的话，看我下面这篇文章吧：&/p&&a href=&/p/& class=&internal&&在 Windows 上搭建 Linux 子系统详细教程&/a&&br&&br&&p&最后，看完文章觉得实用的话，就顺手点个赞吧。&/p&&br&&br&&br&&br&&br&&blockquote&&p&&b&关注微信公众号：红猴子&/b&&/p&&p&这是一个工科生涨知识的号，公众号的内容有 CS\EE 技术, 职场以及经验谈，知乎专栏文章会首发于我的微信公众号，希望能给迷茫和困惑中的朋友一些启发与帮助，欢迎围观&/p&&/blockquote&
想体验 Linux，却舍不得卸载 Windows ？想学习 Linux，却懒得装 VM？想使用 Linux，却没有第二台电脑？很多小白内心的 OS 是，为毛这个世界这么复杂，需要各平台切换来切换去的，还能不能让我安静的编程了。好吧，也许跟我一样喜欢极简的你，可以体验一下这…
&img src=&/v2-3585cdd5d8c9f08d0b33_b.png& data-rawwidth=&1919& data-rawheight=&1008& class=&origin_image zh-lightbox-thumb& width=&1919& data-original=&/v2-3585cdd5d8c9f08d0b33_r.png&&&h2&1. 简介&br&&/h2&&p&对于很多想要拥有自己网站的人, 大多数都会首先上网搜索”如何建立一个网站”, 然而基本上所有的答案都是下面几个标准的步骤: 申请域名 =& 购买云服务器 =& 在服务器上部署 Web 应用 (balabalabala…)。&/p&&p&虽然前端与后端存在着大量优秀的 Web 框架, 软件工程师们可以很轻松地搭建起一个网站, 但这些步骤对于不会编程的人来说还是太困难了: 大多数人甚至不会在 Linux 系统下移动一个文件, 也不知道什么是 CSS 和 ES6 , 更不知道 Flask 和 express 有什么区别。很多人都会被网上&del&软件工程师们觉得超简单的&/del&教程中大段大段的代码吓到, 然后选择放弃或者购买付费建站服务。&/p&&p&然而大多数人只是需要一个可以记录、分享内容的简单的静态网站, 并不需要一个功能复杂的大型网站, 于是 ?Page.qy? 应运而生!&/p&&p&Page.qy 是一个&b&一站式管理、生成、部署静态网站&/b&的工具, 只需要一个 GitHub 账号, 然后剩下你需要做的唯一事情就是网站本身的内容! 不需要写一行代码, 也不需要进行任何服务器操作!&/p&&p&Page.qy 适用于: ? 简单的静态网站&/p&&p&Page.qy 不适用于: ? 动态网站&/p&&h2&2. 优点&/h2&&p&
拒绝一成不变 =& Page.qy 支持高度自定义的主题功能, 只需要安装并应用不同的主题, 就能为你生成完全不同风格的网站! (参考: &a href=&/?target=https%3A///HuQingyang/Page.qy/blob/master/doc/theme.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何为Page.qy 编写主题&i class=&icon-external&&&/i&&/a&)&/p&&p&
乘坐时间机器 =& Page.qy 的 TimeMachine 功能支持完整的文档历史记录, 你可以随时轻松恢复到任何一次的保存记录!&/p&&p&
不再丢失数据 =& Page.qy 完整的备份/恢复功能保障你的数据足够安全!&/p&&p&
文件自由导出 =& Page.qy 依托于 GitHub Page 但并不限于此, 你完全可以自由地将所有页面作为文件导出并部署在你想要的地方!&/p&&p&
所有平台可用 =& Page.qy 适用于 macOS/Windows/Linux 平台, 且为各平台提供一致的体验!&/p&&p&? 永远保持最新 =& Page.qy 支持无缝的更新体验, 有时甚至无需重启软件即可完成更新!&/p&&p&? 免费自由开源 =& Page.qy 将网站部署在 GitHub Page, 感谢 GitHub 免费提供的服务! Page.qy 基于 React 、Electron、Node.js 等现代 Web 技术构建, 感谢为这些开源项目贡献源码的软件工程师, 你们的开源项目是 Page.qy 的基础! 同时, Page.qy 也开源在 GitHub 并接受 issues 或共同开发!&/p&&h2&3. 技术栈&/h2&&p&Page.qy 基于 React 、Node.js、Electron 等现代 Web 技术构建。为了支持主题更换, 实现了一个轻量级的 HTML 模板引擎。实现了增量更新与热更新功能, 热更新甚至不需要重启软件就能完成更新...... 更多技术细节这里不再赘述, 请移步至我的 GitHub: &a href=&/?target=https%3A///HuQingyang/Page.qy& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Page.qy&i class=&icon-external&&&/i&&/a&&/p&&br&&h2&3. 截图&/h2&软件截图:&img data-rawwidth=&2610& data-rawheight=&1624& src=&/v2-4b1ecc8b84ba_b.png& class=&origin_image zh-lightbox-thumb& width=&2610& data-original=&/v2-4b1ecc8b84ba_r.png&&&img data-rawwidth=&2610& data-rawheight=&1624& src=&/v2-9df41df63ee5f5ce33af7e0ee5a8547e_b.png& class=&origin_image zh-lightbox-thumb& width=&2610& data-original=&/v2-9df41df63ee5f5ce33af7e0ee5a8547e_r.png&&&img data-rawwidth=&2610& data-rawheight=&1624& src=&/v2-e7eadeaa58c_b.png& class=&origin_image zh-lightbox-thumb& width=&2610& data-original=&/v2-e7eadeaa58c_r.png&&&img data-rawwidth=&2610& data-rawheight=&1624& src=&/v2-8da1a6c408bebfc2339c28cd_b.png& class=&origin_image zh-lightbox-thumb& width=&2610& data-original=&/v2-8da1a6c408bebfc2339c28cd_r.png&&&img data-rawwidth=&2610& data-rawheight=&1624& src=&/v2-cc3cbcc318ff_b.png& class=&origin_image zh-lightbox-thumb& width=&2610& data-original=&/v2-cc3cbcc318ff_r.png&&&br&&p&生成的网站截图:&/p&&img data-rawwidth=&3048& data-rawheight=&1828& src=&/v2-71bc4ada65035c3aea006a_b.png& class=&origin_image zh-lightbox-thumb& width=&3048& data-original=&/v2-71bc4ada65035c3aea006a_r.png&&&h2&3. 使用&/h2&&p&Page.qy 网站地址: &a href=&/?target=http%3A//page.huqingyang.top/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Page.qy&i class=&icon-external&&&/i&&/a& ( 请使用 Chrome、Edge 或 Safari 浏览器访问; 淘汰老版 IE 和各种国产浏览器是每个前端应该有的社会责任感
)&/p&&p&Page.qy 开源在 GitHub, 项目地址为 &a href=&/?target=https%3A///HuQingyang/Page.qy& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Page.qy&i class=&icon-external&&&/i&&/a&, 欢迎提交 issue 或参与共同开发!&/p&&p&另外, 如果你觉得 Page.qy 很赞的话, 请不要吝啬你的赞或者 Star
!&/p&&h2&4. One More Thing...&/h2&&p&求暑期前端实习!!! 如果哪位大佬对我有兴趣的话, 请大力地私信我 !!!&/p&&p&另外, 谁有兴趣开发主题请私信我, 合适的话我会放进下次更新的默认主题。&/p&&p&#EOF&/p&
1. 简介 对于很多想要拥有自己网站的人, 大多数都会首先上网搜索”如何建立一个网站”, 然而基本上所有的答案都是下面几个标准的步骤: 申请域名 =& 购买云服务器 =& 在服务器上部署 Web 应用 (balabalabala…)。虽然前端与后端存在着大量优秀的 Web 框架, …
&img src=&/v2-797b5c0c0ef3a212c4f061a6d16d5461_b.png& data-rawwidth=&400& data-rawheight=&400& class=&content_image& width=&400&&导读： 本文简单介绍函数式编程及其一些基础概念，重在概念理解。&br&&h2&一、什么是函数式编程？&/h2&函数式编程(&a href=&/?target=https%3A//en.wikipedia.org/wiki/Functional_programming& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Functional programming&i class=&icon-external&&&/i&&/a&)简称 &b&FP&/b&，并不是什么库或者框架，与过程式编程(Procedural programming)相对，而是一种编程范式。FP 通过声明纯函数抽象数据的处理，来避免或尽可能减少函数调用对于外部状态和系统产生的副作用。&br&&br&所谓&a href=&/?target=https%3A//drboolean.gitbooks.io/mostly-adequate-guide/content/ch3.html%23side-effects-may-include& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&副作用&i class=&icon-external&&&/i&&/a&，大抵有改变函数外系统状态，向外抛出异常，处理用户操作，修改入参，数据库查操作，DOM操作等等可能会引起系统错误操作。&br&&h2&二、为什么在 JavaScript 使用函数式编程思想&/h2&&p&&b&2.1 从语言特性来看&/b&&/p&&br&JavaScript 一开始的语法就是从 Scheme 这种函数式编程语言借鉴而来。随着语言标准的推进，语言本身的功能性不断丰富，闭包、箭头函数、高阶函数，数组迭代等等功能都让 JavaScript 中实现 &b&FP&/b& 变得简单，简单讲几个特性：&br&&br&&b&2.1.1. lambda 表达式&/b&&br&lambda 表达式其实是一个匿名函数，使用箭头清晰的表示输入输出的映射关系，JavaScript 中使用箭头函数来实现。&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&multiply&/span& &span class=&o&&=&/span& &span class=&nx&&x&/span& &span class=&o&&=&&/span& &span class=&nx&&x&/span& &span class=&o&&*&/span& &span class=&nx&&x&/span&
&span class=&nx&&multiply&/span&&span class=&p&&(&/span&&span class=&mi&&6&/span&&span class=&p&&)&/span& &span class=&c1&&// 36&/span&
&/code&&/pre&&/div&&br&&b&2.12 高阶函数&/b&&br&高阶( Higher-order )函数可以接受一个或者多个函数作为入参，输出一个函数。&br&简单写两个例子&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&add&/span& &span class=&o&&=&/span& &span class=&nx&&x&/span& &span class=&o&&=&&/span& &span class=&nx&&y&/span& &span class=&o&&=&&/span& &span class=&nx&&x&/span& &span class=&o&&+&/span& &span class=&nx&&y&/span&
&span class=&kr&&const&/span& &span class=&nx&&add10&/span& &span class=&o&&=&/span& &span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&mi&&10&/span&&span class=&p&&)&/span&
&span class=&nx&&add10&/span&&span class=&p&&(&/span&&span class=&mi&&5&/span&&span class=&p&&)&/span& &span class=&c1&&// 15&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&compose&/span& &span class=&o&&=&/span& &span class=&p&&(...&/span&&span class=&nx&&fns&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&nx&&x&/span& &span class=&o&&=&&/span&
&span class=&nx&&fns&/span&&span class=&p&&.&/span&&span class=&nx&&reduce&/span&&span class=&p&&((&/span&&span class=&nx&&acc&/span&&span class=&p&&,&/span& &span class=&nx&&fn&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&nx&&fn&/span&&span class=&p&&(&/span&&span class=&nx&&acc&/span&&span class=&p&&),&/span& &span class=&nx&&x&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&a&/span& &span class=&o&&=&/span& &span class=&nx&&x&/span& &span class=&o&&=&&/span& &span class=&nx&&x&/span& &span class=&o&&+&/span& &span class=&mi&&1&/span&
&span class=&kr&&const&/span& &span class=&nx&&b&/span& &span class=&o&&=&/span& &span class=&nx&&x&/span& &span class=&o&&=&&/span& &span class=&nx&&x&/span& &span class=&o&&+&/span& &span class=&mi&&2&/span&
&span class=&kr&&const&/span& &span class=&nx&&composedFn&/span& &span class=&o&&=&/span& &span class=&nx&&compose&/span&&span class=&p&&(&/span&&span class=&nx&&a&/span&&span class=&p&&,&/span& &span class=&nx&&b&/span&&span class=&p&&)&/span&
&span class=&nx&&composedFn&/span&&span class=&p&&(&/span&&span class=&mi&&1&/span&&span class=&p&&)&/span& &span class=&c1&&// 1 + 1 + 2 = 4&/span&
&/code&&/pre&&/div&&p&&b&2.1.3 filter map forEach reduce 迭代&/b&&/p&&p&&b&Array.prototype&/b& 下的 filter map forEach reduce 都是高阶函数，因为入参是个函数。&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&flatten&/span& &span class=&o&&=&/span& &span class=&p&&(&/span&&span class=&nx&&arr&/span& &span class=&o&&=&/span& &span class=&p&&[])&/span& &span class=&o&&=&&/span& &span class=&nx&&arr&/span&&span class=&p&&.&/span&&span class=&nx&&reduce&/span&&span class=&p&&(&/span&
&span class=&p&&(&/span&&span class=&nx&&acc&/span&&span class=&p&&,&/span& &span class=&nx&&val&/span&&span class=&p&&)&/span&&span class=&o&&=&&/span& &span class=&nx&&accconcat&/span&&span class=&p&&(&/span&&span class=&nb&&Array&/span&&span class=&p&&.&/span&&span class=&nx&&isArray&/span&&span class=&p&&(&/span&&span class=&nx&&val&/span&&span class=&p&&)&/span& &span class=&o&&?&/span& &span class=&nx&&flatten&/span&&span class=&p&&(&/span&&span class=&nx&&val&/span&&span class=&p&&)&/span& &span class=&o&&:&/span& &span class=&nx&&val&/span&&span class=&p&&),&/span&
&span class=&p&&[]&/span&
&span class=&p&&)&/span&
&span class=&kd&&let&/span& &span class=&nx&&arr&/span& &span class=&o&&=&/span& &span class=&p&&[&/span&&span class=&mi&&1&/span&&span class=&p&&,[&/span& &span class=&mi&&4&/span&&span class=&p&&,&/span& &span class=&mi&&5&/span& &span class=&p&&],&/span& &span class=&mi&&2&/span&&span class=&p&&,&/span& &span class=&mi&&3&/span&&span class=&p&&];&/span&
&span class=&nx&&flatten&/span&&span class=&p&&(&/span&&span class=&nx&&arr&/span&&span class=&p&&)&/span&
&span class=&c1&&// [1, 4, 5, 2, 3]&/span&
&/code&&/pre&&/div&&p&&b&2.2 从实际需求角度来看&/b&&/p&&p&就浏览器端而言，随着各种单页框架的发展，客户端的处理能力不断提升，越来越多的业务逻辑被放到端，从而导致客户端要维护的状态越来越多。随之而来的问题是，我们一步小心就会大量使用依赖于外部变量的函数，这些函数随着业务逻辑不断增加，从而导致逻辑分支剧增，状态难以追踪，代码可读性差，难以维护，而 FP 恰恰有着很好的解决方案。&/p&&p&另外，现在主流的编程语言基本上都引入函数式编程的特性，即使是以面向对象著称的 java，通过使用 stream + lambda 表达式，依然可以实践函数式编程思想，而 Spring5 更是将 Reactive 作为主要卖点，总之 FP 近来很火。&/p&&p&而 JS 的函数式编程生态也在不断丰富， RxJS， circleJS 等框架在前端产线上的应用也越来越广。&/p&&h2&三、使用函数式的优点&/h2&&p&使用 FP 编程主要有以下几个优点：&/p&&ul&&li&将数据和处理逻辑分离，代码更加简洁，模块化，可读性好&/li&&li&容易测试，测试环境容易模拟&/li&&li&逻辑代码可复用性强&/li&&/ul&&h2&四、函数式编程相关概念&/h2&&p&函数式编程的实现主要依赖于：&/p&&ul&&li&声明式编程&/li&&li&纯函数&/li&&li&不可变数据&/li&&/ul&&p&&b&4.1 声明式编程&/b&&/p&&ul&&li&&a href=&/?target=https%3A//en.wikipedia.org/wiki/Declarative_programming& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&声明式编程 Declarative programming&i class=&icon-external&&&/i&&/a& 只描述目标的性质，从而抽象出形式逻辑，告诉计算机需要计算什么而不是如何一步步计算。例如正则、SQL、 FP 等。&br&&/li&&li&&a href=&/?target=https%3A//en.wikipedia.org/wiki/Imperative_programming& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&指令式编程 Imperative Programming&i class=&icon-external&&&/i&&/a& 告诉计算机每一步的计算操作&br&&/li&&/ul&&br&&a href=&/?target=http%3A///questions/1784664/what-is-the-difference-between-declarative-and-imperative-programming& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&What is the difference between declarative and imperative programming&i class=&icon-external&&&/i&&/a&&p&最简单的，相同的数组处理，使用 for 循环是指令式，用 map 之类的操作是声明式。使用声明式编程，简化了代码，提高了复用率，为重构留有余地。&/p&&p&&b&4.2 纯函数&/b&&/p&&p&纯函数简要概括有两个特点：&/p&&ul&&li&函数的输出只与输入有关，相同输入产生的输出一致，并不会不依赖外部条件&/li&&li&函数调用不会改变函数域以外的状态或者变量，不会对系统产生副作用&/li&&/ul&&p&看个简单的例子：&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kd&&let&/span& &span class=&nx&&counter&/span& &span class=&o&&=&/span& &span class=&mi&&0&/span&
&span class=&kr&&const&/span& &span class=&nx&&increment&/span& &span class=&o&&=&/span& &span class=&p&&()&/span& &span class=&o&&=&&/span& &span class=&o&&++&/span&&span class=&nx&&counter&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&increment&/span& &span class=&o&&=&/span& &span class=&nx&&counter&/span& &span class=&o&&=&&/span& &span class=&o&&++&/span&&span class=&nx&&counter&/span&
&/code&&/pre&&/div&&p&前一个函数每次调用都会修改外部变量的值，返回值也依赖于外部变量；后一个函数对于同一输入值每次返回的结果都相同，并且不会对外部状态造成影响。所以后一个是纯函数。&/p&&p&为什么要追求函数的纯度，这就涉及到一个称为&b&引用透明性&/b&的概念。&/p&&p&&b&4.2.1 引用透明性&/b&&/p&&p&纯函数的这种&b&函数的返回值只依赖于其输入值&/b&的特性，被称为&a href=&/?target=https%3A//en.wikipedia.org/wiki/Referential_transparency& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&引用透明性（referential transparency)&i class=&icon-external&&&/i&&/a&，纯函数都是可以进行缓存的。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&memorize&/span&&span class=&p&&(&/span&&span class=&nx&&pureFn&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&_cache&/span& &span class=&o&&=&/span& &span class=&p&&{}&/span&
&span class=&k&&return&/span& &span class=&p&&(...&/span&&span class=&nx&&args&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&key&/span& &span class=&o&&=&/span& &span class=&nx&&JSON&/span&&span class=&p&&.&/span&&span class=&nx&&stringify&/span&&span class=&p&&(&/span&&span class=&nx&&args&/span&&span class=&p&&)&/span&
&span class=&k&&return&/span& &span class=&nx&&_cache&/span&&span class=&p&&[&/span&&span class=&nx&&key&/span&&span class=&p&&]&/span& &span class=&o&&||&/span& &span class=&p&&(&/span&&span class=&nx&&_cache&/span&&span class=&p&&[&/span&&span class=&nx&&key&/span&&span class=&p&&]&/span& &span class=&o&&=&/span& &span class=&nx&&purFu&/span&&span class=&p&&.&/span&&span class=&nx&&apply&/span&&span class=&p&&(&/span&&span class=&kc&&null&/span&&span class=&p&&,&/span& &span class=&nx&&args&/span&&span class=&p&&))&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&b&4.3 Immutable Data&/b&&/p&&a href=&/?target=https%3A///questions/148108/why-is-global-state-so-evil& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why is Global Mutable State so Evil?&i class=&icon-external&&&/i&&/a&
&p&「可变的全局状态是万恶之源」（其实从功能代码的角度看，局部和全局是相对而言的）,简而言之可变状态会让程序的运行变得不可预测，代码可读性差，难以维护。&/p&
&p&在 JS 中，当函数入参是对象类型的数据时，我们拿到的其实是个引用，所以即使在函数内部我们也是可以修改对象内部的属性，这种情景依然会产生副作用。&/p&&p&所以这个时候就需要引入 &a href=&/?target=https%3A//en.wikipedia.org/wiki/Immutable_object& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Immutable&i class=&icon-external&&&/i&&/a& 的概念。 Immutable 即 unchangeable， Immutable data在初始化创建后就不能被修改了，每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变（当然不是简单的深拷贝再修改）。&/p&&p&Immutable 比较流行的 JS 实现有 &a href=&/?target=https%3A///facebook/immutable-js/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&immutable-js&i class=&icon-external&&&/i&&/a& 和 &a href=&/?target=https%3A///rtfeldman/seamless-immutable& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&seamless-immutable&i class=&icon-external&&&/i&&/a&; 对于 React 党来说， immutable-js 一点都不陌生， &a href=&/?target=http%3A//redux.js.org/docs/recipes/UsingImmutableJS.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&immutable-js 配合 Redux 就是一种很好的 FP 实践&i class=&icon-external&&&/i&&/a&。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&map1&/span& &span class=&o&&=&/span& &span class=&nx&&Immutable&/span&&span class=&p&&.&/span&&span class=&nx&&Map&/span&&span class=&p&&({&/span&&span class=&nx&&a&/span&&span class=&o&&:&/span&&span class=&mi&&1&/span&&span class=&p&&,&/span& &span class=&nx&&b&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&&span class=&nx&&d&/span&&span class=&o&&:&/span&&span class=&mi&&2&/span&&span class=&p&&},&/span& &span class=&nx&&c&/span&&span class=&o&&:&/span&&span class=&mi&&3&/span&&span class=&p&&});&/span&
&span class=&kr&&const&/span& &span class=&nx&&map2&/span& &span class=&o&&=&/span& &span class=&nx&&map1&/span&&span class=&p&&.&/span&&span class=&nx&&set&/span&&span class=&p&&(&/span&&span class=&s1&&'a'&/span&&span class=&p&&,&/span& &span class=&mi&&50&/span&&span class=&p&&);&/span&
&span class=&nx&&map1&/span& &span class=&o&&===&/span& &span class=&nx&&map2&/span& &span class=&c1&&// false&/span&
&span class=&kr&&const&/span& &span class=&nx&&mapb1&/span& &span class=&o&&=&/span& &span class=&nx&&map1&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&s1&&'b'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&mapb2&/span& &span class=&o&&=&/span& &span class=&nx&&map2&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&s1&&'b'&/span&&span class=&p&&)&/span&
&span class=&nx&&mapb1&/span&&span class=&o&&===&/span&&span class=&nx&&mapb2&/span& &span class=&c1&&// true&/span&
&/code&&/pre&&/div&&h2&五.小结&/h2&&p&简单讲了讲一些 FP 的基本概念，主要是明确一下对于 FP 的意识形态=..=，有个大概的了解，继续下一步关于函数抽象和数据抽象的学习=。=&/p&&h2&六.参考&/h2&&a href=&/?target=https%3A//drboolean.gitbooks.io/mostly-adequate-guide/content/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mostly-adequate-guide&i class=&icon-external&&&/i&&/a&&a href=&/?target=https%3A//drboolean.gitbooks.io/mostly-adequate-guide/content/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&drboolean.gitbooks.io/m&/span&&span class=&invisible&&ostly-adequate-guide/content/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&/?target=///stoeffel/awesome-fp-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&awesome-fp-js&i class=&icon-external&&&/i&&/a&&br&&a href=&/?target=https%3A///javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Master the JavaScript Interview: What is a Pure Function?&i class=&icon-external&&&/i&&/a&&br&&a href=&/?target=https%3A///javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Master the JavaScript Interview: What is Functional Programming?&i class=&icon-external&&&/i&&/a&
导读： 本文简单介绍函数式编程及其一些基础概念，重在概念理解。 一、什么是函数式编程？函数式编程()简称 FP，并不是什么库或者框架，与过程式编程(Procedural programming)相对，而是一种编程范式。FP 通过声明纯函数抽象数据的处…
&img src=&/v2-e109bb0c6a1a3_b.jpg& data-rawwidth=&750& data-rawheight=&420& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&/v2-e109bb0c6a1a3_r.jpg&&&p&时光飞逝， 每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月，又准备了哪些优秀的 Web 开发资源呢？前端儿，一起来瞧瞧吧！&/p&&h2&&b&1. &a href=&/?target=https%3A//buefy.github.io/%23/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Buefy&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-1d7c93c620af9bce64052_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-1d7c93c620af9bce64052_r.jpg&&这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而&a href=&/?target=https%3A///jgthms/bulma& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& Bulma &i class=&icon-external&&&/i&&/a&则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件，例如 modals、toast 以及 notifications 等动态元素，使开发人员可以快速添加任何用户界面到其现有的 Vue.js 项目。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//buefy.github.io/%23/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&2. &a href=&/?target=https%3A//mburakerman.github.io/hrjs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HR.js&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-fcfcddf9c419cfa51e4e3_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-fcfcddf9c419cfa51e4e3_r.jpg&&HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素，选择好要高亮的单词，并设置背景颜色，就可以搞定了。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//mburakerman.github.io/hrjs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&3. &a href=&/?target=https%3A//facebook.github.io/react-vr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React VR&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-ec1b4f9899a68ddbb6dd81_b.png& data-rawwidth=&785& data-rawheight=&198& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-ec1b4f9899a68ddbb6dd81_r.png&&React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API（如 WebGL 和 WebVR）与 React 的声明式渲染进行搭配，从而产生可以通过各种设备使用的体验。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//facebook.github.io/react-vr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&4. &a href=&/?target=https%3A//atomiks.github.io/tippyjs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Tippy.js&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-e56fadcc8cd9c9b7af6901_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-e56fadcc8cd9c9b7af6901_r.jpg&&这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库，并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况，它会自动退回至常规的 title 属性。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//atomiks.github.io/tippyjs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&5. &a href=&/?target=http%3A//barbajs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Barba.js&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-b1badc4566eeb0bfd98ed_b.jpg& data-rawwidth=&785& data-rawheight=&149& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-b1badc4566eeb0bfd98ed_r.jpg&&Barba.js 是一个无依赖的 JavaScript 库，可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX（推送状态 AJAX）来设计的，绕过正常有效的 URL，并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过&a href=&/?target=https%3A//developer.mozilla.org/en-US/docs/Web/API/History& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& Push 状态的 API &i class=&icon-external&&&/i&&/a&，在应用程序的 URL 中可以正确的反映出状态的变化。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=http%3A//barbajs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&6. &a href=&/?target=https%3A///uikit/uikit& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&UIkit&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-48a6ab294a5d4c61248cbc_b.jpg& data-rawwidth=&890& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&890& data-original=&/v2-48a6ab294a5d4c61248cbc_r.jpg&&UIkit 是一个优秀的轻量级前端框架，它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观，还是框架，UIkit 的设计都十分的出彩。它不光具备统一的样式，还有易于记忆的 API，许多自定义选项以及有用的修饰器类，并且它的使用文档编写的也相当的出众。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A///uikit/uikit& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&7. &a href=&/?target=https%3A///callstack-io/haul& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Haul&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-6be815dc75db762ff299af_b.png& data-rawwidth=&785& data-rawheight=&157& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-6be815dc75db762ff299af_r.png&&Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能够改进错误消息，大大减少编译时间。Haul 也拥有出色的使用文档，并且完全开源、可定制。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A///callstack-io/haul& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&8. &a href=&/?target=https%3A///wingify/across-tabs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AcrossTabs&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-02be65bc3fd_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-02be65bc3fd_r.jpg&&AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库，你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息（例如 UID），所以它可以判断子 Tab 是否依旧打开，或者已关闭。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A///wingify/across-tabs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&9. &a href=&/?target=https%3A//stylelint.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Stylelint&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-c63aee1f0eae5d96cdb9_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-c63aee1f0eae5d96cdb9_r.jpg&&Stylelint 是一款现代的 CSS linter 工具，它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大，它不仅可以让你禁止或设置白名单属性，还能够捕获错误以及识别 SCSS 语法。同时，Stylelint 也可完全定制，帮助你添加或去除一些规则选项。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//stylelint.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&10. &a href=&/?target=https%3A//bitshadow.github.io/iconate/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Iconate&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-346f091f85f6ea3b8b365c88ef101f2f_b.jpg& data-rawwidth=&905& data-rawheight=&153& class=&origin_image zh-lightbox-thumb& width=&905& data-original=&/v2-346f091f85f6ea3b8b365c88ef101f2f_r.jpg&&这是一个非常棒的 Vanilla JavaScript 库。通过点击图标，它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标，并使用简单的 JavaScript API 来选择要将其转换为哪一种图标，同时选择相应的动画效果就搞定了。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//bitshadow.github.io/iconate/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&11. &a href=&/?target=https%3A///nadbm/react-datasheet& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React-Datasheet&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-1a80b275dee558fe753e0ee_b.png& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-1a80b275dee558fe753e0ee_r.png&&React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外，在 GitHub 上还有三个有用的示例，供你参考。即基本的表，带有公式的表以及嵌套组件的表。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A///nadbm/react-datasheet& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&12. &a href=&/?target=https%3A//purecss.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pure CSS&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-a3d9db59ce0c274562bff9_b.jpg& data-rawwidth=&950& data-rawheight=&141& class=&origin_image zh-lightbox-thumb& width=&950& data-original=&/v2-a3d9db59ce0c274562bff9_r.jpg&&这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后，仅有 3.8 kb 的大小，如果你仅使用其中的一部分模块，那 CSS 真是小到没有朋友了！同时，它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单，适用于任何的 Web 项目。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//purecss.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&13. &a href=&/?target=https%3A//simpleicons.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Simple Icons&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-ce26feffaf4c_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-ce26feffaf4c_r.jpg&&Simple Icons 是一个涉及知名品牌（涵盖社交网络、应用程序、服务等）的免费图标合集。这些图标都是用 SVG 制作的，所以它们可以被缩放到任何尺寸，不用担心图片的像素。而大多数图标的大小都低于 500 字节。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//simpleicons.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&14. &a href=&/?target=https%3A///gka/chroma.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chroma.js&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-df97bb4faa67c3b6e9a0e9fd1c1822de_b.jpg& data-rawwidth=&1180& data-rawheight=&171& class=&origin_image zh-lightbox-thumb& width=&1180& data-original=&/v2-df97bb4faa67c3b6e9a0e9fd1c1822de_r.jpg&&Chroma.js 是一个用于处理颜色的微型 JavaScript 库。它提供了丰富的 API，以及超过 50 种用于操纵颜色的功能，让你可以使用色彩模式切换，改变亮度和饱和度，创建渐变比例等许多实用的色阶处理方法。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A///gka/chroma.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&h2&&b&15. &a href=&/?target=https%3A//weex.apache.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Weex&i class=&icon-external&&&/i&&/a&&/b&&/h2&&img src=&/v2-8c1d4a851f674ae15f55c9db_b.jpg& data-rawwidth=&785& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&/v2-8c1d4a851f674ae15f55c9db_r.jpg&&Weex 是一个构建跨平台的移动应用程序框架，类似于 React Native，但适用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 编写应用程序，并将其以 Android 和 iOS 客户端的形式呈现。该框架有许多内置的组件、API 和其他有用的功能。&br&&blockquote&&p&&strong&项目地址：【&a href=&/?target=https%3A//weex.apache.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门&i class=&icon-external&&&/i&&/a&】&/strong&&/p&&/blockquote&&p&感谢你的阅读。若你有所收获，欢迎点赞与分享。&/p&&p&&strong&注：&/strong&&/p&&ol&&li&本文版权归原作者所有，仅用于学习与交流；&/li&&li&如需转载译文，烦请按下方注明出处信息，谢谢！&/li&&/ol&&blockquote&&p&英文原文：&a href=&/?target=http%3A///-interesting-javascript-and-css-libraries-for-may-2017/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&15 Interesting JavaScript and CSS Libraries for May 2017&i class=&icon-external&&&/i&&/a&&br&作者：Danny Markov&br&译者：&a href=&/?target=http%3A///itlion114/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IT程序狮&i class=&icon-external&&&/i&&/a&&br&译文地址：&a href=&/p/& class=&internal&&&span class=&invisible&&https://&/span&&span class=&visible&&/p/26&/span&&span class=&invisible&&771146&/span&&span class=&ellipsis&&&/span&&/a&&/p&&/blockquote&
时光飞逝， 每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月，又准备了哪些优秀的 Web 开发资源呢？前端儿，一起来瞧瞧吧！1. 这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 W…
&img src=&/v2-1db3dc89_b.jpg& data-rawwidth=&406& data-rawheight=&311& class=&content_image& width=&406&&&p&五四青年节了，“空巢老人”，这样一个缺乏陪伴的群体总是让人们唏嘘。可是最近另外一个流行起来的词却让人觉得更加悲凉——“空巢青年”。最近网易、淘宝等互联网公司用大数据解读了下当下中国的“空巢青年”，快来看看，其中有没有你的影子？&/p&&strong&“空巢青年”是谁？&/strong&&p&&strong&这样解释：&/strong&&/p&&p&“空巢青年”，指的是在大城市奋斗打拼的年轻人，&/p&&p&他（她）们远离故乡、亲人，独居生活，缺乏感情寄托，没有家庭生活。&/p&&img src=&/v2-d6d01bb92801cb3efb6eb_b.png& data-rawwidth=&211& data-rawheight=&337& class=&content_image& width=&211&&&p&《疯狂动物城》里的兔子朱迪来到Zootopia，&/p&&p&一个人住进宿舍时的那种落寞，&/p&&p&其实，这何尝不是“空巢青年”的真实写照？&/p&&img src=&/v2-59c33c577d5e9d84581e_b.png& data-rawwidth=&660& data-rawheight=&377& class=&origin_image zh-lightbox-thumb& width=&660& data-original=&/v2-59c33c577d5e9d84581e_r.png&&&p&根据国家民政局统计，&/p&&p&截止到 2015 年，&/p&&p&我国单身成年人口数量已超过 2 亿，&/p&&p&其中至少有 5800 万人过着&/p&&p&“一个人的生活”。&/p&&img src=&/v2-007da450d18ea64dcb1a18_b.png& data-rawwidth=&674& data-rawheight=&716& class=&origin_image zh-lightbox-thumb& width=&674& data-original=&/v2-007da450d18ea64dcb1a18_r.png&&&p&在中国，这样人口数超过5000万的省市也仅有10个，&/p&&p&“空巢青年”数量=中国第11大省市规模&/p&&p&男性青年（占比64%）约为女性青年的2倍&/p&&p&而90后人数也达到61%&/p&&img src=&/v2-159c78a41ec19fdb797992d_b.png& data-rawwidth=&681& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&681& data-original=&/v2-159c78a41ec19fdb797992d_r.png&&&strong&空巢青年＝死宅无社交？&/strong&&p&网易新闻数据显示，&/p&&p&孤独是空巢青年的生活主旋律&/p&&p&不同性别之间的孤独高峰点也存在着不同&/p&&img src=&/v2-ab7b0d32dbece2e9e5f6_b.png& data-rawwidth=&685& data-rawheight=&879& class=&origin_image zh-lightbox-thumb& width=&685& data-original=&/v2-ab7b0d32dbece2e9e5f6_r.png&&&p&对于空巢青年来说，30岁可能是情感婚姻上的一个槛&/p&&p&那么空巢青年为何难以找到另一半？&/p&&p&行业特点可能是重要原因之一&/p&&img src=&/v2-9a4395dec1f76c08be32e_b.png& data-rawwidth=&685& data-rawheight=&937& class=&origin_image zh-lightbox-thumb& width=&685& data-original=&/v2-9a4395dec1f76c08be32e_r.png&&&p&大部分空巢青年虽然钱包不鼓，却并不宅，社交也不缺乏&/p&&img src=&/v2-6a6fc2f2_b.png& data-rawwidth=&577& data-rawheight=&526& class=&origin_image zh-lightbox-thumb& width=&577& data-original=&/v2-6a6fc2f2_r.png&&&br&&p&他们中的55%每周与朋友聚会至少一次，并有着聚会轰趴点&/p&&img src=&/v2-673fc3b2d0b63fd697fa16_b.png& data-rawwidth=&713& data-rawheight=&901& class=&origin_image zh-lightbox-thumb& width=&713& data-original=&/v2-673fc3b2d0b63fd697fa16_r.png&&&p&据阿里数据显示，在闲鱼的技能分享类目中，&/p&&p&有超过80%的技能分享来自于“空巢青年”&/p&&img src=&/v2-b5685fdd6a647ba6eded176_b.png& data-rawwidth=&580& data-rawheight=&660& class=&origin_image zh-lightbox-thumb& width=&580& data-original=&/v2-b5685fdd6a647ba6eded176_r.png&&&br&&strong&空巢青年如何排解空虚？&/strong&&br&&p&即使 “逃离北上广”的口号甚嚣尘上，&/p&&p&大部分空巢青年也不打算离开一线城市，&/p&&p&大部分人则是享受着充实的生活，并为梦想而不懈奋斗着&/p&&p&他们学会了很好地照顾自己&/p&&img src=&/v2-9e3f4bfb30a73c10baf771d8ae80439e_b.png& data-rawwidth=&681& data-rawheight=&744& class=&origin_image zh-lightbox-thumb& width=&681& data-original=&/v2-9e3f4bfb30a73c10baf771d8ae80439e_r.png&&&p&他们不止关心自己，还会关心很多新闻资讯。&br&&/p&&img src=&/v2-381b377de56a10d25217_b.png& data-rawwidth=&685& data-rawheight=&780& class=&origin_image zh-lightbox-thumb& width=&685& data-original=&/v2-381b377de56a10d25217_r.png&&&br&&p&喜欢听音乐购物&/p&&img src=&/v2-6f8e88758dfd5_b.png& data-rawwidth=&625& data-rawheight=&709& class=&origin_image zh-lightbox-thumb& width=&625& data-original=&/v2-6f8e88758dfd5_r.png&&&p&这世上没有“吃”解决不了的问题。&br&&img src=&/v2-830b5536e67dbc2f1a1d80abea0fc2ff_b.png& data-rawwidth=&602& data-rawheight=&593& class=&origin_image zh-lightbox-thumb& width=&602& data-original=&/v2-830b5536e67dbc2f1a1d80abea0fc2ff_r.png&&&/p&&p&阿里数据显示，空巢青年普遍有定期购买零食的习惯&/p&&p&出人意料“空巢青年”还经常翻“到家服务”的牌子。&img src=&/v2-13a7f3ba77bb_b.png& data-rawwidth=&608& data-rawheight=&606& class=&origin_image zh-lightbox-thumb& width=&608& data-original=&/v2-13a7f3ba77bb_r.png&&&/p&&p&看完这些，&/p&&p&小编也觉得自己快要成“空巢青年”带盐人了……&/p&&p&其实，&/p&&p&“空巢青年”只是人生的一个阶段，&/p&&p&一个人的生活，&/p&&p&也未尝不能丰富和舒适~&/p&&p&&strong&据网易新闻、阿里数据、百度百科等综合，来自：浙商网&/strong&&/p&&p&&strong&原文链接：&/strong&&b&&a href=&/?target=http%3A//mp./s/ubLdI2CLRV7mwgNOJ4u3Og& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&阿里大数据！｜ 半亿人成&空巢青年&，身中多枪！！！&i class=&icon-external&&&/i&&/a&&/b&&/p&
五四青年节了，“空巢老人”，这样一个缺乏陪伴的群体总是让人们唏嘘。可是最近另外一个流行起来的词却让人觉得更加悲凉——“空巢青年”。最近网易、淘宝等互联网公司用大数据解读了下当下中国的“空巢青年”，快来看看，其中有没有你的影子？“空巢青年”…
&img src=&/v2-a495c3bb4ea9a02925c9_b.jpg& data-rawwidth=&960& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&960& data-original=&/v2-a495c3bb4ea9a02925c9_r.jpg&&&br&&h2&前言&/h2&&p&react 的生态体系比较庞大，它在web端，移动端，服务器端，VR领域都有涉及。&/p&&p&react可以说是目前为止最热门，生态最完善，应用范围最广的前端框架。react结合它的整个生态，它可以横跨web端，移动端，服务器端，乃至VR领域。&/p&&p&可以毫不夸张地说，react已不单纯是一个框架，而是一个行业解决方案。&/p&&p&下面就来说说 react庞大生态体系的构成。&/p&&h2&一，react生态之——web端&/h2&&p&react本身是面向web端的，它很轻便灵活，只是MVC架构中的view(视图)层。由于只是view层，所以它需要配合生态体系中的其他框架或模块来使用。&/p&react的web生态构成&ul&&li&&p&1，路由 &br&react的路由解决方案有多个，这里只提用的最多，也最为推荐的&a href=&/?target=https%3A///ReactTraining/react-router& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-router&i class=&icon-external&&&/i&&/a&。现已更新到v4.1版本。另外，推荐使用&a href=&/?target=https%3A///reactjs/react-router-redux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-router-redux&i class=&icon-external&&&/i&&/a&和&a href=&/?target=https%3A///ReactTraining/react-router& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-router&i class=&icon-external&&&/i&&/a&搭配使用，可保持路由器与应用程序状态同步。&/p&&br&&/li&&li&&p&2，状态管理器 &br&react只是UI层，对于如何管理应用的状态，facebook提出了&a href=&/?target=http%3A///blog/2016/01/flux.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&flux架构&i class=&icon-external&&&/i&&/a&，而基于这一架构，react生态陆续出现了&a href=&/?target=https%3A///reactjs/redux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&redux&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///reflux/refluxjs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&refluxjs&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///mobxjs/mobx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mobx&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///reactjs/react-redux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-redux&i class=&icon-external&&&/i&&/a& 等一系列状态管理框架。&br&&br&其中&a href=&/?target=https%3A///reactjs/redux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&redux&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///mobxjs/mobx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mobx&i class=&icon-external&&&/i&&/a&是无疑是最受欢迎的两个。但它们的应用场景则大不相同。&br&Mobx 适合做一些简单的应用，原型实验，适合小的团队使用。Mobx 的优点是响应状态的变化。&br&&br&redux适合复杂的应用，大团队，需求变化多。它的优点是响应动作和事件。&br&redux不仅应用于react，也可以应用于angular，vue等框架，只是redux和react配合使用最为契合。&br&&br&另外国内蚂蚁金服前端团队基于redux, react-router打造了另一个前端框架——&a href=&/?target=https%3A///dvajs/dva& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dva&i class=&icon-external&&&/i&&/a&。&br&&a href=&/?target=https%3A///dvajs/dva& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dva&i class=&icon-external&&&/i&&/a&简单来讲是对redux方案的集成与拓展，它突破框架的本身，形成一套略为完整的前端架构，处理了很多包括项目构建，异步处理、统一请求、统一错误处理等一系列诸多问题。&br&&br&如果你选择redux方案，那么建议直接使用&a href=&/?target=https%3A///dvajs/dva& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&dva&i class=&icon-external&&&/i&&/a&。&/p&&/li&&li&&p&3，UI库 &br&和vue,angular相比，react的UI库无疑是最为丰富的，且十分优秀。目前react的UI库有将近二十多个，这里主要列举最为优秀的几个。&br&&br&首先国外的有&a href=&/?target=https%3A///callemall/material-ui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&material-ui&i class=&icon-external&&&/i&&/a&、&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-toolbox&i class=&icon-external&&&/i&&/a&。它们都基于谷歌的&a href=&/?target=https%3A//material.io/guidelines/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&material&i class=&icon-external&&&/i&&/a&设计理念，因此界面非常精美，尤其适用于web开发。&br&&br&其次是国内蚂蚁金服开源的&a href=&/?target=https%3A//ant.design/index-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ant design&i class=&icon-external&&&/i&&/a&，以及百分点公司开源的&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&bfd-ui&i class=&icon-external&&&/i&&/a&。这两个都是企业级的UI库，提供的组件极其丰富，此外逻辑交互也处理得非常好，基本不需要你操作过多的业务逻辑即可完成开发。&br&&br&而在这众多的UI库中，表现最为出色的莫过于蚂蚁金服开源的&a href=&/?target=https%3A//ant.design/index-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ant design&i class=&icon-external&&&/i&&/a&。&/p&&/li&&li&&p&4, 一些工具 &br&Immutable &br&&a href=&/?target=https%3A///facebook/immutable-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&immutable-js&i class=&icon-external&&&/i&&/a&是facebook推出的完全独立的一个js库，侧重函数式编程中不可变数据结构，使用Immutable可使你的react应用性能上会有很大的提升。&br&&br&draft-js——基于react的编辑器语言 &br&&a href=&/?target=https%3A///facebook/draft-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&draft-js&i class=&icon-external&&&/i&&/a& 是由facebook开源的编辑器语言。它提供了众多API可用于定制化开发你想要的react编辑器。&br&&br&css-modules ——css模块化解决方案&br&&a href=&/?target=https%3A///css-modules/css-modules& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css-modules&i class=&icon-external&&&/i&&/a&不是为react而生的，它是css模块化的一种解决方案，但它和react配合使用非常的契合。&br&css的发展，已从最原始的css,到后来的less/sass，再到&a href=&/?target=https%3A///postcss/postcss& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&postcss&i class=&icon-external&&&/i&&/a&，以及&a href=&/?target=http%3A///css-in-js-in-css& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css in js&i class=&icon-external&&&/i&&/a&，再到&a href=&/?target=https%3A///css-modules/css-modules& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css-modules&i class=&icon-external&&&/i&&/a&。无一不是向着模块化进发，甚至于有没有可能发展到组件化style，还有待实践和考察。&br&&br&React Devtools——react调试工具 &br&&a href=&/?target=https%3A///facebook/react-devtools& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-devtools&i class=&icon-external&&&/i&&/a&是facebook推出的一款调试工具。可有助于提高你的react应用开发效率。&br&&br&Babel——es6/7 &br&开发react应用，推荐使用babel搭建es6/7开发环境。这样你就可以尽情地使用高逼格兼高效率、高体验的es6/7语法了。&br&无论是react，还是redux，还是Immutable等等，甚至是不相关的rx.js，都强调函数式编程。&br&说句题外话，整个react体系，都在强调js，甚至连css(&a href=&/?target=https%3A///css-modules/css-modules& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css-modules&i class=&icon-external&&&/i&&/a&)、html(&a href=&/?target=http%3A///react/docs/jsx-in-depth.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jsx&i class=&icon-external&&&/i&&/a&)都融入了js处理，所以提高你的js驾驭能力可使你在前端路上不会迷失。&br&&br&TypeScript &br&TypeScript是微软开源的JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。而TypeScript也因此成为了angular的一个制胜关键点。&br&那react能否使用呢？当然是可以的。&br&蚂蚁金服所开源的React UI库&a href=&/?target=https%3A//ant.design/index-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ant design&i class=&icon-external&&&/i&&/a&就是使用&a href=&/?target=https%3A///Microsoft/TypeScript& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TypeScript&i class=&icon-external&&&/i&&/a&来开发的。由此可知其强大。&br&顺便提供几个TypeScript的学习教程: &a href=&/?target=http%3A//www.typescriptlang.org/docs/tutorial.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&官方文档&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A//zhongsp.gitbooks.io/typescript-handbook/content/index.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&简易中文版&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&中文版教程&i class=&icon-external&&&/i&&/a&&/p&&/li&&br&&li&5，react项目构建 &br&前端构建工具有很多种，比如最为流行的&a href=&/?target=https%3A//webpack-china.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&webpack&i class=&icon-external&&&/i&&/a&、百度开源的&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&fis3&i class=&icon-external&&&/i&&/a&、以及 &a href=&/?target=https%3A///gulpjs/gulp& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&gulp&i class=&icon-external&&&/i&&/a&。而开发react应用，推荐使用强大的&a href=&/?target=https%3A//webpack-china.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&webpack&i class=&icon-external&&&/i&&/a&做项目构建。这也是官方的推荐。&/li&&/ul&&h4&react的web技术栈的选择&/h4&&p&通过上面可以了解到，react的web技术栈非常的丰富，搭配不同的路由、状态管理器、UI库，构建工具等不同的组合，可整理出二十几种技术栈方案。&/p&&p&下面来说说根据不同应用场景，最为推荐的几种技术栈方案。&/p&&p&1，开发后台应用&/p&&ul&&li&react+react-router+mobx+webpack+bfd-ui/ant design （三星半）&/li&&li&react+react-router+redux+webpack+bfd-ui （三星）&/li&&li&react+react-router+redux+webpack+ant design （四星）&/li&&li&react+dva+bfd-ui （四星半）&/li&&li&react+dva+ant design （五星）&/li&&/ul&&p&2，开发前台web应用&/p&&ul&&li&react+dva+bfd-ui/ant design （四星）&/li&&li&react+dva+material-ui/react-toolbox （四星半）&/li&&/ul&&h2&二，react生态之——移动端&/h2&&p&react不仅在web端占据主流的位置，同时在移动端表现尤为突出。这里不得不提到RN，也就是&a href=&/?target=https%3A///facebook/react-native& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native&i class=&icon-external&&&/i&&/a&。&/p&&p&&a href=&/?target=https%3A///facebook/react-native& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native&i class=&icon-external&&&/i&&/a&是目前最优秀的非原生开发移动框架，一处开发，多端使用。同时具有出色的性能，支持热更新等超强的优势，使得&a href=&/?target=https%3A///facebook/react-native& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native&i class=&icon-external&&&/i&&/a&顿时站在风口浪尖。&/p&&p&vue和angular在移动端同样有建树，分别是&a href=&/?target=https%3A//weex.apache.org/cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&weex&i class=&icon-external&&&/i&&/a&和&a href=&/?target=https%3A///driftyco/ionic& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ionic+cordova&i class=&icon-external&&&/i&&/a&。然其综合性价比仍不如&a href=&/?target=https%3A///facebook/react-native& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native&i class=&icon-external&&&/i&&/a&。&/p&&p&而最近facebook推出React Fiber 架构,使用Fiber对react核心算法进行重写，届时RN的性能将会再次直线式的上升，向原生步步紧逼。&/p&&p&开发RN应用所用的技术栈与web端大致相同，同样需要结合redux,react-router, dva, mobx等周边生态来使用。&/p&&p&另外也有一些适合RN的移动端UI库。比如&a href=&/?target=https%3A//ant.design/index-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ant design&i class=&icon-external&&&/i&&/a&的mobile版——&em&&a href=&/?target=https%3A//mobile.ant.design/index-cn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ant-design-mobile&i class=&icon-external&&&/i&&/a&&/em&，以及响应式的&a href=&/?target=https%3A///callemall/material-ui& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&material-ui&i class=&icon-external&&&/i&&/a&。&/p&&h2&三，react生态之——服务器端&/h2&&p&react不仅涉足web端，移动端，同样在服务器端也有非常好的涉猎。&br&react在服务器端的实践有两部分，一个是服务器端渲染，另一个就是强大的&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&。&/p&react服务器端渲染&p&react提供了两个API来实现服务器端渲染，分别是——renderToString 和 renderToStaticMarkup。&/p&&p&而对于react服务器端渲染实践最为出色的莫过于&em&&a href=&/?target=https%3A///zeit/next.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&next.js&i class=&icon-external&&&/i&&/a&&/em&。这是一个基于react可实现服务器和浏览器都能渲染的框架。&/p&&p&除了&em&&a href=&/?target=https%3A///zeit/next.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&next.js&i class=&icon-external&&&/i&&/a&&/em&，还有一个比较出色的案例 ——&em&&a href=&/?target=https%3A///redfin/react-server& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-server&i class=&icon-external&&&/i&&/a&&/em&。它同样实现 了React 框架在服务器和浏览器中进行快速渲染和无缝切换。&/p&&p&除了以上这两个服务器端渲染的框架外，还有一些比较好用的实现react服务器端渲染模块，比如如&a href=&/?target=https%3A///reactjs/express-react-views& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&express-react-views&i class=&icon-external&&&/i&&/a&，&em&&a href=&/?target=https%3A///koajs/react-view& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-view&i class=&icon-external&&&/i&&/a&&/em&等等。&/p&GraphQL——超前，另类的API&p&&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&是facebook开源的应用层查询语言。它很超前，时髦，可适用于包括nodejs，java,php等绝大都数后台语言。&/p&&p&它超前到什么程度？举个例子，我们只需要使用一个 GraphQL 的接口，即可满足一个简单博客网站的所有需求。有没有觉得很神奇？准确地说graphql是为接替RESTful而生的。&/p&&p&RESTful是当下非常流行的，主流的一套前后端API交互设计规范。几乎绝大都数互联网公司都在使用。那么为什么还需要&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&来接替RESTful呢？&/p&&p&其实，现在谈&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&替代RESTful还为时尚早，因为&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&还有很多问题需要解决，而即使真到了那一天，RESTful也仍有一定的市场空间。&/p&&p&RESTful本身存在的一些缺点和不足，比如，当需求或数据发生变化时，需要建立新的接口来适应变化，而不断添加的接口，会造成服务器代码的不断增长，即使通过增加接口版本，也并不能够完全限制服务器代码的增长。另外不断地增加接口，意味着将带来更多的开发工作，而且每个接口基本都无法复用等一系列问题。&/p&&p&&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&就是为解决这些问题而生的。&br&下面来看看一个简单的GraphQL请求:&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&{
latestPost {
comments {
&/code&&/pre&&/div&&p&而请求的结果是这样:&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&{
&latestPost&: {
&_id&: &03390abbb&,
&title&: &New Feature: Tracking Error Status with Kadira&,
&content&: &Here is a common feedback we received from our users ...&,
&author&: {
&name&: &Pahan Sarathchandra&
&comments&: [
&content&: &This is a very good blog post&,
&author&: {
&name&: &Arunoda Susiripala&
&content&: &Keep up the good work&,
&author&: {
&name&: &Kasun Indi&
&/code&&/pre&&/div&&p&很明显，GraphQL是从客户端业务维度出发的，当客户端需要某些字段的数据时，只需要发出这些字段的GraphQL请求即可。按需索取，可复用，可定制化，灵活性很强。&/p&&p&这会不会就是未来前后端交互的一种趋势呢？我们拭目以待。&/p&Relay 和 Apollo Client&p&上面已经有讲到， &a href=&/?target=https%3A///facebook/relay& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&relay&i class=&icon-external&&&/i&&/a&是facebook出品的一个前端数据框架。&/p&&p&我们使用&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&，为什么需要用到 &a href=&/?target=https%3A///facebook/relay& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&relay&i class=&icon-external&&&/i&&/a&呢？&/p&&p&首先，graphql是在后端实现的，准确地说是在后端搭起一个graphql服务器，它不会主动推送数据给客户端，也无法像RESTful那样由客户端发起一个ajax请求来请求后端的RESTful API。graphql需要在客户端有一样东西能与它进行交互，但不是ajax或者fetch，而是经过封装的如&a href=&/?target=https%3A///facebook/relay& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&relay&i class=&icon-external&&&/i&&/a&或&a href=&/?target=http%3A///react/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&apollo&i class=&icon-external&&&/i&&/a&等能够与graphql服务器进行交互的前端数据框架。&/p&&p&&a href=&/?target=https%3A///facebook/relay& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&relay&i class=&icon-external&&&/i&&/a&就是这样应运而生。但实践中会发现使用relay来配合graphql使用通常会遇到很多坑，relay操作起来并没有想象中的简单，除了比较复杂以外，它同时存在很多局限性。&/p&&p&于是，不得不提到&a href=&/?target=http%3A///react/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&apollo&i class=&icon-external&&&/i&&/a&。它是一个全功能的 GraphQL 客户端，用于 React 、Angular 等的交互，允许你轻松通过 GraphQL 获取数据并构建 UI 组件。&/p&&p&使用&a href=&/?target=http%3A///react/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&apollo&i class=&icon-external&&&/i&&/a&+&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&，它并没有relay那样的繁琐，也没有relay那样的局限性。无疑和graphql是最配的。&/p&&p&关于&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&的体验，很多用过的人表示，爱不释手。&/p&&p&下面是一些关于&em&&a href=&/?target=https%3A///facebook/graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql&i class=&icon-external&&&/i&&/a&&/em&的比较好的文章和资料:&/p&&ul&&li&&a href=&/?target=http%3A//facebook.github.io/graphql/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql官方文档&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Apollo Client官方文档&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//facebook.github.io/relay/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&relay官方文档&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///chentsulin/awesome-graphql& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&graphql学习资料收集&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A//taobaofed.org/blog//graphql-basics-server-implementation/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js 服务端实践之 GraphQL 初探&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A//taobaofed.org/blog//graphql-in-depth/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&深入理解 GraphQL&i class=&icon-external&&&/i&&/a&&/li&&/ul&&h2&四，react生态之——VR领域&/h2&&p&目前，VR(虚拟现实)是科技界的新生事物，也是一大革命，在未来，VR将很大程度地改变人类的生活方式。&/p&&p&试想一下，VR将为你呈现一个虚拟现实世界，你将可以使用VR身临其境般地玩游戏，看新闻，购物，社交娱乐，看世界名景等等，这将是一个全新的世界。&/p&&p&那么，react难道有涉足VR领域吗？&/p&&p&是的，没错。&/p&&p&react不仅走在web端、移动端以及服务器端的前沿，还很超前地在VR领域布了个局——&a href=&/?target=https%3A///facebook/react-vr& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-vr&i class=&icon-external&&&/i&&/a&。&/p&&h4&react-vr——webvr框架&/h4&&p&不得不说facebook是一家技术含量很高，着眼长远的科技巨头。&/p&&p&下面主要讲讲webVR。&/p&&p&webVR是VR技术在浏览器的实现。&/p&&p&目前VR的技术实现方案仍在起草阶段，但有些技术方案几乎是铁定的。比如作为如底层的OpenGL、&a href=&/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebGL&i class=&icon-external&&&/i&&/a&、&a href=&/?target=https%3A///mrdoob/three.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&three.js&i class=&icon-external&&&/i&&/a&。&/p&&p&而目前就有一些基于底层技术开发出来的webVR框架，比如——&em&&a href=&/?target=https%3A///facebook/react-vr& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-vr&i class=&icon-external&&&/i&&/a&&/em&和&em&&a href=&/?target=https%3A///aframevr/aframe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&aframe&i class=&icon-external&&&/i&&/a&&/em&。&/p&&p&&em&&a href=&/?target=https%3A///aframevr/aframe& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&aframe&i class=&icon-external&&&/i&&/a&&/em&是由mozilla于15年开源的，目前已更新到0.5.0版本。&/p&&p&&em&&a href=&/?target=https%3A///facebook/react-vr& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-vr&i class=&icon-external&&&/i}