重复点击

重复点击主要应用于向后台提交表单的场景下,重复点击会向后台发送多次网络请求,会生成多余的数据。例如:订单结算,加入购物车等

解决方法:在与后台交互时,未接收到返回值时,提交按钮禁用;交互完成后再启用

定时器

在某些场景下,需要使用到 setTimeout()setInterval()定时器。浏览器不会自动拆除对应到定时器,当定时器使用完成后,一定要使用 clearTimeout()clearInterval() 来取消对应的定时器任务,

SEO

在需要进行 SEO 优化的情况下,在页面头部增加如下代码:

<meta name="keywords" content="此处为网站页面内容相关的关键词,使用逗号分隔" />
<meta name="description" content="此处为网站页面内容的简短和精确的描述" />

favicon

Favicon 是与某个网站或网页相关联的图标,默认格式如下:

<link rel="shortcut icon" href="这里是 url" />

字体大小

谷歌浏览器默认字体最小为 12 像素,小于这个值的字体仍然显示 12 像素,这种情况下会造成布局问题。

解决方案(6 像素):

.small-font {
  transform: scale(0.5);
  font-size: 12px;
}

注: 强烈不建议将字体设置到 12px 以下,部分屏幕下会影响用户使用。

数字输入框

在数字输入框只能输入正整数的场景下,当用户输入负数时仍然可以正常输入

解决方案:在 blur 事件出发时判断输入框的值是否符合要求,不符合设置为默认值并提示用户

常用第三方库选择

图片上传(前端压缩)

实现步骤:

  1. 调用 FileReader API 将本地图片上传到浏览器中
  2. 将图片绘制到 Canvas 上进行压缩
  3. 将压缩后的图片转换成图片
  4. 最后上传
Copyright © Sodo Tech 2014-2018 all right reserved,powered by Gitbook最后更新: 2019-01-14 17:18

results matching ""

    No results matching ""