前端技術週刊 2018-06-29：可視化算法

2018-06-29

前端快爆

• ECMAScript 2018 規範正式發佈，細節已經定稿， 2018 版更新包括異步迭代方法 for..await..of、rest 和 spread 操做符 ...、正則表達式一系列更新（命名分組、 unicode 屬性轉義、點匹配全部字符的模式、逆向斷言）和 Promise.prototype.finally()。新版規範的細節，能夠查閱 Dr. Axel 的這篇文獻。

  __點評：__新功能有點少？不急，後面還有 50 多個提案等着排隊呢。

• Node.js v10.5.0 發佈，新版支持了一個實驗特性：--experimental-worker 以支持多線程。🔗

  點評：實驗性功能，可能隨時會有改動。

• 緊隨 Firefox 其後，Chrome 69 也實現了 Element.toggleAttribute()方法，用來切換 HTML 中的布爾屬性。🔗

  __點評：__喜大普奔，Edge 瀏覽器開發者也表示願意實現該方法，詳細介紹能夠看看本專欄的 文章。

• Airbnb 歷時 2 年寫了 12 萬行的 React Native 技術棧的代碼，最終仍然要放棄 React Native 了，兩年裏，RN 爲 Airbnb 帶來了跨平臺、高迭代速率和較快的性能，也帶來了工業強度不夠的 JavaScript、較大的應用體積和難以解決的崩潰問題。🔗
• Firefox 63 支持了 CSS Media Queries Level 4 中的 >,<,>=,<= 符號，也就是說 (min-width: 375px) 能夠更直觀的書寫爲 (width >= 375px)。🔗

> __點評：__媽媽不再用擔憂我分不清 min- 和 max-  的意思了。

• 最近在北京 GMTC 大前端大會上，Google Flutter 高級工程師於瀟宣佈 Flutter Release Preview 1發佈，並宣佈與阿里巴巴閒魚團隊在 Flutter 上合做，這標誌着 Flutter 進入了一個新階段。🔗

• Firefox 63 在 CSS Flexbox 中支持了 row-gap 和 column-gap屬性，至此咱們能夠更加方便的控制 Flex 元素的間距。該屬性的別名 grid-row-gap 和 grid-column-gap 在 Flexbox 中一樣適用。🔗

  __點評：__該功能在使用 Flexbox 做列表佈局的時候很是實用。

優秀 Demo

• 卡片切換輪播

• 按鈕動畫

專題：可視化算法

本期專題由深耕前端數據可視化領域的釋劍帶來的可視化算法專題。可視化是一個相對而言入門門檻很高的領域，這裏面有至關多的算法值得咱們瞭解，說不定下次業務就能用上呢。

圖形算法

• 2D 地理學算法集合 ：投射、交叉、三點畫圓、多邊形內外的相關算法 DEMO
• 面積填充相關算法：多邊形交叉算法 & 自相交多邊形的內外判斷 & canvas中的非0環繞
• 隨機生成指定面積單連通區域
• 分形繪圖
• 貝塞爾曲線入門教程

排版算法

• 相似Graphviz的工具如何實現自動排版：簡單介紹了流程圖繪製中常見的分層繪圖模型、力場繪圖模型和形狀爲先的繪圖模型
• JS 自動佈局有向無環圖：介紹了分層繪圖模型 dagre 算法 & Dagre 算法細節
• 樹狀數據排版算法：D3 實現的樹狀數據算法集合

其餘算法

• 插值算法簡介：主要用來作折線圖的平滑算法
• JavaScript 算法與數據結構：很是詳盡而系統的的介紹了各種算法與數據結構，全部算法皆有 JavaScript DEMO。

---

本期編輯：@壹絲，審閱：@承虎，專題供稿：@釋劍。
題圖來源：https://www.videoblocks.com/video/flight-through-futuristic-tunnel---loopable-ap7dlse