BetterFE 前端技术周刊 - 2019/01/28

待我称王封你为后i 2022-01-20 06:15 202阅读 0赞

这是今年最后一篇周刊了，提前给大家拜个早年，祝大家假期愉快～?

#### **\#\# 深阅读** ####

#### [利用CSS3实现3D旋转效果][CSS3_3D] ####

推荐理由：首先推荐两款我们团队做的非常炫酷的系统：

1.  [瓜子东莞车场车位可视化][Link 1]
2.  [图片画廊][Link 2]

这其中都用到了若干CSS3动画，而其中最加分的莫过于3D旋转效果了，推荐文章短而概要的介绍了3D旋转所需技能点，足矣！读完之后谨记住一点 3D旋转的父级容器 一定不能有 overflow: hidden 特性，否则父级容器的 transform 属性设置，子元素将不再继承。这是我们在做的时候的一个深坑、坑、坑。

#### [一图秒懂函数防抖和函数节流][Link 3] ####

推荐理由：在我们开发的过程中，经常会忽略防抖和节流的操作，可能嫌麻烦。这篇文章简单易懂的讲述了如何防抖和节流，以及函数防抖（debounce）和函数节流（throttle）的一些区别。赶紧get此技能吧。

#### [九种跨域方式实现原理（完整版）][Link 4] ####

推荐理由：跨域，前后端数据交互经常会碰到的问题。作者对跨域的原理、解决方式做了非常全面和用心的整理。看完这篇文章，相信你以后遇到跨域问题，一定可以快速并自信的告诉服务端同学，跨域是...，我们这样子解决就好了。

#### [99%的程序都没有考虑的网络异常][99] ####

推荐理由：绝大多数程序只考虑了接口正常工作的场景，而用户在使用我们的产品时遇到的各类异常，全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理，会极大的影响用户体验，严重的还会带来安全和资损风险

#### [记一次网页内存溢出分析及解决实践][Link 5] ####

推荐理由：网页内存是我们很容易忽视的一块，如果页面出现卡顿，我们很难定位问题出现在哪里，这篇文章给出了一个vue项目中内存溢出事件的完整复盘过程，给出背景 -> 验证猜测 -> 问题分析 -> 定位问题 -> 修复 -> 验证，过程清晰，定位精准，我们可以从中学到如何利用chrome的调试工具，打造一个完全纯净可控的分析环境。

另外：vue的手动解绑是个大坑，很多地方很多人在编写代码的时候，真不一定有这个好习惯。我们可以根据业务给出不同的处理方案，对平台接口进行改造，支持事件的基于组件的自动解绑等。

#### **\#\# 新鲜货** ####

#### [通过HTML5 Video来优化动态GIF][HTML5 Video_GIF] ####

推荐理由：讲较大体积的gif动图如何用video来优化，手把手教你具体实现，存在的潜在的问题文末有解决方案，快来试试把自己网站的动图优化起来吧！

#### [Electron构建跨平台应用Mac/Windows/Linux][Electron_Mac_Windows_Linux] ####

推荐理由：从上周的前端生态圈全年总结中，我们可以知道，electron在最受欢迎的20个项目榜上有名，git上有13.6k的star，其收欢迎程度可见一斑。这篇文章是作者精心整理的electron入门基础笔记，感兴趣的同学，可作为入门材料学习～

#### **\#\# 工具 && 见闻**  ####

#### [Zeu.js][] ####

推荐理由: 用于做数据监控看板的基于canvas实现的widget集合，体积很小，效果不错

#### [拼多多技术事故复盘，程序员应该学到什么？][Link 6] ####

推荐理由: 拼多多优惠券事件是互联网近期比较大的一起失误事件，在创业初期，不管是淘宝还是京东都有过类似的事件发生，本文对其进行复盘，简述身为一名程序员可以做些什么来规避此类事件的发生

[CSS3_3D]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Fghost-xyx%2Fp%2F5191769.html
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fbmh5.guazi.com%2Fgps-demo%2Findex.html%23%2Fcarport-visualization%3Fsmall%3D1
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Fmaterliu.github.io%2Fgallery-by-react
[Link 3]: https://juejin.im/post/5c404329e51d4551e064a332
[Link 4]: https://juejin.im/post/5c23993de51d457b8c1f4ee1
[99]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FS2Eu9coPeikkfIbc3KeusA
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FmithC2Bi-bWHCoJ-oKULQg
[HTML5 Video_GIF]: https://link.juejin.im?target=https%3A%2F%2Fwww.zcfy.cc%2Farticle%2Fimprove-animated-gif-performance-with-html5-video
[Electron_Mac_Windows_Linux]: https://juejin.im/post/5c46ab47e51d45522b4f55b1
[Zeu.js]: https://link.juejin.im?target=https%3A%2F%2Fshzlw.github.io%2Fzeu%2Fdocs%2Fintroduction.html
[Link 6]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2F_C4F5yg2qn0Tm0lMYWvhng