🌓

图片懒加载的三种解决方法

写作提高思考

前言

我想写一个系列,关于图片懒加载、React 渲染十万条数据、无限下拉方案文章,因为其三者有共性,都有使用了 与 DOM 相关的 offsetTop、innerHeight、getBoundingClientRect、IntersectionObserver 等,这些知识点如果单独放在一篇文章中,其价值点就是1,如果相互连接,价值点就是3。用好梅特卡夫定律,能让自己的效率提升不少

芝麻开门,显示全文!

部署实战记录

写博客是为了让自己不那么快忘记

把一个 node 服务部署上线是怎么个流程?

本人在做个人公众号微信分享服务时因为看到别人的个人订阅号能突破微信认证的界限,所以也想尝试一下,结果是失败了,但是又温习了下部署的整一流程,以此记录

芝麻开门,显示全文!

移动端法门:自适应方案和高清方案

笔者从毕业开始做前端到现在,90% 的项目是移动端打交道,所以当简历上写了“移动H5”几个字时,必会被问到自适应方案与高清方案

”自适应“讲的是一套UI(例如750*1334),在多端下展示近乎一样的效果;而”高清“是因为 DPR 提升而所做的各种精度适配

这篇文章讲讲笔者理解的自适应方案和高清方案

芝麻开门,显示全文!

知识点:preventDefault、stopPropagation

JavaScript 冒泡和捕获是两种事件行为,使用 event.stopPropagation() 能起到阻止捕获和冒泡阶段中当前事件的进一步传播,使用 event.preventDefault() 可以取消默认事件

防止冒泡和捕获

w3c 的方法是 e.stopPropagation(),IE则是使用 e.cancelBubble = true

芝麻开门,显示全文!

搞轮子:不依赖外部DIY Toast 需要考虑什么

mask(遮罩)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { FC, memo } from 'react';
import classnames from 'classnames';
import { MaskProps } from './PropType';

const prefixCls = 'jing-mask';

const Mask: FC<MaskProps> = (props) => {
const { className, type, visible, style, onClick } = props;

const classes = classnames(className, prefixCls, {
[`${prefixCls}--${type}`]: !!type,
});

return visible ? (
<div className={classes} style={style} onClick={onClick} />
) : null;
};

Mask.defaultProps = {
type: 'normal',
visible: false,
};

export default memo(Mask);

芝麻开门,显示全文!