正则表达式可能大部分人都用过,但是大家在使用的时候,有没有想过正则表达式背后的原理,又或者当我告诉你正则表达式可能存在性能问题导致线上挂掉,你会不会觉得特别吃惊?
我们先来看看 7 月初,因为一个正则表达式,导致线上事故的例子。
https://blog.cloudflare.com/details-of-the-cloudflare-outage-on-july-2-2019/
简单来说就是一个有性能问题的正则表达式,引起了灾难性回溯,导致 cpu 满载。
正则表达式可能大部分人都用过,但是大家在使用的时候,有没有想过正则表达式背后的原理,又或者当我告诉你正则表达式可能存在性能问题导致线上挂掉,你会不会觉得特别吃惊?
我们先来看看 7 月初,因为一个正则表达式,导致线上事故的例子。
https://blog.cloudflare.com/details-of-the-cloudflare-outage-on-july-2-2019/
简单来说就是一个有性能问题的正则表达式,引起了灾难性回溯,导致 cpu 满载。
在上篇文章我们讲了如何使用 React 的 Suspense 组件和 lazy 方法来实现模块的懒加载,后面还讲了如何使用
React 的 useState 方法来实现自定义的 Hooks,从而达到复用的目的。
我们知道,不管在做什么样的前端项目,列表页肯定是存在的,那如何获取列表的数据呢?大部分情况下我们都是在每个模块内部自己实现一个获取数据的方法,然后调用 setState 来更新数据。那有没有更好的方式可以做到这些,并且能够在一个项目中处处复用这个功能呢?答案就是使用 React Hooks。
JavaScript 单元测试如今对于前端开发来说并不陌生,前端工程化之后项目的代码质量越来越受到重视,单元测试无疑是一种衡量代码质量的重要手段,而测试覆盖率则是衡量测试完整性的一种手段:通过已执行代码的覆盖率,用于评测代码的可靠性和稳定性,可以及时发现没有被测试用例执行到的代码块,提前发现可能的逻辑错误。
伊斯坦布尔(以下简称 Istanbul)是一个基于 JavaScript 的测试覆盖率统计工具,目前绝大多数测试框架比如 jest mocha 等都是使用 Istanbul 来统计覆盖率的。伊斯坦布尔有一个比较老的版本 istanbul.js
(已不再维护)和一个新的版本 nyc
。虽然使用 Istanbul 的人很多,但是几乎没有介绍其实现原理的文章,那么 Istanbul 计算和统计测试覆盖率的整个流程是怎样的呢?
React Hooks 出来也有一段时间了,在这个过程中有一个前端的 React 项目是专门用的 React 的 FC 组件形式来写的。在过程中提炼了一些使用实例,这里记录下。还有,如果你之前从来没有了解过 React Hooks,建议你先
去 React 官方网站了解 React Hooks 的基本概念和使用方式。
官方文档链接:https://reactjs.org/docs/hooks-overview.html#state-hook
自从小程序自定义组件和 npm 功能面世之后,组件化和开源思想逐步开始萌芽了。我们可以将一些通用的部件,如自定义导航栏之类的封装到一个自定义组件中,然后借由 npm 平台开源出去给其他开发者使用,这样可以省去很多劳动。相信各位开发老爷们应该或多或少都有过使用开源包的经历,但是在使用前,这个开源包得能赢取我们的信任,一个很重要的指标就是单元测试通过率和覆盖率。
但是因为小程序独特的运行环境和不完全开源的基础款,使得对小程序自定义组件的单元测试稍微有点困难。目前市面上无论是 vue 还是 react,这些组件化框架都有一套完善的单元测试解决方案,但是对于小程序自定义组件来说却寥寥无几,因此这个工具集—— miniprogram-simulate 便应运而生了。
Omi 框架 正式发布了 → omi-transform。
Made css3 transform super easy. Made 60 FPS easy.
作为 Omi 组件化开发特效运动解决方案,让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的,作为移动 Web 特效解决方案,在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用,以激进的修改 DOM 属性为代价,带来极为便利的可编程性。
你可以通过 css3transform 官方首页快速了解它。
小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发 (Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案。
小程序·云开发为开发者提供完整的云端流程,简化后端开发和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代。
该解决方案目前提供三大基础能力支持:
数据库:一个既可在小程序前端操作,也能在云函数中读写的文档型数据库
云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码
未来,我们还会集成更多的服务能力,为小程序提供更强有力的云端支持。
“抓娃娃” 并不陌生,存在两种结果: 抓到与抓不到。在 Web 动画中,如上图,“抓到” 与 “抓不到” 对应着两个动画,可以使用不同的动画图片资源来实现,似乎毫无异义。
细做观察,不难发现:两个动画中 “动画初始到抓取” 及 “抓取结束到动画结束” 的区间中存在相同动画 (滑动和晃动抓杆)。既然动画相同,那么可以通过引用同一份动画图片资源,不做相同图片的重复加载,从而减少总资源大小。
“两个动画间存在部分相同的动画,相同部分可以引用同一份动画图片资源,来减少图片的总大小。”
肉眼进行辨别哪些动画是一样的?那是不可能的。gka 提供一键式制作多个动画的方式,支持多种图片优化方案 (含图片去重)。
gka 是一款简单的、高效的帧动画生成工具,图片处理工具。
官方文档:https://gka.js.org
Github:https://github.com/gkajs/gka
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2