react-router中的exact和strict

前言 每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。 本文案例主要以react-router v4+为主,v5版本是因为发布时版本依赖有问题而直接跳成这个大版本的,用法和4完全相同,就是这么任性 > < ,升级详情可看本文最后链接 exact exac...

假设最后一个css元素是html标签,则选择器解析从左往右的提案

现状 现在浏览器css匹配核心算法的规则都是是以 right-to-left 方式匹配节点的。 如.root .sub span {…},浏览器渲染方式是 span -> .sub -> .root 它的读取顺序变成:先找到所有的span,沿着span的父元素查找.sub,再找.root,中途找到了符合匹配规则的节点就加入结果集;如果直到根元素html都没有匹配,则不再遍历这条...

gulp插件解决浏览器缓存问题

一、前言 有些简单前端小项目,不需要涉及框架,前端打包压缩的话本妹子还是喜欢用gulp。 本文将用gulp-rev和gulp-rev-rewrite解决cdn缓存问题。 以及列出的是本妹子最常用的gulp插件,小伙伴们可以参考。 案例地址:https://github.com/raoenhui/gulpExample.git 二、解决浏览器缓存问题 gulp-rev 1.为静态文件添加唯...

Intersection observer检测元素是否在视窗内

前言 一直以来,检测元素在浏览器视窗口内不是件容易的事,很多解决方案都不能很准确的判断,计算量也有可能拖慢网站性能。 但是很多场景都需要用到: 当页面滚动时,懒加载图片或其他内容。 实现“可无限滚动”网站,也就是当用户滚动网页时直接加载更多内容,无需翻页。 为计算广告收益,检测其广告元素的曝光情况。 根据用户是否已滚动到相应区域来灵活开始执行任务或动...

慎用try catch

前言 自从ECMA-262第3版引入了try catch语句,作为JavaScript中处理异常的一种标准方式。基本的语法如下所示。 一、try catch基本语法 try { //可能会导致错误的代码 } catch (error) { //在错误发生时怎么处理 }finally { //即使报错始终执行 } 二、try catch特点 1.try c...