本期導讀:本期我為大家?guī)碓瓌?chuàng)文章:AI生成H5頁面pix2code論文啟發(fā)與思考,跟上時代科技的潮流,與張艷的JS寄生組合式繼承。語言基礎(chǔ)專題為大家?guī)韈ss逐幀動畫抖動解決方案、WebSocket應(yīng)用安全問題分析、移動H5首屏秒開優(yōu)化方案探討。工具框架推薦大家閱讀scoped npm package、Nodejs原生支持的ES6特性。文末是WebVR 版《我的世界》,歡迎賞鑒。

原創(chuàng)專題
1) AI生成H5頁面pix2code論文啟發(fā)與思考 @吳掌雄
最近看了一下pix2codeAI生成前端頁面的官方論文與github上面的pix2codeReimplement源碼,雖然官方只提供了論文還沒有公開源碼與用戶調(diào)用的入口,但也受到了一些啟發(fā),思考了下一利用機器學習生成h5靜態(tài)頁面的可行性。
2) JS寄生組合式繼承 @張艷
JS的繼承方式有很多種,最理想的繼承方式是寄生組合式繼承。
組合繼承(構(gòu)造函數(shù)和原型的組合)會調(diào)用兩次父類構(gòu)造函數(shù)的代碼..
語言基礎(chǔ)
1) CSS 技巧:逐幀動畫抖動解決方案 @leeenx
文章背景是移動端適配方案帶來的雪碧圖抖動問題。
2) WebSocket應(yīng)用安全問題分析 @ethan
WebSocket 并不會解決 Web 應(yīng)用中存在的安全問題,開發(fā)者需要了解 WebSocket 應(yīng)用潛在的安全風險,以及如何做到安全開發(fā)規(guī)避這些安全問題。
3) 移動 H5 首屏秒開優(yōu)化方案探討 @bang
從前端優(yōu)化,到客戶端緩存,到離線包,到更多的細節(jié)優(yōu)化,做到上述這些點,H5 頁面在啟動上差不多可以媲美原生的體驗了。
工具框架
1) 使用 scoped npm package @蛋糕仙人
所謂的 scoped package 就是在原來的包管理上新增了命名空間的概念。
2) Nodejs原生支持的ES6特性 @TAT李強
隨著React的風靡,配合Webpack以及Babel等技術(shù),越來越多的前端同學將ECMAScript 2015(ES6)的特性運用在項目中,import、export、class、箭頭函數(shù)、塊級作用域等特性屢試不爽。而對于Node.js實現(xiàn)的后臺代碼來說,我們也同樣希望使用這些ES6特性,下面將以v4.4.4(LTS version)長期支持版本為例展開話題,從兼容性以及性能兩方面著手分析Node.js對ES6的支持情況。
前端視界
1) 使用 A-Frame 打造 WebVR 版《我的世界》 @Kevin Ngo
Mozilla VR 團隊創(chuàng)造了 A-Frame 框架來為 WebVR 生態(tài)系統(tǒng)拋磚引玉,該框架給予開發(fā)者構(gòu)建 3D 和 VR 世界的能力。