前端周刊第58期：送你 3 道面試題

01-28

破解前端面試系列文章本周出到第 3 篇：如何搞定紙上編程環節，早些時候發布了閉包篇、DOM 篇，感興趣的同學可以看看，對面試官和求職者都應該有些參考價值，每篇文章下面的討論也是值得閱讀的，部分讀者提出了非常不錯的建議和想法。下面是本周精選內容，請享用。

技術動態

Prettier 發布 1.4.0 版本

非常好用的代碼格式化工具 Prettier 本周發布了 1.4.0 版本，新版增加了對 CSS、Less、SASS、TypeScript 的支持，也修復了格式化 JSX 時的一些問題，預計接下來各代碼編輯器插件也會緊跟升級，VSCode 裡面的插件已經升級完了，你還在等啥？

CSSConf EU 2017 視頻列表http://keepvid.com/?url=https://www.youtube.com/watch?v=-9lhH72KlKY&list=PL37ZVnwpeshF0XmpjKBJ3-0kvr3b5ZpJR

原計劃收錄在 56 期的技術大會視頻裡面的內容，但是考慮到信息量太大，延遲到了這周。這是 CSSConf EU 2017 的視頻列表，相比而言 CSS 的社區更小也更年輕，但是還是有不錯的內容，跟 CSS-IN-JS 有關的題為《A Unified Styling Language》演講推薦觀看，Medium 上也為相同名字的文章。

文章教程

JS 模塊現狀和建議

最近關於 Node.js 中如何實現 ES 模塊的討論多了起來，這篇文章對 ES 模塊當下的發展做了梳理，包括各種工具（比如 Webpack、Rollup）的支持情況，瀏覽器的支持情況。並在最後就是否應該開始 ES 模塊給出了比較中肯的建議。

閱讀 flexbox 規範學會的 11 個要點

作者閱讀了 flexbox 的規範之後，對 flexbox 又有了更深的理解和認識。作者感慨，通過閱讀規範，它最大的收穫是知道自己原來對 flexbox 的理解是不完整的，即使他看了很多博客文章，寫了不少代碼。技術深度就是這樣練出來的，比如你是否有看過 es5、es6 的規範呢？

你應該知道的 5 個 Node.js 8 新特性

小有爭議的一篇文章，介紹了 Node.js 8 裡面你可以上手即用的 5 個新特性，關於 Node.js 8 的內容已經非常多了，大家可以自己去找，官方的發版建議閱讀。

O(logn) 時間複雜度到底該怎麼理解？

演算法時間複雜度裡面的 O(1)、O(n) 等都是非常直觀且容易理解的，可能你能意會 O(logn) 的複雜度，怎麼跟人解釋清楚？這篇文章的作者用圖解法做了嘗試，試試看？

LeetCode 題解：免費電子書

電子書的作者為了撬開演算法的大門，刷完了 LeetCode 的題目，將自己做題的思路記錄下來，教是最好的學，如果你最近正巧在刷題，會是不錯的參考資料。

開發工具

stylefmt：自動化的 css 格式化工具

stylefmt 是專門為 css 定製的格式化工具，支持 less、sass，也有插件支持各種新的 css-in-js 寫法，比如 styled-components，周四我正好在項目中有實踐，接下來會單獨寫篇文章解釋如何把樣式格式化工具集成到開發交付工作流中。

chrome dev tools 性能工具大觀

Google 官方出品的 dev tools 性能工具詳細介紹，文章比較長，介紹了幾乎所有 dev tools 內涵的性能工具，包含如何打開、錄製，如何解讀結果，發現問題，如果你真的想學會性能診斷，把這個加到學習列表吧。

代碼框架

react-native-animatable：超贊動畫庫

高仿 animate.css，但是專門為 react native 定製，各種動畫都定義成了組件，動畫聲明方式也都是聲明式的，參數可以直接通過節點 props 來控制。

mocka：通用的內容佔位符組件

內容佔位符已經被越來越多的應用開始使用，不管是 APP 還是 WEB，掘金的 WEB 版就有，其作用就是提高用戶對 APP 響應速度的感知，mocka 封裝了常見的內容佔位符代碼，你可以直接在自己的項目中使用。不要看錯了，這個是 mocka，和測試框架 mocha 僅一字之差。

視頻教程

用 tmux 管理你的命令行會話

在程序員的世界裡命令行終端就像是 chrome，會根據需要開很多個窗口或者標籤頁，但是機器重啟之後如何快速恢復之前的工作目錄，打開的文件，運行的程序？早些時候你可能需要用 screen，後來出現了更好的窗口管理工具 tmux，這個視頻教程能讓你在 30 分鐘快速入門 tmux。

如何禁用 react-native 中的黃色告警？

開發 react-native 的同學可能有注意到偶爾會遇到黃色的報警，每次刷新都會出來，有些你不打算處理的其實是可以用一行代碼直接忽略掉、或者全部禁用（個人不推薦後面這種做法），http://egghead.io 的視頻手把手的教你配置。

精彩問答

react-native 中如何管理靜態資源？

webpack 裡面一切皆模塊的思路同樣可以用到 react-native 裡面的靜態資源管理，不過方法略有差異，比起在 react jsx 代碼中零星分布的動態 require 更優雅。

如何用 CSS 對圖片裁剪和縮放？

使用 CSS 對圖片進行裁剪和縮放是實際業務中比較常見的需求，解決方法也不少，來自 Stack Overflow 的問答。

One More Thing

本文作者王仕軍，商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領域跟上時代的腳步》。

Happy Hacking