哈哈,互聯網圈本周的大事件是微信公眾號關閉 iOS 平臺打賞入口,討論這件事情的文章很多,前端周刊就沒有收錄相關文章。另外 JS Conf China 2017 已經開始報名,定于 7月 15 日在上海舉行,早鳥票已售罄,想去的抓緊時間報名。
回到技術本身,我讀到 3 篇非常不錯的如何寫出更簡潔代碼的文章:<a >縮進就是復雜性</a>、<a >去掉循環</a>、<a >寫的更少</a>,不論是初入門的新人還是中高級工程師都建議閱讀。好了,下面是本周精選的內容,React Native 比重較大,請享用。
文章教程
箭頭函數你需要知道的都在這兒了
箭頭函數是 ES6 中的新特性,讓函數代碼更簡潔,箭頭函數本身沒有綁定執行上下文,參數等等。很多時候,我們犯了錯誤才會明白“動手之前要先去看文檔”,MDN 上關于箭頭函數文檔非常詳細,關于哪里能用,哪里不能用,都解釋的很詳細,如果你就生在 ES6 的環境,這個必須得仔細看。
寫給略懂 jQuery 同學的 Vue.js 入門教程
jQuery 在前端領域的地位就像是 Web Server 領域的 Apache,據統計現在全球有 70% 的網站都引用了 jQuery,技術在進步,如果你只是略懂 jQuery 想學 Vue.js 咋辦?學習新東西的最大障礙就是思維方式的轉變,閱讀這篇文章看看學會 Vue.js 接受哪些新的思考方式。
通過案例學會 React Native Navigator? 原理及用法
React Native 入門的時候,腦子里面肯定很多疑問,React Native 里面是否有類似于 React Router 的東西?如果有怎么用?React Native 內置的 Navigator 就是用來干這個的,方便你開發多頁面的 APP,這篇文章從最簡單的例子開始教你如何使用 Navigator、傳遞參數、配置轉場動畫。
管理 React Native 應用樣式的幾點建議
入手 React Native 開發的同學有沒有糾結過應用的樣式代碼到底該放到哪里?是單獨抽出來,還是全部內聯?共享的樣式怎么辦?實際上沒有標準的做法,這篇文章會給你一些建議,讓你的代碼更好管理。
如何使用 HTTP Headers 來保護你的 Web 應用?
無論是簡單的小網頁還是復雜的單頁應用,Web 應用都是網絡攻擊的目標。開發者可以利用 HTTP 響應頭來加強 Web 應用程序的安全性,通常只需要添加幾行代碼即可。本文將介紹 web 開發者如何利用 HTTP Headers 來構建安全的應用。雖然本文的示例代碼是 Node.js,但基本所有主流的服務端語言都支持設置 HTTP 響應頭,并且都可以簡單地對其進行配置。
大數據浪潮下的前端工程師
把前端工程師放在產業發展、技術進步的大背景下來審視,前端工程師不應該僅僅關注實現界面和交互,非常建議閱讀,不多做解釋。
前端精讀評論:前后端渲染之爭
十年前,幾乎所有網站都使用 ASP、Java、PHP 這類做后端渲染,但后來隨著 Angular、React、Vue 等 JS 框架的崛起,開始轉向了前端渲染。從 2014 年起又開始流行了同構渲染,號稱是未來,集成了前后端渲染的優點,但轉眼間三年過去了,很多當時壯心滿滿的框架(Rendlr、Lazo)從先驅變成了先烈。同構到底是不是未來?自己的項目該如何選型?建議閱讀
開發工具
httpie: 比 curl 和 wget 更好用的網絡工具
httpie 是一款比 curl 和 wget 更好用的網絡請求命令行工具,Egghead.io 上還有一門介紹 http 基礎知識的免費課程全程就是用的這個工具,你看了這個課程 httpie 的用法和 http 基礎都學會了,注意這個工具的讀法是 “愛吃提提派”,而不是“愛吃踢踢屁愛意”。
awaiting:async/await 輔助工具庫
awaiting 是基于 async/await 特性的工具庫,提供了常見的延時、等待,以及 Promise 相關的工具函數,想學好 async/await?看看先行者拿他做了啥會學的更快。
代碼框架
React Navigation:可擴展且易用的路由解決方案
看了上面的 Navigator 文章,覺得他很難用,現在來看看 React Navigation,可擴展但非常易用的路由解決方案,由 Facebook、Expo、React 社區的共同努力演化而來,甚至可以用在 React 項目中。
Split.js:輕量的視圖分隔 JS 插件
Split.js 是一款輕量級的視圖(面板)分隔插件,無任何外部依賴,對 HTML 的書寫也沒有特別的規定,只需要分隔的面板有相同的父節點。支持橫向、縱向分割,相鄰的面板中間自動給加上了可拖拽的分割線。
找找靈感
Froggy:玩兒游戲學會 Flexbox
這樣說吧,Flexbox 對布局帶來的便利只有學會的人能真正體會到,這個 24 關的小游戲,通過靈活運用 Flexbox 把青蛙放到正確的位置,助你掌握 Flexbox 里面的各種屬性用途、用法。
漫畫賞析:Linux 內核到底長啥樣
這篇文章為大家解讀來自 TurnOff.us 的漫畫 “InSide The Linux Kernel” ,非常形象有趣。TurnOff.us 是一個極客漫畫網站,作者 Daniel Stori 畫了一些非常有趣的關于編程語言、Web、云計算、Linux 相關的漫畫。
視頻教程
Egghead.io:Redux 入門教程
任何應用的狀態管理都是至關重要的,Redux 被部分同學誤解為是給 React 應用使用的狀態管理工具,實際上他可以應用到更廣義的 JS 應用中,本視頻教程由 Redux 的作者(那個讓 HMR(模塊熱更新)成為前端開發標配的男人)親自錄制,免費開放到了 Egghead.io 上,想學的趕緊去。
JS 驅動網站的 SEO 最佳實踐
來自 Google 的工程師 John Mueller,跟大家分享現代網站(主要指大量使用 JS 網站) SEO 最佳實踐,澄清了社區中關于 JS 網站 SEO 的一些認識誤區,并給了不少有用的建議,需翻墻。
One More Thing
本文作者王仕軍,商業轉載請聯系作者獲得授權,非商業轉載請注明出處。如果你覺得本文對你有幫助,請點贊!如果對文中的內容有任何疑問,歡迎留言討論。想知道我接下來會寫些什么?歡迎訂閱我的知乎專欄:《前端周刊:讓你在前端領域跟上時代的腳步》。