正則表達式可能大部分人都用過，但是大家在使用的時候，有沒有想過正則表達式背后的原理，又或者當我告訴你正則表達式可能存在性能問題導致線上掛掉，你會不會覺得特別吃驚？

我們先來看看 7 月初，因為一個正則表達式，導致線上事故的例子。

https://blog.cloudflare.com/details-of-the-cloudflare-outage-on-july-2-2019/

簡單來說就是一個有性能問題的正則表達式，引起了災難性回溯，導致 cpu 滿載。

在上篇文章我們講了如何使用 React 的 Suspense 組件和 lazy 方法來實現模塊的懶加載，后面還講了如何使用
React 的 useState 方法來實現自定義的 Hooks，從而達到復用的目的。

我們知道，不管在做什么樣的前端項目，列表頁肯定是存在的，那如何獲取列表的數據呢？大部分情況下我們都是在每個模塊內部自己實現一個獲取數據的方法，然后調用 setState 來更新數據。那有沒有更好的方式可以做到這些，并且能夠在一個項目中處處復用這個功能呢？答案就是使用 React Hooks。

JavaScript 單元測試如今對于前端開發來說并不陌生，前端工程化之后項目的代碼質量越來越受到重視，單元測試無疑是一種衡量代碼質量的重要手段，而測試覆蓋率則是衡量測試完整性的一種手段：通過已執行代碼的覆蓋率，用于評測代碼的可靠性和穩定性，可以及時發現沒有被測試用例執行到的代碼塊，提前發現可能的邏輯錯誤。

伊斯坦布爾（以下簡稱 Istanbul）是一個基于 JavaScript 的測試覆蓋率統計工具，目前絕大多數測試框架比如 jest mocha 等都是使用 Istanbul 來統計覆蓋率的。伊斯坦布爾有一個比較老的版本 istanbul.js（已不再維護）和一個新的版本 nyc。雖然使用 Istanbul 的人很多，但是幾乎沒有介紹其實現原理的文章，那么 Istanbul 計算和統計測試覆蓋率的整個流程是怎樣的呢？

React Hooks 出來也有一段時間了，在這個過程中有一個前端的 React 項目是專門用的 React 的 FC 組件形式來寫的。在過程中提煉了一些使用實例，這里記錄下。還有，如果你之前從來沒有了解過 React Hooks，建議你先

去 React 官方網站了解 React Hooks 的基本概念和使用方式。
官方文檔鏈接：https://reactjs.org/docs/hooks-overview.html#state-hook

前言

自從小程序自定義組件和 npm 功能面世之后，組件化和開源思想逐步開始萌芽了。我們可以將一些通用的部件，如自定義導航欄之類的封裝到一個自定義組件中，然后借由 npm 平臺開源出去給其他開發者使用，這樣可以省去很多勞動。相信各位開發老爺們應該或多或少都有過使用開源包的經歷，但是在使用前，這個開源包得能贏取我們的信任，一個很重要的指標就是單元測試通過率和覆蓋率。

但是因為小程序獨特的運行環境和不完全開源的基礎款，使得對小程序自定義組件的單元測試稍微有點困難。目前市面上無論是 vue 還是 react，這些組件化框架都有一套完善的單元測試解決方案，但是對于小程序自定義組件來說卻寥寥無幾，因此這個工具集—— miniprogram-simulate 便應運而生了。

寫在前面

Omi 框架 正式發布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作為 Omi 組件化開發特效運動解決方案，讓你輕松在 Omi 項目里快速簡便支持 CSS3 Transform 設置。css3transform 是經受過海量項目洗禮的，作為移動 Web 特效解決方案，在微信、手 Q 興趣部落、日跡、QQ 群、QQ 附近等項目中廣泛使用，以激進的修改 DOM 屬性為代價，帶來極為便利的可編程性。

你可以通過 css3transform 官方首頁快速了解它。

李成熙，騰訊高級工程師，專注于性能優化、工程化和小程序服務。微博 | 知乎 | Github

概念回顧

在掘金開發者大會上，在推薦實踐那里，我有提到一種云函數的用法，我們可以將相同的一些操作，比如用戶管理、支付邏輯，按照業務的相似性，歸類到一個云函數里，這樣比較方便管理、排查問題以及邏輯的共享。甚至如果你的小程序的后臺邏輯不復雜，請求量不是特別大，完全可以在云函數里面做一個單一的微服務，根據路由來處理任務。

李成熙，騰訊高級工程師，專注于性能優化、工程化和小程序服務。微博 | 知乎 | Github

小程序誕生以來，業界關注小程序前端的技術演進較多，因此眾多小程序前端的框架、工具也應運而生，前端開發效率大大提高，而后臺的開發技術則關注不多，痛點不少，具體痛在哪里呢？

李成熙，騰訊高級工程師。專注于性能優化、工程化和小程序服務。微博 | 知乎 | Github

什么是小程序·云開發

小程序·云開發是微信團隊和騰訊云團隊共同研發的一套小程序基礎能力，簡言之就是：云能力將會成為小程序的基礎能力。整套功能是基于騰訊云全新推出的云開發 (Tencent Cloud Base)所研發出來的一套完備的小程序后臺開發方案。

小程序·云開發為開發者提供完整的云端流程，簡化后端開發和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代。

該解決方案目前提供三大基礎能力支持：

• 存儲：在小程序前端直接上傳/下載云端文件，在小程序云控制臺可視化管理

• 數據庫：一個既可在小程序前端操作，也能在云函數中讀寫的文檔型數據庫

• 云函數：在云端運行的代碼，微信私有協議天然鑒權，開發者只需編寫業務邏輯代碼

未來，我們還會集成更多的服務能力，為小程序提供更強有力的云端支持。

原文地址

“抓娃娃” 并不陌生，存在兩種結果: 抓到與抓不到。在 Web 動畫中，如上圖，“抓到” 與 “抓不到” 對應著兩個動畫，可以使用不同的動畫圖片資源來實現，似乎毫無異義。

細做觀察，不難發現：兩個動畫中 “動畫初始到抓取” 及 “抓取結束到動畫結束” 的區間中存在相同動畫 (滑動和晃動抓桿)。既然動畫相同，那么可以通過引用同一份動畫圖片資源，不做相同圖片的重復加載，從而減少總資源大小。

“兩個動畫間存在部分相同的動畫，相同部分可以引用同一份動畫圖片資源，來減少圖片的總大小?！?

肉眼進行辨別哪些動畫是一樣的？那是不可能的。gka 提供一鍵式制作多個動畫的方式，支持多種圖片優化方案 (含圖片去重)。

gka 是一款簡單的、高效的幀動畫生成工具，圖片處理工具。

官方文檔：https://gka.js.org

Github：https://github.com/gkajs/gka