平安金融壹账通H5技术周报(第十三期)
2017-07-03 本文已影响159人
YoneChen
本期导读：本期周报主要通过例子来展示我们这段时间的积累，并带来新童鞋在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
- 当函数没有入参的时候箭头函数可以写成如下形式,这时可以省去{}和return；
const f = () => 10;
//等价于
const f = function() { return 10; }
- 当只有一个入参时,并且返回值只有一个表达式的时, 箭头函数的写法可以同时省去(), {} 和 return；
const f = a => a*a, 这个箭头函数也等价于
const f = function(a) { return a*a; }
- 当返回值为对象时,我们必须给它加上
(), 因为对象的{}会与函数体的{…}发生冲突；
const f = option =>({
name: 'H5',
age: 18,
...option
})
- 箭头函数中的this指代与传统函数中的区别：传统函数this指向运行时所在的context，箭头函数中的this指向函数定义时所在的context；
const companyName = "平安科技";
const obj = {
companyName = "平安金融科技",
getName: function() {
console.log(this.companyName);//这里的this 指向obj
}
}
-
箭头函数不存在constructor和arguments属性，因此无法当做构造函数来new一个实例；
-
使用箭头函数可以方便进行函数式编程，比如柯里化：
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里
