- 博客(44)
- 收藏
- 关注
RSS订阅原创 手机端实现触摸拖拽效果
手机端实现触摸拖拽效果前言相信在开发手机端页面时，大家都会碰到拖拽元素的需求，下面我们就来介绍一下相关的实现过程，我们需要使用到touchstart，touchmove，touchend三个事件，1.touchstart是触摸开始时触发的事件2.touchmove是触摸移动过程中触发的事件3.touchend是触摸结束时触发的事件我们遇到这样一个需求，初始状态，底部会展示一小部分区域，当我们手指触摸到上面时，向上滑动，底部区域会随着手指移动而跟着向上移动这里有三块，1.首页，2.底部区域，
2022-05-22 15:16:36
2404
3
原创 对服务端返回数据增加字段出现的bug
对服务端返回数据增加字段出现的bug前言：相信大家在处理数据时，会遇到这样的情况，对一个服务端返回数据进行处理，比如一下的服务端数据结构 list = [ { appInfoDto: { appDesc: null, appIconUrl: "http://image-c.wanyol.com/cdo-test-store/img/201907/13/2c1521d6ced7cc0b3e84
2022-05-22 11:57:39
390
原创 前端处理无网络兜底图片展示
前端处理无网络兜底图片展示前言：最近公司要求活动页面增加无网络的兜底页面，主要有图片和文字组成，但是在开发过程中发现在无网络情况下，文字可以正常展示，但是图片无法加载出来，原因呢其实是首页在网页中，对于图片的加载，其实试一次http请求，而请求在无网络的情况下是无法完成的，所以导致图片加载不出来。但是图片展示不了，这也就失去了这个页面的作用，我们改怎么办解决思路既然文字可以加载出来，说明html在无网络也是可以加载的，那么我们其实可以吧图片转成base64编码的格式写在代码中，这样不就可以显示嘛&l
2022-04-01 19:08:04
4196
原创 前端优化-图片打包处理base64的原因
为什么要将图片打包成base64格式首先我们知道在前端技术中每一张图片的加载都会进行一次http请求，而每次http请求都是需要时间的，所以当网页中图片资源很多的时候,如果不进行base64转译，就会进行很多的http请求，会使页面加载时间大大的增加。优点：1.减少网页http请求，大大减少页面加载时间base64编码可以将图片添加到css中，实现请求css即可下载下来图片，减少了在此请求图片的请求缺点：1.base64格式的内容太多base64编码也是很长的，所以对比较大的图片，并不适合使用
2022-03-29 11:01:48
5591
原创 前端如何实现活动分享功能
前言最近遇到了将我们做的活动链接以二维码的形式分享到微信，qq等第三方平台上，通过扫码的形式打开我们的活动的需求。难点1.如何将链接转换成二维码2.有二维码也不行，太单调了，分享出去的不能只是一个二维码，应该还需要有体现当前活动的元素，所以需要生成一个截图，在截图中需要二维码，活动元素等如何将链接转换成二维码，使用vue-qr首先在代码中下载vue-qr这个库 <vue-qr :text="browserUrl" :margin="0"
2022-03-12 16:07:17
2075
原创 typescript 中函数参数为对象如何效验
前言ts作为编译型语言，最大的作用就是检测代码，当我们函数存在参数时，当然也需要进行类型检测1.当函数存在参数时 jumpPage(item: any): void { let { routeName, path, params, title } = item; }使用any，虽然不会报错，但是这样并不会进行类型检测 interface ConfigItems { title: string; icon: string; subTitl
2022-03-11 14:07:06
2404
原创 前端实现页面点击电话号码跳拨打和发送短信
前言最近有遇到点击电话号码支持跳转拨打的功能，开始并不知道如何去实现，在网上找了一下，现在总结一下拨打电话：<a href="tel:18688888888">18688888888</a>，跳到拨号页面发送短信：<a href="sms:18688888888">18688888888</a>，跳到录入短信信息页面上面两种，我在本地测试都是可以正常实现的，不过在部分应用会存在不兼容的情况<a href="wtai://wp//mc;1868
2022-03-10 16:09:23
2705
3
原创 node 的path模块中 path.resolve()和path.join()
1.path.join(path1，path2，path3…)作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。 1.console.log(__dirname); // F:\vue project\node 2.console.log(path.join(__dirname, '../templateOpen/')); // F:\vue project\templateOpen\ 3.c
2022-03-09 15:31:35
590
原创 js实现元素曝光
实现元素曝光的方法1.js实现元素曝光2.使用js的库实现元素曝光1. js实现元素曝光的难点1.如何判断一个元素是否曝光2.如何监听如何判断一个元素是否曝光 private isElementInViewport(el): boolean { let rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.le
2022-03-07 17:01:35
5016
原创 代码优化，代码质量建议
代码优化，代码质量建议1 使用有意义的变量命名使用有意义的名称，这会让你一眼就知道是什么意思。// 不推荐let xyz = validate(‘amyjandrews’);// 推荐let isUsernameValid = validate(‘amyjandrews’);将集合类型命名为复数是有意义的。因此，不要忘记 s：// 不推荐let number = [3, 5, 2, 1, 6];// 推荐let numbers = [3, 5, 2, 1, 6];描述函数做的事。
2022-02-28 11:31:56
265
原创 vscode如何关闭所有打开的文件
vscode如何关闭所有打开的文件前言有些时候，我们在使用vscode开发时，会打开很多文件页面，非常不利于自己查找想要的页面，这时就需要关闭页面，如果一个一个关闭，肯定是非常慢的，这里介绍一下快捷键1.先Ctrl+K2.其次Ctrl+W，这样就可以关闭所有的文件了，...
2022-02-28 10:33:21
7099
原创 使用webpack，打包生成zip包
1:如何使用webpack生成zip包webpack插件filemanager-webpack-plugin(管理打包后的文件路径) const FileManagerPlugin = require('filemanager-webpack-plugin'); // webpack zip const srcFolder = path.resolve(__dirname, '../dist'); const zipFileName = utils.genName(); //
2022-02-23 16:31:25
974
原创 phaser.js，主要实现了移动底部篮子，接取下落物体
1.我将phaser分为3个文件，资源加载BootScene.js，逻辑处理PlayScene.js，整合game.js加粗样式1.1资源加载BootScene.jsimport { Scene } from 'phaser';// 本地import bgMusic from '@src/assets/music/bgMusic.mp3';import bomb from "@src/assets/receiveEuropeanGas/bomb.png"import european_gas
2022-02-22 10:28:57
3738
1
原创 crypto-js的使用，AES加密
1.使用crypto-js，aes加密，一般可以对手机号，身份信息进行加密import AES from 'crypto-js/aes';import Utf8 from 'crypto-js/enc-utf8';import padZeroPadding from 'crypto-js/pad-zeropadding';let key = Utf8.parse('fad56/jRax5/71qM'); let iv = Utf8.parse('fad56/jRax5/71qM'); let
2022-02-14 17:39:14
1839
原创 ajax、axios、fetch的区别
ajax、axios、fetch的区别1.jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} });优缺点：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构
2020-10-16 16:05:30
121
原创 检测数据类型的方法
检测数据类型的方法一.typeoftypeof操作符返回一个用来表示数据类型的字符串,注意typeof运算之后的结果都是字符串类型的注意:typeof是一个操作符,不是一个函数!1.“string” 值是字符串2.“boolean” 值是布尔值3.“number” 值是数值4.“undefined” 值未定义5.“object” 值是对象,数组或null6.“function” 值是函数7.“symbol” 值是Symbolvar num=123;var str="123";var
2020-10-16 08:08:06
762
原创 react的Hooks介绍
Hooks一.Hook简介Hook是React 16.8新增的特性.它可以让你在不编写class的情况下使用state以及生命周期等特性之前了解到组件有class(类)组件,和函数(无状态)组件,class组件中有自己的生命周期和自己的状态,而函数组件是一个无状态组件,Hook的出现正式为了解决这个问题,Hooks可以让函数式组件可以拥有state,生命周期等特性二.为什么要使用HookHook解决了我们在组件之间复用状态逻辑很难的缺陷,使我们更加便捷的操作可以复用的状态逻辑,因为是函数式组件,效
2020-10-15 16:25:15
493
原创 var、let、const的区别
var、let、const的区别一.var1.var属于ES5规范2.预解析var有预解析阶段,会被js解析器扫描,然后放进仓库,等待逐行代码的执行,此时var声明的变量初始值是undefined3.声明提升var会存在声明提升,当js解析器扫描到var关键字后,会将var声明的变量放进当前作用域的顶部4 作用域全局作用域或者函数作用域.5.挂载对象var 声明的全局变量会挂载到window对象上二.let1.let属于ES6规范2.let只在块级作用域有效一般一个大括号就是一个
2020-10-15 08:18:17
93
原创 js的预解析和作用域
预解析和作用域一.概念浏览器中有一套专门解析JS代码的程序,这个程序称为JS的解析器浏览器运行整个页面文档时,遇到< script > 标签时JS解析器开始解析JS代码二.JS解析器的工作步骤1.预解析代码主要找一些关键字如 var,function,以及函数的参数等,并存储进仓库里面,也就是内存先扫描全局的代码,在函数执行的时候,然后扫描局部的,也就是函数内部的变量的初始值是undefind//声明一个a变量,放进仓库scopeconsole.log(a);//undefine
2020-10-14 19:28:22
228
原创 原型和原型链
原型和原型链一.前言javascript与其它面向对象语言不同,在ES6没有引入class概念之前,javascript并不是通过类而是直接创建构造函数来创建实例.在javascript中,类不能描述对象可以干什么事,对象可以直接定义它自己的行为.因为根本不存在类! javascript一切皆对象,把js中的对象分为普通对象和函数对象.函数在js中是一等公民,所以把函数对象给区分出来.javascript是一种直译式脚本语言,是一种动态类型.弱类型,基于原型的语言二.属性:Prototype(原型)
2020-10-14 13:52:55
92
原创 闭包
闭包一.背景我们基本上在面试中,必然会问到的问题:什么是闭包?说说你对闭包的理解.闭包的作用是什么? 闭包也是一个很不好理解的概念,往往我们遇到的机会很多很多,很多朋友呢都说了对闭包的理解,问题表达的方式不一样,但是呢,最后都对闭包没有很清晰的理解.所以呢我这边就帮助大家理解什么是闭包.其实说起来,可以深,也可以浅.先由浅着说.之前呢,在网上也是找了不少的资料,看见人家理解的闭包,我提取出了说法有问题 的4点: 1.闭包是指有权访问另一个函数作用域中变量(参数)的函数(不可取) 2.闭包就是
2020-10-14 08:16:25
94
原创 事件循环机制
事件循环机制一.任务单线程就意味着,所有的任务都需要排队,前面一个任务结束,才会执行后一个任务.如果前一个任务耗时很长,后一个任务就不得不一直等着任务分为2种:1.同步任务(synchronous)同步任务是指:在主线程上排队执行的任务,只有当前一个任务执行完毕,才能执行后一个任务var num = 0;console.log('任务一');for (let index = 0; index < 100000000; index++) { num += index;}con
2020-10-13 13:52:59
1088
原创 react中的组件之间的通信
react的组件之间的通信一.前言React应用是由组件堆积的形式而成的,组件之间相互独立,但是可以相互通信的,React组件的数据是单向数据流的，在面试中面试官经常会问这方面的问题，我认为可以分为下面几种二.组件通信1.父组件通信子组件父组件要通信子组件是很简单的,使用Props进行属性传值即可!export default class Parent extends React.Component { render() { return ( &
2020-10-13 11:33:00
117
原创 react的生命周期
react的生命周期一.简介在React中,每个组件提供了生命周期钩子函数去响应组件在不同时刻应该做的和可以做的事情.组件的挂载>数据更新阶段>卸载阶段二.React 16版本的生命周期由于React 16版本中对生命周期有所更改,所以这里介绍新老版本,现在一般不建议使用React15版本的,会报安全性警告1.组件的挂载（重点就1,3,4）React将组件渲染 > 构造DOM > 展示到页面的过程称为组件的挂载.1.constructor()constructor()
2020-10-13 08:12:06
87
原创 react中的Link和NavLink的区别
react中的Link和NavLink的区别Link现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了组件用来避免这种状况发生。当 你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载嗯、先看个例子// to为string<Link to="/my">我的</Link> // to为obj<Link to={{ pathname: '/my', search: '?sort=n
2020-10-12 20:46:57
3678
原创 基本数据类型和类型显隐转换
基本数据类型和类型显隐转换一.6大数据类型ECMAScript中有5种基础数据类型和一种复杂数据类型. 基础类型有:string , number, undefined, null, boolean. 复杂类型是:object二.简单数据类型1.stringstring 类型,值为字符串 ,js中使用双引号或单引号表示字符串var str1='123';var str2="abc123";2.numbernumber类型,值为数字,js中number类型包括整形,浮点型和非数值NaN即非
2020-10-12 19:21:20
249
原创 深浅拷贝（也叫深浅复制）
深浅拷贝一.概念其实一般来说,我们遇到深浅拷贝的问题,都是针对引用数据类型的变量操作.先了解下数据类型1.值类型和引用类型值类型:直接存储其值,在内存中,是存在栈内存中引用类型: 存储对值的引用,在内存中,是存在堆内存中,变量本身仅仅是一个指向堆中的实际数据地址,存在栈内存中(说白了,就是引用数据类型,实际上存在堆内存中,杂乱无序的放着,但是会有一个指针,指向堆内存中的地址, 而这个指针则是在栈内存中存储)1.1值类型BooleanStringUndefinedNull (typeof 去
2020-10-12 16:18:10
224
原创 promise
promise一.概念Promise 是ES6对异步编程的一种解决方案,比传统的解决方案(如回调函数和事件)更合理更强大.Promise 简单说就是一个容器,里面保存着一个尚未完成且预计在未来完成的异步操作Promise是一个构造函数,用来创建一个Promise对象.var promise=new Promise();Promise对象代表一个异步操作,有三种状态pending(进行中)fulfilled(已成功)rejected(已失败)改变Promise对象的状态,有两种可能:pen
2020-10-12 11:03:47
74
原创 函数的防抖和节流
JS防抖和节流一.背景我们日常开发中会经常遇到的问题,用户的行为会频繁的触发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。二.概念函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间原理却不一样函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高
2020-10-12 08:22:48
193
原创 http协议
http协议一.简介HTTP是一种超文本传输协议,HTTP是一个在计算机世界里专门在两点之间传输文字,图片,音频,视频等超文本数据的约定和规范二.HTTP协议主要特点（1.0版本的）简单快速,灵活,无连接,无状态(1) HTTP是无连接的无连接的含义是限制每次连接只处理一个请求,服务器处理完客户端的请求,并收到客户端的应答后,即断开连接.采用这种方式可以节省传输时间PS:HTTP/1.1里改成总是默认启用keep-live长连接机制,所以现在的HTTP已经不再是无连接的了(2) HTTP是媒
2020-10-11 13:36:45
142
原创 async和await
async和await一,概念ES2017标准引入了async函数,使得异步操作变得更加方便,有人说,这是解决回调地狱的终极方案async函数是什么?其实它就是Generator函数的语法糖.async函数就是将Generator函数的星号(*),替换成async,将yield替换成了awaitj仅此而已.async和await,比起星号和yield,语义更清晰.async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果.二.基本使用1.asyncasync函数返回一个Pr
2020-10-11 11:08:18
177
3
原创 继承
继承一,构造函数继承(对象冒充继承)原理:调用父类构造函数,并改变其中的this指向(bind,call,apply)局限:只继承了父类构造函数的属性,没有继承父类原型的属性//创建一个猫的构造函数function Cat(name, color) { this.name = name; this.color = color; this.eating = function () { console.log('吃东西'); }}Cat.prototy
2020-10-11 09:32:58
95
原创 解决跨域
.解决跨域的方式几种主流的跨域解决方案1.JSONP处理跨域原理: jsonp是一种跨域通信的手段，它的原理其实很简单： a:首先是利用script标签的src属性来实现跨域。b:通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。c: 由于使用script标签的src属性，因此只支持get方法2.实现方式://创建script标签function createScript(){ //定义一个script标签 let
2020-10-10 20:58:18
329
2
原创 数组的方法
解决跨域的方式几种主流的跨域解决方案1.JSONP处理跨域原理: jsonp是一种跨域通信的手段，它的原理其实很简单： a:首先是利用script标签的src属性来实现跨域。b:通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。c: 由于使用script标签的src属性，因此只支持get方法2.实现方式://创建script标签function createScript(){ //定义一个script标签 let o
2020-10-10 14:52:14
160
2
原创 图片的懒加载和预加载
一.背景目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比较大的网站.由于图片数目较大,等待时间长,并且加载过多的资源,导致些资源浪费,那这种情况,用户体验度就是非常差的了,所以这个时候,懒加载和预加载就是个非常好的解决方案二.懒加载懒加载:又名延迟加载(简称lazyload),可以在长网页中延迟加载图像,是对网页性能优化的的一种方案,它的核心是按需加载1.为什么要使用懒加载?(1) 提升用户体验 如果一个长网页,一次性把图片全部加
2020-10-10 13:08:42
344
1
原创 事件委托的原理
事件的委托（代理 Delegated Events）的原理以及优缺点A：委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，优点是(作用)：（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适缺点是：事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。
2020-10-10 08:07:15
1854
原创 前端的优化总结
前端的优化总结相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的，在性能方面，根据Yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。相信很多人都听过优化网站性能的14条规则。更多的信息可见developer.yahoo.com第一条、
2020-10-09 20:16:09
186
原创 密码加密md5和加盐处理
关于密码加密处理md5和加盐处理md5 加密:用户注册时将加密后的密码发送给后端存储当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配。此加密无须解密一.md5的在vue中的用法:1.安装。npm install js-md5 -D2.使用。（1）项目中引入md5模块。import md5 from “js-md5”（2）在main.js里面将md5转换为vue原型import md5 from "js-md5"Vue.prototype.$md5=md53.示例&
2020-10-09 15:30:04
1990
原创 css水平垂直居中
水平垂直居中1.绝对定位 absolute 负margin思路:使用绝对定位,负边距,需要知道子元素的宽高,且把子元素设置为position:absolute,再设置left和top为50%,再加上负边距,margin-left和margin-top相对于宽高各一半1234567891011121.优点易于理解,兼容性好2.缺点需要知道子元素的宽高2.绝对定位 absolute margin:auto思路:使用绝对定位方式,left:0;right:0;top:0;botton:0;ma
2020-10-09 09:49:00
92
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人