共 1867 字，讀完需 4 分鐘，速讀需 1 分鐘。本周收錄的內(nèi)容包含主流前端框架 React、Vue.js、Angular 的版本更新和周邊擴(kuò)展；CSS 方面，Grid 布局是值得關(guān)注的；開發(fā)效率方面，有 2 篇關(guān)于 Git、Webpack 的技巧。內(nèi)容如下，請(qǐng)享用。
Angular 近期發(fā)布了 4.0 正式版，筆者只能感嘆前端社區(qū)的版本號(hào)真是越來越逆天了，4.0 版本與 2.x 版本幾乎是完全兼容的，內(nèi)含的改進(jìn)包括：更小的文件體積、視圖引擎的大幅度改進(jìn)，能節(jié)省模板編譯產(chǎn)生的代碼 60% 左右，此外還提供了支持服務(wù)端渲染的項(xiàng)目參考、最新版本的 TypeScript 支持等。看起來 Google 在 Angular 上投入了很大的精力，你跟么？
微信小程序在 3 月 27 日晚 10 點(diǎn)突然爆出大新聞。微信為小程序開放了 6 大新能力，在知曉程序的這篇文章中，你將看到小程序 6 大新能力的最靠譜解讀。
去年這個(gè)時(shí)候，JS 社區(qū)發(fā)生了讓很多開源包和開發(fā)者奔潰的 "left pad" 事件，隨后就有人唱衰 JS 社區(qū)，但是整個(gè)社區(qū)又做了很多事情來避免類似問題，這里是一些比較有趣的推特內(nèi)容，無聊的時(shí)候可以看看。
做前端的同學(xué)不光要著眼于 JS 的變化，CSS 領(lǐng)域也在不斷演化，從早期的 table 布局，到后來的 div + css 布局，再到 flexbox 布局，現(xiàn)在出現(xiàn)了更好用的 grid 布局，對(duì)于新出的這兩種，flexbox 和 grid 有何異同？對(duì)比起來可能學(xué)習(xí)更快。
webpack 官方開發(fā)組在 twitter 上發(fā)起了一個(gè)活動(dòng)，讓大家使用 webpack-bundle-analyzer 把打包后的 webpack 依賴可視化截圖發(fā)出來，然后給診斷 webpack 配置不合理的地方，這篇文章把大家典型的錯(cuò)誤姿勢(shì)做了糾正，你需要自己研究下，很大概率，你用的姿勢(shì)也不對(duì)。
這篇文章梳理了聲明 Vue.js 組件模板的 7 種方式，并舉了比較具體的例子來說明，當(dāng)然這其中方式在代碼可讀性、可維護(hù)性、模塊化等方面都有不小的差別，你所要做的就是漲點(diǎn)只是，選取自己最舒適的。
這里列出了超過 50 個(gè) Git 相關(guān)的技巧，給出了每個(gè)技巧需要的命令和能解決的問題，想真正掌握 Git 操作？除了看 Git 內(nèi)核之外，還需要對(duì)常用的命令勤加練習(xí)，這里就是練習(xí)秘籍。
這篇文章先是花了不少篇幅跟你解釋為什么要選擇 .vue 文件的方式來做 Vue.js 開發(fā)，接下來是為什么選擇 TypeScript，然后手把手教你如何配置他們的開發(fā)環(huán)境，如果你做類似事情的時(shí)候遇到問題，這會(huì)是不錯(cuò)的參考。
Typeahead 這種交互方式已經(jīng)很常見了，鼻祖就是 Google 的搜索建議，這是 1 個(gè)為 Vue.js 開發(fā)的輸入框自動(dòng)完成組件，做用戶界面和管理后臺(tái)的都應(yīng)該能用得上。官網(wǎng)的 Demo 使用了 Twitter 的 API，使用可能不那么流暢，即使翻墻了也是如此。
Next.js 在前端周刊第42期中已經(jīng)收錄，其出現(xiàn)的主要?jiǎng)訖C(jī)是提供一個(gè)前后端同構(gòu)應(yīng)用的腳手架，Github star 數(shù)量超過 1W，近期正式發(fā)布了 2.0 版本，其主作者在 React Conf 2017 上也 Next.js 做了演講和布道，想在 React 前后端同構(gòu)應(yīng)用上少走彎路？強(qiáng)烈建議試試這個(gè)。
該項(xiàng)目受 React 領(lǐng)域中的 Next.js 啟發(fā)而產(chǎn)生，主要目的是便利大家開發(fā) Vue.js 服務(wù)端渲染的應(yīng)用，誕生的還比較晚，目前還沒有發(fā)布 1.0 正式版，保守的同學(xué)可以再等等。側(cè)面反映了 Vue.js 在開發(fā)者群體中受歡迎的程度。
Choices.js 提供了類似于 Select2 和 Selectize 的輸入框和選擇列表擴(kuò)展功能，但是不依賴 jQuery，源代碼很小，支持多種自定義配置，首頁有常見業(yè)務(wù)場景中需要的標(biāo)簽輸入框、多選列表、單選列表、級(jí)聯(lián)選擇的 Demo。
要給優(yōu)秀的程序員下一個(gè)明確的定義無疑是一件非常困難的事情。擅長抽象思維、動(dòng)手能力強(qiáng)、追求效率、喜歡自動(dòng)化、愿意持續(xù)學(xué)習(xí)、對(duì)代碼質(zhì)量有很高的追求等等，這些維度都有其合理性，不過又都略顯抽象和主觀。這篇文章的作者有他獨(dú)到的觀點(diǎn)，我也非常贊同，文中列出了工程師可以通過命令行完成的很多事情。
const 是 ES6 中變量聲明的新方式，表面意思是聲明的變量不可被改變，從底層來看，到底是什么不可被改變？從其他語言轉(zhuǎn) JS 的同學(xué)可能會(huì)有些疑惑。用 const 聲明的數(shù)組或者對(duì)象，或者類型實(shí)例能否被改變？能被怎樣改變？你都清楚么？
可以說淘寶的鏡像給國內(nèi)的開發(fā)者節(jié)省了很多時(shí)間，大到操作系統(tǒng)，小到各種工具。這篇短小的文章介紹了如何在項(xiàng)目中使用淘寶鏡像為 Electron 和 Node-Sass 的安裝加速，希望能縮短你的搭環(huán)境時(shí)間。
聯(lián)系客服
