🌓

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

笔者从毕业开始做前端到现在,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);

芝麻开门,显示全文!

从 Redux 说起,到手写,再到状态管理

学习一个东西之前,首先在大脑中积累充分的“疑惑感”。即弄清面临的问题到底是什么,再浏览方法本身之前,最好先使劲问问都想到什么方法。一个公认的事实是,你对问题的疑惑越大,在之前做的自己的思考越多,当看到解答之后印象就越深刻

先说结论

    芝麻开门,显示全文!

    三句话测试你是否懂git

    同事和组长的一番对话引起了笔者对 git 的思考

    先介绍一下我司小工坊式的 git 提交流程,本地打包,删除 dist 文件,重建 dist 文件,git add .git commit -m 'XX'git push origin 分支名

    芝麻开门,显示全文!

    搞轮子:从业务到组件Tabs

    前言

    因为之前为 UI 库由我来做且维护,但缺点是集成在项目中,不便于其他项目使用,且组件被同事改了之后会导致之前沿用的组件乱掉。所以 UI 由独立库维护是最好的。正逢项目不急,就将其排上了日期,其中写了

    芝麻开门,显示全文!