本期導讀:本期我為大家?guī)碓瓌?chuàng)文章:AI生成H5頁面pix2code論文啟發(fā)與思考辉饱,跟上時代科技的潮流芜茵,與張艷的JS寄生組合式繼承贺嫂。語言基礎專題為大家?guī)韈ss逐幀動畫抖動解決方案擎淤、WebSocket應用安全問題分析肮砾、移動H5首屏秒開優(yōu)化方案探討。工具框架推薦大家閱讀scoped npm package髓抑、Nodejs原生支持的ES6特性咙崎。文末是WebVR 版《我的世界》,歡迎賞鑒启昧。
原創(chuàng)專題
1) AI生成H5頁面pix2code論文啟發(fā)與思考 @吳掌雄
最近看了一下pix2codeAI生成前端頁面的官方論文與github上面的pix2codeReimplement源碼叙凡,雖然官方只提供了論文還沒有公開源碼與用戶調用的入口劈伴,但也受到了一些啟發(fā)密末,思考了下一利用機器學習生成h5靜態(tài)頁面的可行性。
2) JS寄生組合式繼承 @張艷
JS的繼承方式有很多種跛璧,最理想的繼承方式是寄生組合式繼承严里。
組合繼承(構造函數和原型的組合)會調用兩次父類構造函數的代碼..
語言基礎
1) CSS 技巧:逐幀動畫抖動解決方案 @leeenx
文章背景是移動端適配方案帶來的雪碧圖抖動問題。
2) WebSocket應用安全問題分析 @ethan
WebSocket 并不會解決 Web 應用中存在的安全問題追城,開發(fā)者需要了解 WebSocket 應用潛在的安全風險刹碾,以及如何做到安全開發(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等技術荠察,越來越多的前端同學將ECMAScript 2015(ES6)的特性運用在項目中,import奈搜、export悉盆、class、箭頭函數馋吗、塊級作用域等特性屢試不爽焕盟。而對于Node.js實現的后臺代碼來說,我們也同樣希望使用這些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ā)者構建 3D 和 VR 世界的能力堰怨。