金融壹账通前端H5技术周报(第七期)

本期导读: 原创专题带来掌雄在微信小程序中的canvas绘图实践，和昱宏对three.js事件绑定的封装，以及我对redux的一小段源码解析。语言基础中的函数式编程部分似乎并没有那么基础，fetch能不能取代XMLHttpRequest也是一个值得思考的问题。工具框架篇带来virtual-dom的“拆盒”实践、饿了么在PWA上“尝鲜”实践和google的新型jpeg压缩算法。文末为近期开发的公司实习生招聘页，欢迎大家赏鉴分享

原创专题

1）微信小程序canvas手绘雷达图@吴掌雄

微信小程序已经发布了两个多月了，没有想象中那么火。但是一些拥有多用户量的APP应用也会抽出主业务流程做微信小程序版本。做过小程序开发的小伙伴们都知道微信小程序缺少类似echart.js的图形库，然而业内echart.js等主流的h5图形库并不能在小程序上运行，所以遇到绘制图形需求的时候我们只能用canvas绘画。本文为大家分享的是以自定义组件的形式绘制雷达图。

2）由redux 异步数据流引发的血案@曾文富

redux是一个管理web应用数据状态（state）的javascript库，其使用单项数据流的模式试图让应用状态变得可控

3）three.js事件绑定插件--onEvent@陈昱宏

Three.js是构建web3d场景非常流行的框架，利用three.js我们可以更优雅地创建出三维场景和三维动画。最近在使用three.js开发Web3d的时候，想要给我的3d物体添加onclick事件，查遍了three的官方文档发现，three.js的mesh（3d网格）没有类似HTML里dom的addEventListener的绑定事件...

语言基础

1）我眼中的 JavaScript 函数式编程@化辰

JavaScript 函数式编程是一个存在了很久的话题，但似乎从 2016 年开始，它变得越来越火热。这可能是因为 ES6 语法对于函数式编程更为友好，也可能是因为诸如 RxJS (ReactiveX) 等函数式框架的流行

2）fetch 没有你想象的那么美@undefined

前端工程中发送 HTTP 请求从来都不是一件容易的事，前有骇人的 ActiveXObject，后有 API 设计十分别扭的 XMLHttpRequest，甚至这些原生 API 的用法至今仍是很多大公司前端校招的考点之一。

3）CSS 自定义属性 — 基础篇@kmokidd

这是 CSS 自定义属性系列文章的第一篇，在这篇文章中我将快速介绍什么是自定义属性以及它们的语法，并在后续文章中详尽地分析 CSS 自定义属性，各位可以持续关注。

工具框架

1）对 virtual-dom 的一些理解@喻争

Vue 2.x 、React 都引入了 Virtual Dom 的概念，来更加高效地更新 dom 节点，提升渲染性能。为了能更深入地了解 Virtual Dom 的相关细节，决定将 Matt-Esch/virtual-dom 作为学习对象。这个项目很纯粹，也很清晰地展示了如何利用虚拟节点来更新视图的整个过程

2）PWA 在饿了么的实践经验@王亦斯

PWA （ Progressive Web Apps，渐进式网页应用）是由谷歌提出的新一代 Web 应用概念，旨在提供可靠、快速、类似 Native 应用的服务方案。

3）Google开源新算法，可将JPEG文件缩小35%@boxi

一图胜千言。Web与过去冷冰冰的互联网最大的区别就在于多了丰富的图片。而web上面最流行的静态图片格式非JPEG莫属。JPEG文件的多寡往往会影响页面的加载速度。为此，Google开发了一种新的JPEG算法，可将文件大小减少35%，这无疑会提高网站的加载性能；此外新算法还可以在保持大小不变的情况下显著改善图片质量。更重要的是，Google的这种JPEG格式跟WebP、WebM等图像压缩办法不同，它可以完全与现有的浏览器、设备、图片编辑应用以及JPEG标准兼容。而且，Google还把它给开源出来了。

4）移动端H5图片压缩上传@CommanderXL

利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。
使用canvas,在页面上新建一个画布,利用canvas提供的API,将图片画入这个画布当中。
利用canvas.toDataURL()，进行图片的压缩，得到图片的data uri的值
上传文件。

前端视界

1）实习生招聘