20170117 前端开发日报

   <p>高效的 <a href="/misc/goto?guid=4958879020187554774" rel="nofollow,noindex">javascript</a> ；Node. <a href="/misc/goto?guid=4958879020187554774" rel="nofollow,noindex">JS</a> 面试问题及答案(2017 版)；Webpack 2 终极优化；用 Vue2+Koa1 开发完整的前后端项目；JavaScript 常用积累；使用自记忆函数提高页面性能； <a href="/misc/goto?guid=4959667423000922088" rel="nofollow,noindex">前端开发</a> 者的 Chrome extensions/apps；VueCircleMenu</p>    <ol>     <li> <p>[译] <a href="/misc/goto?guid=4959735489672431773" rel="nofollow,noindex">高效的 JavaScript</a> <a href="/misc/goto?guid=4959735489763965036" rel="nofollow,noindex"> </a> by 边城 传统的 <a href="/misc/goto?guid=4958879019403163939" rel="nofollow,noindex">web</a> 页面不会包含很多脚本，至少不会太影响 Web 页面的性能。然而，Web 页面变得越来越像应用程序，脚本对其的影响也越来越大。随着越来越多的应用采用 Web 技术开发，脚本性能的提升就变得越来越重要。 桌面应用程序通常是用编译器将源 <a href="/misc/goto?guid=4958879019484561778" rel="nofollow,noindex">代码</a> 转换为最终的二进制。编译器在生成最终的应用程序时，可以花费...</p> </li>     <li>#IT职场#【 <a href="/misc/goto?guid=4959735489917140498" rel="nofollow,noindex">Node.js 面试问题及答案(2017 版)</a> 】详见： <a href="/misc/goto?guid=4959735490000310322" rel="nofollow,noindex"> </a> 这篇文章中，作者以面试官的角度分享了一些 Node. <a href="/misc/goto?guid=4958879020187554774" rel="nofollow,noindex">js</a> 面试问题，这些问题可以让你大体了解是否具备 Node.js 开发经验。那么作为 Node 求职者，你是否能够很好的应答出来呢？[思考] ​​​ <p style="text-align: center;"><img src="https://simg.open-open.com/show/d8cca08575245496142e758ea7280f60.jpg"></p> </li>     <li>#前端技术#【 <a href="/misc/goto?guid=4959735490087246996" rel="nofollow,noindex">Webpack 2 终极优化</a> 】详见： <a href="/misc/goto?guid=4959735490176013307" rel="nofollow,noindex"> </a> Webpack 是当下最流行的 JS 打包工具，这得益于网页应用日益复杂和 JS 模块化的流行。而 Webpack 2 也增加了一些新特性。在本文中，作者将与大家分享如何用 Webpack 2 优化你的构建，让它构建出更小的文件尺寸与更好的开发体验。 ​​​ <p><img src="https://simg.open-open.com/show/2af9e25020d9d3609bbb3d95048e8566.jpg"></p> </li>     <li> <p>全栈开发实战： <a href="/misc/goto?guid=4959735490260918421" rel="nofollow,noindex">用 Vue2+Koa1 开发完整的前后端项目</a> - 本文从一名新手的角度（默认对 <a href="/misc/goto?guid=4959734766423311971" rel="nofollow,noindex">Vue</a> 有了解，对 Koa 或者 Express 有了解）出发，从 0 开始构建一个数据通过 Koa 提供 API 的形式获取，页面通过 Vue 渲染的完整的前端项目。原创 by @Molunerfinn ｜阅读全文 <a href="/misc/goto?guid=4959735490371531721" rel="nofollow,noindex"> </a> ​​​</p> </li>     <li>#前端技术#【 <a href="/misc/goto?guid=4959735490458236189" rel="nofollow,noindex">JavaScript 常用积累</a> 】详见： <a href="/misc/goto?guid=4959735490540750596" rel="nofollow,noindex"> </a> 一些常用的 JavaScript 代码片段。或许，你可以留存起来备用。[兔子] ​​​ <p style="text-align: center;"><img src="https://simg.open-open.com/show/f717643ab43db37c1f7ff5311870d682.jpg"></p> </li>     <li> <p><a href="/misc/goto?guid=4959735490625972062" rel="nofollow,noindex">使用自记忆函数提高页面性能</a> - 阅读 <a href="/misc/goto?guid=4959734767280433882" rel="nofollow,noindex">jQuery</a> 源码，发现经常用到的一个技巧，自记忆函数只是这个技巧的一个名字，如何使用它，还得看你的理解程度。原创 by @rockjins ｜阅读全文 <a href="/misc/goto?guid=4959735490738934601" rel="nofollow,noindex"> </a> ​​​</p> </li>     <li>【 <a href="/misc/goto?guid=4959735490819219189" rel="nofollow,noindex">前端开发者的 Chrome extensions/apps</a> 】简单了解了 extension、app 和 plugin 的概念，再来看看几款 Chrome 拓展和应用吧。传送门: <a href="/misc/goto?guid=4959735490908370991" rel="nofollow,noindex"> </a> ​​​ 在文章开头，需要普及一下几个概念，那就是 Chrome 中的 extension、app 和 plugin，分别是扩展、应用和插件的意思，不能混为一谈。 extension(拓展)：在 Chrome 地址栏输入 chrome://extensions 打开。Chrome 拓... <p style="text-align: center;"><img src="https://simg.open-open.com/show/254b1d7b56e59b8b6b5d820a9eb3d6d9.jpg"></p> </li>     <li>#开源项目#【基于 Vue 的圆环菜单组件： <a href="/misc/goto?guid=4959735490987542254" rel="nofollow,noindex">VueCircleMenu</a> 】详见： <a href="/misc/goto?guid=4959735491068899935" rel="nofollow,noindex"> </a> VueCircleMenu 是基于 Vue 编写的圆环菜单组件，可自定义多种了类型和动画。旨在追求简约的风格。喜欢的朋友，不妨来看看。 ​​​ <p style="text-align: center;"><img src="https://simg.open-open.com/show/6f2158bd81b11027a12a41c841655a5d.gif"></p> </li>     <li> <p>[英] <a href="/misc/goto?guid=4959735491159765980" rel="nofollow,noindex">我是怎样用 React 做一个高性能的高仿 Uber 打车移动端页面</a> - 作者用 React 做了一个高仿 Uber 页面，并优化了页面的打开渲染速度，以及推荐了提高页面性能的工具。分享 by @江江也叫Glowin ｜阅读全文 <a href="/misc/goto?guid=4959735491237700932" rel="nofollow,noindex"> </a> ​​​</p> </li>     <li> <p><a href="/misc/goto?guid=4959735491327014377" rel="nofollow,noindex">从小程序重力感应 API 到 requestAnimationFrame 探索实现</a> - 最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画（即重力感应视差效果）功能。分享 by @xiongwilee ｜阅读全文 <a href="/misc/goto?guid=4959735491416728671" rel="nofollow,noindex"> </a> ​​​</p> </li>     <li>《 <a href="/misc/goto?guid=4959735491502701681" rel="nofollow,noindex">前端开发自动化单元测试趋势</a> 》时至今日，Web 前端已经发生了巨大的演变，而单页应用程序也成为了标准。众多应用程序完成了从 PC 到移动端的华丽转身，而那些基于 JavaScript 的框架变得更受开发者们欢迎。 <a href="/misc/goto?guid=4959735491581437826" rel="nofollow,noindex"> </a> （by IT程序狮） ​​​ <p style="text-align: center;"><img src="https://simg.open-open.com/show/e5726b9b8daf0618ac5985b3fdcbb8d8.jpg"></p> </li>     <li><a href="/misc/goto?guid=4959735491671487234" rel="nofollow,noindex">12个效果奇特的HTML5动画赏析</a> <a href="/misc/goto?guid=4959735491745598185" rel="nofollow,noindex"> </a> ​​​ 本文将为大家分享12个效果奇特的 <a href="/misc/goto?guid=4958879020080002186" rel="nofollow,noindex">HTML5</a> 动画，HTML5强大的动画特性可以让你的网页变得更加生动和富有活力，交互性也会进一步得到提高。一起来看看下面的这些HTML5动画案例，没个案例都提供源代码下载。 1、HTML5 <a href="/misc/goto?guid=4959734768550830821" rel="nofollow,noindex">Canvas</a> 瀑布动画 超逼真 这次我们来分享一款很酷的HTML5 Canvas瀑布动画，瀑布动画非常逼真。整个瀑布动画像是... <p style="text-align: center;"><img src="https://simg.open-open.com/show/2c79f6514212468605867b16a5e10577.jpg"></p> </li>    </ol>    <p> </p>    <p>来自：http://caibaojian.com/fe-daily-20170117.html</p>    <p> </p>