小小鲁班

这两个库都是跨平台的，都是直接操作 dom 的，跨平台不是不好，肯定是好，但是在 React 的世界，要处理状态的同步，通常都是通过状态或属性来控制，虽然可以用个 React 包裹上面两个库，提供 React 版本，但是总是觉得不那么完美。 查了一下，PC 触摸板可以出发 on…

既然是进入页面之后可以判断数据是否加载完毕，我们也可以直接在页面进入之前，通过路由元信息配置该页面需要的全局异步数据，然后通过路由跳转的守卫去拉取异步数据（全局公用的异步数据只需要加载一遍就行，如果加载失败我们可以跳转到服务器错误页面）。完了再显示我们的页面，同时使用Promi…

场景需求：最近设计湿丢来这样的页面设计，要求响应式。正常老铁们看到类似标签栏的设计，作为前端要切出来估计头皮一发麻，基本上实现的话要么简单粗暴上背景图，要么几个div，作为对代码有的洁癖的我就直接上v-for表单渲染，把中间这块封装了一个公用的容器组件wapper，于是乎下面代…

团队开发中，多人开发同一个项目，由于个人编码习惯不同，一个项目中最终的代码风格可能差别很大，所以需要通过工具进行约束来保证代码风格的统一。同时也希望通过工具尽可能的减少低级错误出现，并且能帮助修正，所以有了各种各样的 lint 和 formatter。 本篇的目标是使用 vsc…

1）一个是吸边效果。位置判断，然后缓动到目标位置： 2）一个是页面滚动过程中隐藏悬浮球的防抖。 3、touchstart里设置禁止点击以免touch和click事件冲突，同时让transition为none因为跟随手指移动时不需要缓动效果。 4、touchmove中设置悬浮球跟…

曾经有一段时间专门处理了一下远程调试的事情，要解决的问题是不依赖Chrome如何在移动设备中调试Web页面。有时候真的奇怪，因为我们老是自己制造问题，因为“墙”的存在被迫去解决这些本来不是问题的问题。 利用Chrome调试Android Web页面，本来是很好的事情，但是由于G…

本文暂未涉及Performance面板的内容。 1. Chrome Devtools 的用处 2. 菜单面板拆解 3. 常用命令和调试 1. 呼出快捷指令面板：cmd + shift + p 在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在…

关于性能优化，我之前写过iOS性能优化，经过优化之后，我们的APP，冷启动，从2.7秒优化到了0.6秒。 ，那么使用RunLoop如何来监控性能卡顿呢。 通过iOS性能优化 我们知道，简单来说App卡顿，就是FPS达不到60帧率，丢帧现象，就会卡顿。但是很多时候，我们只知道丢帧…

前言 笔者最近在倒腾项目上一些工程化的业务，之前基于create-react-app搭好了两个工程架子，一个面向的是pc web，一个是已经做了移动端适配面向mobile h5，所以存在两个项目挂在g