BetterFE 前端技术周刊 - 2019/03/04

## 深阅读

利用D3和quadtrees实现可视化交互中的鼠标拖拽选择

推荐理由：在数据可视化交互中，利用鼠标点击划选拖拽，是我们最常用的交互之一了，我们称之为 brushing。这篇文章介绍了如何在散点图中利用d3和d3-quadtree来实现这样的交互，除了应用，还介绍了一些D3的优化知识，非常值得一读。

「从源码中学习」Vue源码中的JS骚操作

推荐理由：vue我们很熟悉，但是对源码的了解可能还不够，这里总结了很多vue源码中js的使用技巧和方式，让我们也能运用于实际开发，也能同时对vue源码加深理解。

Reducer organization — taking a step further

推荐理由：传统的reducer的switch方式在上下文和不立即return和添加default上会有一些不可控的缺陷，这使得swtich方式并不是非常高效。而通过键值对的方式对象中选择reducer，通过类和装饰器创建reducer使其更有重用性、漂亮和整洁。

## 新鲜货

现代浏览器的轻量级音频库

推荐理由：默认使用Web Audio API ，有很多新特性，涉及到音频的业务需求可以引入，功能强大，并且性能不错，能够帮助你快速简单全面的控制音频 。

前端JS实现字符串/图片/excel文件下载

推荐理由：在web开发中，如果你想让用户下载或者导出一个文件，应该怎么做呢？本文将会为你提供几种下载方式以供参考，希望对你有所帮助

使用document.scrollingElement控制窗体滚动高度

推荐理由：要实现一个返回顶部效果，我们目前的做法是下面两个语句并行：document.documentElement.scrollTop = 0; document.body.scrollTop = 0; 就显得很啰嗦，正是由于这种现状，document.scrollingElement这个属性才应运而生，直接动态识别滚动容器。

## 视野 && 工具

独家！支付宝首次披露其小程序技术架构

推荐理由：支付宝小程序的技术架构简介，主要从系统架构、性能体验、开发者工具、多端等方面进行介绍。在小程序大行其道的今天，了解它的架构方案和开发特点对开发者来说是必不可少的一门功课。

Chrome 调试技巧

推荐理由：chrome应该是web端的开发和调试最熟悉的工具了。这篇文章对常用的chrome浏览器调试命令和部分面板做了介绍，不算最全面，但是非常精细实用。