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

204 阅读3分钟

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

## 深阅读

利用CSS3实现3D旋转效果

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

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

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

一图秒懂函数防抖和函数节流

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

九种跨域方式实现原理(完整版)

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

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

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

记一次网页内存溢出分析及解决实践

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

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

## 新鲜货

通过HTML5 Video来优化动态GIF

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

Electron构建跨平台应用Mac/Windows/Linux

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

## 工具 && 见闻

Zeu.js

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

拼多多技术事故复盘,程序员应该学到什么?

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