平安金融壹账通H5技术周报(第十三期)

本期导读：本期周报主要通过例子来展示我们这段时间的积累，并带来新童鞋在ES6箭头函数的笔记，文末精选文章带上@寸志大神关于 CSS Grid的新单位fr介绍以及阮大神的web components自定义元素介绍，欢迎各位查阅。

动效赏析

---

@胡诗沂 canvas粒子化动效

网址：http://www.pinganh5.com/showcase/589c8a2df5b629dc9d4b6fdc
原理：利用canvas将图片数据转换成2d矩阵，通过抽值生成粒子x,y坐标并存储rgb色值，最后利用缓动动画让每个粒子飞起来。

这图片会爆炸

@严晓娥 SVG文字特效

网址：http://www.pinganh5.com/showcase/57d0c1cb69feb24a07255a98
原理：利用svg的text标签让文字颜色透明，结合css渐变动画作为背景，立马让文字穿上华丽的外衣。

文字的华丽外衣

@陈昱宏 webGL音乐柱子

网址：https://yorkchan94.github.io/web3d-examples/dist/animate/
原理：通过AudioContext定时读取音频，将音频量化为柱子高度，利用时间差产生的高度差生成柱子动画。

柱子也跳广场舞

更多动效欢迎浏览 银行一账通UEDC：http://www.pinganh5.com/

原创笔记

---

@张威 ES6箭头函数6个TIPS

1. 当函数没有入参的时候箭头函数可以写成如下形式,这时可以省去{}和return；

const f = () => 10;
//等价于
const f = function() { return 10; }

2. 当只有一个入参时,并且返回值只有一个表达式的时, 箭头函数的写法可以同时省去(), {} 和 return；

const f = a => a*a, 这个箭头函数也等价于 
const f = function(a) { return a*a; }

3. 当返回值为对象时,我们必须给它加上(), 因为对象的{}会与函数体的{…}发生冲突；

const f = option =>({
    name: 'H5',
    age: 18,
    ...option
})

4. 箭头函数中的this指代与传统函数中的区别：传统函数this指向运行时所在的context，箭头函数中的this指向函数定义时所在的context；

const companyName = "平安科技";
const obj = {
   companyName = "平安金融科技",
   getName: function() {
     console.log(this.companyName);//这里的this 指向obj
   }
}  

5. 箭头函数不存在constructor和arguments属性，因此无法当做构造函数来new一个实例；

6. 使用箭头函数可以方便进行函数式编程，比如柯里化：

const f = price => count => price * count;
const price5 = f(5); // 将商品价格设为5元
const amounts = price5(100); // 销售100件商品的收入 500元
// 等同于 f(5)(100);

精选文章

@寸志 CSS 新的长度单位 fr 你知道么？

原文地址： https://zhuanlan.zhihu.com/p/27502596
本文介绍了 CSS Grid 规范中引入的一个新的长度单位 fr，译自： An Introduction to the fr CSS unit。

@阮一峰 HTML 自定义元素教程

原文地址： http://www.ruanyifeng.com/blog/2017/06/custom-elements.html
web components是未来趋势，本文主要介绍HTML 组件的基础知识：自定义元素。

---

世界上最远的距离，是我在if里你在else里