---

前端快爆

• 在 Chrome 10 周年之際，正式發布 69 版本，整體 UI 重新設計，同時iOS 版本重新將工具欄放置在了底部。API 層面，支持了 CSS Scroll Snap、前端資源鎖 Web Lock API、WebWorker 里面可以跑的 OffscreenCanvas API、toggleAttribute()，以及實現性支持了異步調用、可在 WebWorker 中獲取、可觀察的 Cookie Store API。?

  點評：Google 還特意更新了彩蛋：生日版小恐龍游戲，讓小恐龍戴上了派對帽并收集蛋糕，玩法依然是在__斷網__時按住空格鍵控制恐龍跳躍。

• WebKit Nightly 中已經支持了 CSS Conic Gradients（圓錐漸變），需要 macOS High Sierra 10.14 版本以上才支持。通過該函數可以「畫」出更加豐富的背景圖片，剛剛發布的 Chrome 69 正式版中也率先支持了該屬性。?

  點評：這里有一個 SVG 實現的 polyfill。

• Chrome 意圖實現無前綴的 Fullscreen API，這可能導致國內很多使用 HTML5 視頻播放器網站（比如 blibli.com）可能會無法正常全屏。?

  點評：有使用到 screenfull.js 項目的請盡快升級到已經修復過的 3.3.3 版本。

• V8 剛剛實現了 globalThis 屬性，如此一來，編寫訪問全局對象的可移植 ECMAScript 代碼將會變得更加容易，DOM 、Worker、Node.js 三種環境下的任意作用域都能直接訪問到全局對像的全局屬性。?

  點評：為啥名字不用短小精悍的 global，Moment.js：怪我咯？對不起真的怪你?。

• Firefox 62 正式發布，帶來可變字體（Variable Fonts）的支持，現在主流瀏覽器均已支持。?

優秀 Demo

• 使用 CSS Houdini + CSS Mask 實現鏤空圓圈

• Jelly Menu

專題：Redux 與 Mobx 數據流

本期專題由 @示源 提供。在折騰多年視圖層后，前端基本實現了數據驅動編程，如何管理數據的議題在社區全面開花。其中，Redux 提供了一個全局數據管理的簡單范式，Mobx 則往前更進了一步，使得數據驅動開發更加 reactive。

Redux：

• 官網介紹
• 實踐應用：Redux官方出品的示例，從入門todos例子到異步async
• 原理分析：描述了redux核心實現方式，并且教你怎么去實現一個簡易的react-redux

Mobx:

• 官網介紹
• 實踐應用：官方提供的最佳實踐，對于常見問題做了解釋

• 原理分析

  • proxy 實現 mobx：本文是從開發角度描述實現思路,逐步實現observable
  • 如何實現一個MobX：本文是由芋頭介紹關系MobX主要api的原理及實現

阿里出品MobX相關框架

• Dob介紹
• Vanex介紹
• Dob原理介紹

Redux與Mbox對比

• 對比
• 討論

---

本期編輯：@壹絲，審閱：@承虎(humphry)，投稿：@示源、@柯拓、@思竹
題圖來源：https://dannyherran.com/2017/03/react-redux-mobx-takeaways/