web前端开发
文章平均质量分 50
万少博
2016-2026走好职业生涯技术道路十年的每一步,用技术改变生活。
展开
-
web端代码编辑器和diff工具
最新更新时间:2021年05月18日13:51:49《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:react项目中的代码diff工具JSON.stringify(JSON.parse(json)) 将单行json字符串以带有换行和缩进的格式形式输出import { PureComponent } from 'react';import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';class Di原创 2021-05-18 14:06:56 · 645 阅读 · 0 评论 -
在不刷新和不跳转页面的情况下向URL中增删改query参数
最新更新时间:2020年09月08日14:10:19《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在不刷新和不跳转页面的情况下向URL中增删改query参数,原理,路由push到和当前相同的路由时,页面不跳转、不刷新。方案一:原生操作查询query参数const{ location } = this.props;const { search } = location;let queryStr = search.slice(1);//age=30&name=wansh原创 2021-03-16 17:37:39 · 6115 阅读 · 0 评论 -
移动端开发问题汇总
最新更新时间:2020年09月14日15:37:43《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:移动端开发过程中遇到的问题,click事件300ms延迟、点击穿透、1像素边框click事件300ms延迟click事件等待约 300ms 的原因,浏览器需要判断用户是否是双击缩放行为,如果是双击就不会触发 click 事件。 因此 click 事件触发代表一轮触摸事件的结束。移动端,对dom元素分别绑定三个事件:onTouchStart、onTouchEnd、onClick原创 2020-09-14 16:50:11 · 254 阅读 · 0 评论 -
使用阿里云OSS上传本地资源(图片、文件、音频、视频)
最新更新时间:2020年08月08日23:44:17《猛戳-查看我的博客地图-总有你意想不到的惊喜》背景:在使用阿里云OSS的过程中,通过JavaScript客户端签名直传的方案进行本地资源上传时,在react架构的项目中引入官方提供的Plupload SDK的方案一直上传失败,究其原因是Plupload SDK的方案采用jQuery操作DOM进行上传,通过分析源码发现核心还是传统的formdata格式发送xhr对象上传。本文内容:记录前端开发过程中在不同场景下使用阿里云OSS上传本地资源的方案原创 2020-08-08 23:45:34 · 5327 阅读 · 1 评论 -
JavaScript Date对象详解和实例
*最新更新时间:2020年05月28日13:59:00《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:Date对象,用于处理日期和时间创建Date对象var date = new Date();var date = new Date(milliseconds);var date = new Date('Fri Mar 24 2017 16:42:54 GMT+0800 (中国标准时间)');var date = new Date(year,month,day,hours,minu原创 2020-05-28 14:29:20 · 288 阅读 · 0 评论 -
在swiper页面实现指定区域内容横向滚动的方案
最新更新时间:2020年05月27日16:31:43《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:页面部分内容横向滚动固定宽高区域中图片横向滚动需要面临的几个问题:可滚动区域的内容,滚动的时候swiper页面禁止左右滑动,dom元素需要添加swiper-no-swiping类名隐藏横向滚动条,需要增加一个中间层的dom元素<style>.scrollBox{ display: inline-block; width: 200px;/* 宽度固定 *原创 2020-05-27 16:44:22 · 3342 阅读 · 2 评论 -
使用CSS和JS做移动端样式兼容性适配的方案
最新更新时间:2020年05月27日15:26:14《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:移动端不同机型、不同设备的样式兼容性方案汇总机型屏幕宽高,物理尺寸屏幕分辨率,物理尺寸上的像素点个数,单位px,window.innerHeight 和 window.innerWidth-真机浏览器模拟器真机小程序webviewiPhone 5-320*568-iPhone 6/7/8-375*667-iPhone 6/7/8 P原创 2020-05-27 15:56:41 · 744 阅读 · 0 评论 -
阻止事件执行的三种方法(preventDefault、stopImmediatePropagation、stopPropagation)横向对比
最新更新时间:2020年05月27日10:57:02《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:Event对象的一些知识点,事件注册、事件对象、阻止事件概述Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件),而其他由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。为DOM元素注册事件处理函数的三种方式方式一:EventTarget.addEventListenermyButton.addEventListen原创 2020-05-27 13:19:33 · 2746 阅读 · 0 评论 -
Canvas学习记录之drawImage
最新更新时间:2020年03月16日01:06:23《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述本文内容:本文介绍基于drawImage()绘制图片的一些基本用法,基本图片、固定坐标图片、图片裁剪、图片宽高比压缩、圆角图片、圆形头像图片drawImage(image, x, y)从画布坐标(x,y)开始绘制图片,图片不会被裁剪,宽高比保持不变drawImage(...原创 2020-03-16 01:06:46 · 1361 阅读 · 0 评论 -
Canvas学习记录之fillText
最新更新时间:2020年03月14日16:20:22《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述本文内容:本文介绍基于fillText()绘制文本的一些基本用法,基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中fillText(text, x, y [, maxWidth]);...原创 2020-03-14 16:27:26 · 5407 阅读 · 2 评论 -
Canvas学习记录之rect
最新更新时间:2020年03月14日14:29:22《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:本文介绍基于rect()绘制矩形路径的一些基本用法,矩形、正方形、圆角矩形、线性渐变矩形、辐射渐变圆形rect绘制一个矩形,四个入参依次为:起始点x轴坐标 (起始点为矩形左上角定点)、起始点y轴坐标、宽度、高度canvas画布的原点坐标(0,0)为左上角ctx.re...原创 2020-03-14 14:29:51 · 1569 阅读 · 0 评论 -
Canvas学习记录之arc
最新更新时间:2020年03月14日00:58:55《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:本文介绍基于arc()绘制圆弧路径的一些基本用法,圆弧、圆形、环形、球形、扇形、饼状图创建二维渲染上下文var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');arc...原创 2020-03-14 01:08:16 · 1789 阅读 · 0 评论 -
在移动端用canvas技术实现一个画板的工程实例
最新更新时间:2020年03月11日22:07:14《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在研发C端教育类产品的时候,会遇到在作答题目的时候需要验算或者做草稿,因此诞生了一个草稿本或者小黑板的功能模块,本文统称为画板。本文基于canvas技术,深入讨论实现一个画板功能的原理和核心代码。成品示例图画板的功能包括两部分:控制面板区和绘画区,控制面板区如下图上半部分,集...原创 2020-03-11 23:22:56 · 374 阅读 · 0 评论 -
使用腾讯云COS上传图片实例
最新更新时间:2020年03月05日10:53:05《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在微信小程序中接入腾讯云的COS服务,上传图片至腾讯云的实际应用方案概述对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和...原创 2020-03-05 11:26:59 · 1962 阅读 · 0 评论 -
研发C端产品我遇到的线上事故
最新更新时间:2020年03月03日23:44:03《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述文章主题背景:从业前端开发至今(2016-2020)已有4年时间,有幸在新东方团队参与了用户量过百万的C端产品,经历了从0到1的研发过程,期间参与了技术架构设计、第一次上线面向用户、技术团队管理、项目架构管理、多团队多岗位配合沟通、多人协同开发中代码管理和需求分配、代码审核和分支管理、技...原创 2020-03-07 20:08:16 · 370 阅读 · 0 评论 -
在微信小程序中实现拍摄图片、压缩、预览、裁剪、上传的实现方案
最新更新时间:2019年2月1日14:18:12《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:小程序拍照上传概述引入第三方库:wx-plugin/image-cropper拍照界面<view class="container"> <camera device-position="back" device-position="back" fl...原创 2020-02-25 17:47:19 · 4931 阅读 · 3 评论 -
微信小程序“页面内发起转发”开发问题汇总
最新更新时间:2019年12月25日22:34:21《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:微信小程序通过转发,将小程序以消息卡片的形式发送给好友,好友点击聊天记录中的消息卡片,可以进入这个小程序。转发转发,是指小程序界面右上角三个点调起底部弹框选择器,其中有一个转发按钮,会将这个小程序以消息卡片的形式发送给好友不自定义转发图片的情况下,默认会取当前页面,从顶部...原创 2019-12-25 23:00:04 · 3634 阅读 · 0 评论 -
在微信小程序中用Canvas绘制定制的图样并生成图片保存到手机相册的工程方案
最新更新时间:2019年11月17日15:59:16《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在微信小程序中用Canvas绘制定制的图样并生成图片保存到手机相册的工程方案概述在常规的web站点中,用canvas生成图片,有现成的插件,在小程序中没有成熟的插件,本文采用小程序官方提供的api生成图片在主页面直接开发下面用到的所有尺寸都是750设计稿的绝对尺寸...原创 2019-11-17 16:36:24 · 1441 阅读 · 2 评论 -
微信小程序原生页面和webview页面双向通信问题汇总
最新更新时间:2019年11月01日13:42:34《猛戳-查看我的博客地图-总有你意想不到的惊喜》微信小程序开发过程中遇到的种种问题,归纳总结概述随着微信生态的不断发展,微信小程序的地位变的重要,几乎所有APP都会做小程序端的应用,虽然在开发过程中,开发成本比常规的网站类型的项目小,但也会遇到很多方案问题和技术瓶颈。小程序原生页面和webview页面的双向通信//webvie...原创 2019-11-01 14:40:29 · 7415 阅读 · 4 评论 -
在react的移动端项目中实现手机拍摄图片、压缩、预览、裁剪、上传的实现方案
最新更新时间:2019年10月31日15:33:32《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在移动端实现图片拍摄、压缩、预览、裁剪、上传的五大功能,看起来是一套很复杂的业务逻辑组合,实际上每个模块可以单独开发,细分并拆分业务模块是常见复杂业务形态开发的基本方案。概述在移动端做开发永远越不过的两个障碍或技术瓶颈,兼容性和性能。兼容性,某些HTML元素的默认样式在不同...原创 2019-10-31 17:50:45 · 3550 阅读 · 1 评论 -
颜色随机生成拾取器
最新更新时间:2019年10月25日16:35:21《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:生成随机颜色,效果见文末。概述生成随机颜色,并提取色值import React from 'react'import * as styles from './index.scss'let styles = .contianer { width: 100%; ...原创 2019-10-25 16:41:40 · 239 阅读 · 0 评论 -
实现贴边悬浮可拖动的交互效果
最新更新时间:2019年10月15日09:51:32《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:一般情况下,在应用的首页,会有一个贴边的、悬浮的、可拖动的按钮,用来快速进入具体的某个页面,或者用来调起客服,或者其他信息。概述本文使用 react 框架,采用组件化方案实现这个交互效果,并且完全兼容 Android 和 iOS 双端。尤其是针对 iOS 端,当页面滚动到上下...原创 2019-10-15 10:29:48 · 950 阅读 · 0 评论 -
React学习总结
最新更新时间:2019年06月08日11:53:05《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:主要记录作者在使用react的过程中,学习到的新的知识点和难点。props父子组件通信过程中,父组件可以给子组件传递属性、方法和组件。//这是一个父组件 parent.jsimport Apple from './Apple'export default class ...原创 2019-06-08 12:36:06 · 397 阅读 · 0 评论 -
原生HTML标签和JavaScript语言实现文件(图片、文档、视频)上传
*最新更新时间:2019年05月25日20:20:34《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:input标签实现文件上传,FormData对象实现文件上传实现代码//以图片为例,实现单文件上传.courseSaleInfoUpload{ width:50px; height: 50px; position: absolute; top: 50%; left...原创 2019-05-25 20:45:03 · 762 阅读 · 0 评论 -
web前端开发工程师-面试题汇总
已经参加工作(或实习)的同学都知道,在进入每一家公司之前,都需要经历入职前的洗礼——面试。面试对于每一位技术人员来说都是一次挑战,因为面试的难度深不可测,从技术发展的角度来说,深度和广度都在不停的扩张,因此每一位技术人员都需要经常学习新的知识,以此来适应这个发展的社会。 本篇博文是自己在面试过程中所遇到的面试题,借助文字记录的方式以便温故知新。1.用css实现三角形效果。原创 2016-12-15 08:01:13 · 10381 阅读 · 0 评论 -
前后端分离之用户登录状态管理和校验
最新更新时间:2019年06月10日17:23:05《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:前后端开发分离,如何实现用户登录状态监控和校验,要解决的几个问题:A用户登录A机器成功,此时A用户登录B机器,A机器的A用户登录状态需要下线,即保证一个用户只能同时在线一台机器;A用户登录成功,一周之内不需要再次登录;实现原理用户首次访问站点,后端从请求体中读取co...原创 2019-06-10 18:42:31 · 15701 阅读 · 5 评论 -
fetch请求详解
最新更新时间:2019年06月04日16:18:30《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:fetch相关概述Fetch API 提供了一个获取资源的接口(包括跨域请求),Fetch 是对 HTTP 接口的抽象,包括 Request,Response,Headers,Body。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用...原创 2019-06-04 17:41:50 · 5541 阅读 · 0 评论 -
通过exif信息校正手机拍摄图片的旋转问题
最新更新时间:2019年07月03日11:24:00《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:exif信息、获取图片角度信息、orientation的值和拍摄方向对照表、图片的方向校正exifExif 信息,由数码相机在拍摄过程中采集一系列的信息,然后把信息放置在我们熟知的 JPEG/TIFF 文件的头部,也就是说 Exif信息是镶嵌在 JPEG/TIFF 图像文件格...原创 2019-07-03 11:51:25 · 3727 阅读 · 0 评论 -
HTML5高阶实例之canvas绘制圆弧
最新更新时间:2019年2月1日14:18:12《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:canvas 绘制圆弧绘制任意角度的纯色圆弧模板骨架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canv...原创 2019-07-14 19:17:42 · 582 阅读 · 0 评论 -
移动端开发兼容性问题汇总
最新更新时间:2019年09月07日13:27:20《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:移动端开发兼容性问题概述在进行移动端开发过程中,会遇到各种问题,大概分为:iOS端兼容性问题、Android端兼容性问题、移动端通用的兼容性问题input元素获取焦点阻止默认键盘弹出//阻止默认键盘弹出 使用readonly属性<input readonly /...原创 2019-09-07 14:35:25 · 1011 阅读 · 0 评论 -
BUG总结
最新更新时间:2019年05月21日17:51:48《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:日常bug汇总概述在我的工作经历中,作为一名基层开发工程师,开发业务过程中,会遇到大大小大的问题,这里主要记录耗时较长的问题react异步dom问题问题时间:2019年05月21日18:09:25问题描述:react移动端的项目,图片预览功能,使用react-cro...原创 2019-05-21 18:16:00 · 539 阅读 · 0 评论 -
定时器相关
最新更新时间:2019年04月26日11:07:41《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:关于定时器的相关使用场景前端定时任务//2019年4月1日凌晨之后不显示某些UI//new Date('2019-04-04T16:00:00.000Z')let timeout = false;//let futureTime = 1554048000000;//201...原创 2019-04-26 11:43:40 · 218 阅读 · 0 评论 -
H5-移动端相机拍照(读取本地相册)(PC端读取本地相册)、压缩、预览、裁剪、上传功能开发汇总
最新更新时间:2019年04月21日17:56:04《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:开发过程中遇到的相关问题总结H5端相机拍照原理设置input标签的属性如下,capture为空会让用户选择本地文件或者拍照,onChange事件直接将图片文件转换为base64<html><body>//react组件<input ...原创 2019-04-21 17:59:57 · 1293 阅读 · 0 评论 -
WEB前端开发-移动端兼容性问题汇总
最近更新时间:2018年4月9日16:50:05 作为一名专业的web前端开发工程师,必须时刻谨记自己的使命和价值,能够独立处理日常开发任务中的常规问题,并且善于总结和积累实践经验。前言:1、移动端开发需要加入的代码:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name=...原创 2018-04-09 17:21:23 · 11417 阅读 · 0 评论 -
React-Native开发总结-react层面上的问题
最近更新时间:2017年10月30日11:43:49《我的博客地图》 在实际开发中,如果采用框架进行项目构建,组件的生命周期是重头戏,也是难点和重点。学习了理论知识点需要深度实践才能领悟其中的意思。1、react的生命周期如下图所示:生命周期方法执行步骤:constructor-componentWillMount-render-componentDidMount...原创 2017-10-29 14:59:21 · 2031 阅读 · 0 评论 -
React-Native开发总结-redux层面上的问题
更新时间:2018年02月02日10:39:00 开发过react和react native的同学都知道,当应用比较大的时候,组件的状态(数据)会很难管理,尤其对于那些在组件间进行通信的数据,更难以把控(增加、删除、修改、查询)。办法总比困难多,出现问题,一定会出现解决问题的方法。redux的出现,正是为解决这一问题。1、综述 redux是站在应用整体的高度来管原创 2017-11-08 17:34:35 · 891 阅读 · 0 评论 -
web前端性能优化实践
更新时间:2017年1月5日16:07:22 作为一名合格的前端开发人员,必须考虑和面对的一个问题就是性能优化,尤其对于大型网站来说,这个技术 || 技能是必不可少的。从问题入手,选择合理方案。1.事件处理程序的数量越多,页面的整体运行性能越差,用户体验越差。 事件处理程序为用户体验提供了丰富的交互性,但任何事件处理程序都会增加DOM访问次数,从而延迟整个页面的交互就绪事件原创 2017-01-05 15:16:01 · 1163 阅读 · 2 评论 -
React-Native开发总结-html层面上的问题
最近更新时间:2017年10月29日14:50:47 做前端开发,熟悉了HTML+CSS+JS的开发模式,如果不看RN原理,直接用老一套的逻辑思维上手RN,可能会大跌眼镜。高效开发的前提,需要学习并理解RN的原理。本文主要记录内容是,关于RN开发的HTML层面上的问题。1、RN的HTML RN提供的组件(在HTML中叫标签)中常用的有:原创 2017-10-29 14:50:21 · 1909 阅读 · 0 评论 -
移动端屏幕尺寸适配方案
最近更新时间:2017年7月19日15:32:20 目前移动端H5开发较多,在项目整体配置上,只要遵循标准,完全可以适配和兼容所有手机屏幕尺寸。1、动态解决方案var pixelRatio = 1 / window.devicePixelRatio;//通过js动态设置视口(viewport)document.write(''maximum-sca原创 2017-07-19 15:02:18 · 2781 阅读 · 0 评论 -
计算机网络-前端需要掌握的知识点
时间:2018年3月16日09:39:02 前言:工作时间越长,越觉得自己的知识储备不够用、太浅显,因此需要不断地循序渐进的更深入的巩固老老知识,学习新知识。1、计算机网络七层协议 网络协议,计算机网络中进行数据交换而建立的规则、标准或约定的集合。应用层,Application Layer,DHCP ·DNS · FTP · Gopher · HTTP· IMAP4 · IRC · N...原创 2017-09-02 22:12:00 · 842 阅读 · 0 评论