本期導讀：本期周報主要通過例子來展示我們這段時間的積累，并帶來新童鞋在ES6箭頭函數(shù)的筆記，文末精選文章帶上@寸志大神關于 CSS Grid的新單位fr介紹以及阮大神的web components自定義元素介紹，歡迎各位查閱。

動效賞析

@胡詩沂 canvas粒子化動效

網址：http://www.pinganh5.com/showcase/589c8a2df5b629dc9d4b6fdc
原理：利用canvas將圖片數(shù)據轉換成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/

原創(chuàng)筆記

@張威 ES6箭頭函數(shù)6個TIPS

1. 當函數(shù)沒有入參的時候箭頭函數(shù)可以寫成如下形式,這時可以省去{}和return；

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

2. 當只有一個入參時,并且返回值只有一個表達式的時, 箭頭函數(shù)的寫法可以同時省去(), {} 和 return；

const f = a => a*a, 這個箭頭函數(shù)也等價于 
const f = function(a) { return a*a; }

3. 當返回值為對象時,我們必須給它加上(), 因為對象的{}會與函數(shù)體的{…}發(fā)生沖突；

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

4. 箭頭函數(shù)中的this指代與傳統(tǒng)函數(shù)中的區(qū)別：傳統(tǒng)函數(shù)this指向運行時所在的context，箭頭函數(shù)中的this指向函數(shù)定義時所在的context；

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

5. 箭頭函數(shù)不存在constructor和arguments屬性，因此無法當做構造函數(shù)來new一個實例；

6. 使用箭頭函數(shù)可以方便進行函數(shù)式編程，比如柯里化：

const f = price => count => price * count;
const price5 = f(5); // 將商品價格設為5元
const amounts = price5(100); // 銷售100件商品的收入 500元
// 等同于 f(5)(100);

精選文章

@寸志 CSS 新的長度單位 fr 你知道么？

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

世界上最遠的距離，是我在if里你在else里