javaScript
文章平均质量分 53
实现页面动态功能的语言
weixin_47164846
这个作者很懒,什么都没留下…
展开
-
前端vue全局注册懒加载指令
引入全局,就可以使用v-lazy指令去监听img。原创 2023-11-30 16:27:01 · 108 阅读 · 0 评论 -
手机端实现触摸拖拽效果
手机端实现触摸拖拽效果前言相信在开发手机端页面时,大家都会碰到拖拽元素的需求,下面我们就来介绍一下相关的实现过程,我们需要使用到touchstart,touchmove,touchend三个事件,1.touchstart是触摸开始时触发的事件2.touchmove是触摸移动过程中触发的事件3.touchend是触摸结束时触发的事件我们遇到这样一个需求,初始状态,底部会展示一小部分区域,当我们手指触摸到上面时,向上滑动,底部区域会随着手指移动而跟着向上移动这里有三块,1.首页,2.底部区域,原创 2022-05-22 15:16:36 · 2240 阅读 · 3 评论 -
前端处理无网络兜底图片展示
前端处理无网络兜底图片展示前言:最近公司要求活动页面增加无网络的兜底页面,主要有图片和文字组成,但是在开发过程中发现在无网络情况下,文字可以正常展示,但是图片无法加载出来,原因呢其实是首页在网页中,对于图片的加载,其实试一次http请求,而请求在无网络的情况下是无法完成的,所以导致图片加载不出来。但是图片展示不了,这也就失去了这个页面的作用,我们改怎么办解决思路既然文字可以加载出来,说明html在无网络也是可以加载的,那么我们其实可以吧图片转成base64编码的格式写在代码中,这样不就可以显示嘛&l原创 2022-04-01 19:08:04 · 3706 阅读 · 0 评论 -
前端优化-图片打包处理base64的原因
为什么要将图片打包成base64格式首先我们知道在前端技术中每一张图片的加载都会进行一次http请求,而每次http请求都是需要时间的,所以当网页中图片资源很多的时候,如果不进行base64转译,就会进行很多的http请求,会使页面加载时间大大的增加。优点:1.减少网页http请求,大大减少页面加载时间base64编码可以将图片添加到css中,实现请求css即可下载下来图片,减少了在此请求图片的请求缺点:1.base64格式的内容太多base64编码也是很长的,所以对比较大的图片,并不适合使用原创 2022-03-29 11:01:48 · 5478 阅读 · 0 评论 -
前端如何实现活动分享功能
前言最近遇到了将我们做的活动链接以二维码的形式分享到微信,qq等第三方平台上,通过扫码的形式打开我们的活动的需求。难点1.如何将链接转换成二维码2.有二维码也不行,太单调了,分享出去的不能只是一个二维码,应该还需要有体现当前活动的元素,所以需要生成一个截图,在截图中需要二维码,活动元素等如何将链接转换成二维码,使用vue-qr首先在代码中下载vue-qr这个库 <vue-qr :text="browserUrl" :margin="0"原创 2022-03-12 16:07:17 · 1991 阅读 · 0 评论 -
代码优化,代码质量建议
代码优化,代码质量建议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 · 231 阅读 · 0 评论 -
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 · 3677 阅读 · 1 评论 -
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 · 102 阅读 · 0 评论 -
检测数据类型的方法
检测数据类型的方法一.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 · 724 阅读 · 0 评论 -
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 · 69 阅读 · 0 评论 -
js的预解析和作用域
预解析和作用域一.概念浏览器中有一套专门解析JS代码的程序,这个程序称为JS的解析器浏览器运行整个页面文档时,遇到< script > 标签时JS解析器开始解析JS代码二.JS解析器的工作步骤1.预解析代码主要找一些关键字如 var,function,以及函数的参数等,并存储进仓库里面,也就是内存先扫描全局的代码,在函数执行的时候,然后扫描局部的,也就是函数内部的变量的初始值是undefind//声明一个a变量,放进仓库scopeconsole.log(a);//undefine原创 2020-10-14 19:28:22 · 184 阅读 · 0 评论 -
原型和原型链
原型和原型链一.前言javascript与其它面向对象语言不同,在ES6没有引入class概念之前,javascript并不是通过类而是直接创建构造函数来创建实例.在javascript中,类不能描述对象可以干什么事,对象可以直接定义它自己的行为.因为根本不存在类! javascript一切皆对象,把js中的对象分为普通对象和函数对象.函数在js中是一等公民,所以把函数对象给区分出来.javascript是一种直译式脚本语言,是一种动态类型.弱类型,基于原型的语言二.属性:Prototype(原型)原创 2020-10-14 13:52:55 · 75 阅读 · 0 评论 -
闭包
闭包一.背景我们基本上在面试中,必然会问到的问题:什么是闭包?说说你对闭包的理解.闭包的作用是什么? 闭包也是一个很不好理解的概念,往往我们遇到的机会很多很多,很多朋友呢都说了对闭包的理解,问题表达的方式不一样,但是呢,最后都对闭包没有很清晰的理解.所以呢我这边就帮助大家理解什么是闭包.其实说起来,可以深,也可以浅.先由浅着说.之前呢,在网上也是找了不少的资料,看见人家理解的闭包,我提取出了说法有问题 的4点: 1.闭包是指有权访问另一个函数作用域中变量(参数)的函数(不可取) 2.闭包就是原创 2020-10-14 08:16:25 · 79 阅读 · 0 评论 -
事件循环机制
事件循环机制一.任务单线程就意味着,所有的任务都需要排队,前面一个任务结束,才会执行后一个任务.如果前一个任务耗时很长,后一个任务就不得不一直等着任务分为2种:1.同步任务(synchronous)同步任务是指:在主线程上排队执行的任务,只有当前一个任务执行完毕,才能执行后一个任务var num = 0;console.log('任务一');for (let index = 0; index < 100000000; index++) { num += index;}con原创 2020-10-13 13:52:59 · 1055 阅读 · 0 评论 -
基本数据类型和类型显隐转换
基本数据类型和类型显隐转换一.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 · 220 阅读 · 0 评论 -
深浅拷贝(也叫深浅复制)
深浅拷贝一.概念其实一般来说,我们遇到深浅拷贝的问题,都是针对引用数据类型的变量操作.先了解下数据类型1.值类型和引用类型值类型:直接存储其值,在内存中,是存在栈内存中引用类型: 存储对值的引用,在内存中,是存在堆内存中,变量本身仅仅是一个指向堆中的实际数据地址,存在栈内存中(说白了,就是引用数据类型,实际上存在堆内存中,杂乱无序的放着,但是会有一个指针,指向堆内存中的地址, 而这个指针则是在栈内存中存储)1.1值类型BooleanStringUndefinedNull (typeof 去原创 2020-10-12 16:18:10 · 201 阅读 · 0 评论 -
promise
promise一.概念Promise 是ES6对异步编程的一种解决方案,比传统的解决方案(如回调函数和事件)更合理更强大.Promise 简单说就是一个容器,里面保存着一个尚未完成且预计在未来完成的异步操作Promise是一个构造函数,用来创建一个Promise对象.var promise=new Promise();Promise对象代表一个异步操作,有三种状态pending(进行中)fulfilled(已成功)rejected(已失败)改变Promise对象的状态,有两种可能:pen原创 2020-10-12 11:03:47 · 58 阅读 · 0 评论 -
函数的防抖和节流
JS防抖和节流一.背景我们日常开发中会经常遇到的问题,用户的行为会频繁的触发事件执行,对DOM操作、资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。二.概念函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间原理却不一样函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高原创 2020-10-12 08:22:48 · 166 阅读 · 0 评论 -
http协议
http协议一.简介HTTP是一种超文本传输协议,HTTP是一个在计算机世界里专门在两点之间传输文字,图片,音频,视频等超文本数据的约定和规范二.HTTP协议主要特点(1.0版本的)简单快速,灵活,无连接,无状态(1) HTTP是无连接的无连接的含义是限制每次连接只处理一个请求,服务器处理完客户端的请求,并收到客户端的应答后,即断开连接.采用这种方式可以节省传输时间PS:HTTP/1.1里改成总是默认启用keep-live长连接机制,所以现在的HTTP已经不再是无连接的了(2) HTTP是媒原创 2020-10-11 13:36:45 · 128 阅读 · 0 评论 -
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 · 156 阅读 · 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 · 77 阅读 · 0 评论 -
解决跨域
.解决跨域的方式几种主流的跨域解决方案1.JSONP处理跨域原理: jsonp是一种跨域通信的手段,它的原理其实很简单: a:首先是利用script标签的src属性来实现跨域。b:通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。c: 由于使用script标签的src属性,因此只支持get方法2.实现方式://创建script标签function createScript(){ //定义一个script标签 let原创 2020-10-10 20:58:18 · 296 阅读 · 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 · 140 阅读 · 2 评论 -
图片的懒加载和预加载
一.背景目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比较大的网站.由于图片数目较大,等待时间长,并且加载过多的资源,导致些资源浪费,那这种情况,用户体验度就是非常差的了,所以这个时候,懒加载和预加载就是个非常好的解决方案二.懒加载懒加载:又名延迟加载(简称lazyload),可以在长网页中延迟加载图像,是对网页性能优化的的一种方案,它的核心是按需加载1.为什么要使用懒加载?(1) 提升用户体验 如果一个长网页,一次性把图片全部加原创 2020-10-10 13:08:42 · 311 阅读 · 1 评论 -
事件委托的原理
事件的委托(代理 Delegated Events)的原理以及优缺点A:委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的,优点是(作用):(1)可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒(2)可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适缺点是:事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。原创 2020-10-10 08:07:15 · 1793 阅读 · 0 评论 -
前端的优化总结
前端的优化总结相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的,在性能方面,根据Yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的。相信很多人都听过优化网站性能的14条规则。更多的信息可见developer.yahoo.com第一条、原创 2020-10-09 20:16:09 · 166 阅读 · 0 评论 -
四大内核和五大浏览器
css元素类型一.概念根据CSS显示分类,XHTML元素被分为:块状元素,内联元素(置换元素&&非置换元素)1.块级元素特点(1) 块状元素在网页中就是以块的形式显示,所谓块状就是元素显示未矩形区域(2) 默认情况下,块状元素都会占据一行,通俗的说,两个相邻块状元素不会出现并列显示的现象,默认情况下,块状元素会按顺序自上而下排列(3) 块状元素都可以定义自己的宽度和高度(4) 块状元素一般作为其他元素的容器,它可以容纳其它内联元素和其它块状元素,我们可以把这种容器比喻为一个盒子原创 2020-10-09 09:40:19 · 174 阅读 · 0 评论