- 博客(109)
- 收藏
- 关注
原创 防抖节流的hook封装
在页面中很多情况需要用到防抖和节流来优化系统性能,避免了函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。使用的时候只需要传入提前定好的类fn和所需延迟时间delay即可。只需窗口调整完成后,计算窗口大小。搜索框搜索输入,手机号、邮箱验证输入检测。使用时只需要传来定义的类和触发时间即可。滚动加载,加载更多或滚到底部监听,防止。主要是利用定时器来实现这两个功能。
2023-11-02 17:29:23
276
原创 js实现数组扁平化的几种方式
数组的扁平化就是将一个嵌套多层的数组转换为只有一层的数组,扁平化也是面试中常见的考题。先用数组的 some 方法把数组中仍然是组数的项过滤出来,然后执行 concat 操作,利用 ES6 的展开运算符,将其拼接到原数组中,最后返回原数组。flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。像上述能实现扁平化的flatDeep函数实现方式有好几种,下面就尝试这几种方式实现一个flatDeep函数吧。
2023-11-02 17:06:11
219
原创 vue(javaScript) 操作字符串的常用方法
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。:该方法会返回指定索引位置字符的 Unicode 值,返回值是 0 - 65535 之间的整数,表示给定索引处的 UTF-16 代码单元,如果指定位置没有字符,将返回。上面说了,如果start是负数,则该参数规定的是从字符串的尾部开始算起的位置。该方法和indexOf()类似,只是查找的顺序不一样,indexOf()是正序查找,lastIndexOf()是逆序查找。否则,它只替换第一个匹配子串。
2023-11-01 22:32:47
4846
2
原创 虚拟DOM和真实DOM的区别
一切为了减弱频繁的大面积重绘引发的性能问题,不同框架不一定需要虚拟DOM,关键看框架是否频繁会引发大面积的DOM操作。虚拟DOM是由js实现的避免DOM树频繁更新,通过js的对象模拟DOM中的节点,然后通过特定的render方法将它渲染成真实的节点,数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新.
2023-11-01 19:40:58
166
原创 js贪心算法问题解析
如果你找零50元2张,1元1张,找零钱币为3张,并非最少的找零钱币数量,所以这种选择并不是最优选择。一个问题的整体最优解可通过一系列局部的最优解的选择达到,并且每次的选择可以依赖以前作出的选择,但不依赖于后面要作出的选择。假设你是一个商店老板,你需要给顾客找零 n 元钱,你手上钱的面值为:100元,50元,20元,10元,5元,2元,1元。假设现在有1元,2元,5元,10元,20元,50元,100元的纸币。例如:你需要找零126元,则所需钱币数量最少的方案为100元1张,20元1张,5元1张,1元1张。
2023-10-31 21:53:51
98
原创 webpack使用详解
这里,webpack 做了一个模块化 CSS 的尝试,真正意思上的「模块化」,即 CSS 类不会泄露到全局环境中,而只会定义在 UI 模块内 – 比如 react.js 这类模块,或者 web components。上一步里,我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的,也就是说,我们只是换了种加载 CSS 的方式,在书写 CSS 的时候,还是需要注意使用命名规范,比如 BEM,否则全局环境 CSS 类的冲突等问题不会消失。
2023-10-31 21:45:43
175
原创 小程序发布流程
到这里我们开发代码这块就完工了,剩下的就是去微信小程序平台发布了。输入微信号,设置权限,点击确认添加,手机扫描二维码,确认添加。2.1.进入【版本管理】找到开发版本,点击‘提交审核’微信,打开小程序,搜索 2002画板。在代码编写完毕后,在他顶部的导航条上找到【上传】首次提交审核,会弹出如下提示,点击前往填写。开发者,体验成员,各最多添加15人。输入版本号,项目备注,点击上传。弹出二维码,手机扫描,点击发布。5.再次点击提交审核。
2023-10-16 20:43:08
202
原创 小程序微信支付流程(商城余额支付,优惠券支付,积分抵消,微信支付)
我们知道在微信平台中,同一个公众号的openID都是不同的,它是用户身份识别的id,也就是说,我们通过openID来区分不同的用户,这个有微信开发基础的应该都很熟悉。为了知道谁在支付,我们需要先获取当前用户的openid,那么openID应该怎么获取呢?返回的数据是一个json对象,我门通过使用json_decode(JSON,true)解析为数组,数据包括用户的openID以及session_key,获取到了后我们应该将openID存入数据库中,它代表着用户的身份,那么令牌应该怎么生成呢。
2023-10-16 20:33:38
1443
原创 微信小程序授权登陆
小程序wx.login官方文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html。登录---->检测是否注册—>没有注册先获取用户信息进行注册(写入公司数据库)—>进行登录。wx.login—>wx.request—>后端—>小程序(腾讯)服务器。token是前端鉴权的一种方式,token由后端生成, 是有时效性的。我们在项目中,登录,授权页面,都必须要传递token值。首先封装好请求接口文件。
2023-10-16 20:25:11
116
原创 小程序如何使用vant
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。引入组件后,可以在 wxml 中直接使用组件。中的"style": "v2"
2023-10-16 20:13:53
144
原创 微信小程序本地存储的异步同步用法详解
/ 获取当前 storage 中所有的 key。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。// 清除所有的key。// 清除所有的key。
2023-10-16 20:09:45
187
原创 微信小程序上拉加载更多
无论是微信小程序还是其他前端框架,都会遇到上拉加载()和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况,那么做这个懒加载就很简单了。
2023-10-16 20:00:55
658
原创 小程序生命周期钩子函数
当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。
2023-10-16 19:56:40
445
原创 使用promise封装wx.request()
引入fetch中封装好的promise请求,封装基础的get\post\put\upload等请求方法,设置请求体,带上token和异常处理等;在全局app.js中导入http,注册到根组件。在api.js中统一管理,请求的url地址。在http.js,根据当前环境,设置相应的。对wx.request()进行封装。在具体页面导入,并使用;在fetch.js中用。设置对应的方法并导出;
2023-10-16 19:46:50
48
原创 微信小程序双向数据绑定,父子传参
双向绑定同样可以使用在自定义组件上自定义组件的js文件,接收父组件传递的数据myValue父组件中使用自定义组件custom-component当输入框的值变更时,自定义组件的myValue属性会同时变更,父组件页面的 this.data.pageValue也会同时变更,页面 WXML 中所有绑定了 pageValue的位置也会被一同更新。},methods: {// 更新 myValue})})父组件传参到子组件当自定义组件(子组件)使用 setData更新 myValue。
2023-10-16 19:37:26
316
原创 什么是RESTful API?
网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备…)。因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信。这导致API构架的流行,RESTfulAPI是目前比较成熟的一套互联网应用程序的API设计理论。
2023-10-13 09:37:42
44
原创 TCP连接中三次握手和四次挥手详解
服务器第一次收到客户端的 SYN 之后,就会处于 SYN_RCVD 状态,此时双方还没有完全建立其连接,服务器会把此种状态下请求连接放在一个队列里,我们把这种队列称之为半连接队列。当然还有一个全连接队列,就是已经完成三次握手,建立起连接的就会放在全连接队列中。如果队列满了就有可能会出现丢包现象。这里在补充一点关于SYN-ACK 重传次数的问题:服务器发送完SYN-ACK包,如果未收到客户确认包,服务器进行首次重传,等待一段时间仍未收到客户确认包,进行第二次重传。
2023-10-12 20:52:25
193
原创 get与post区别
get 和 post是HTTP中请求数据的方法;与form表单是HTTP中传输文件的类型,所以要了解其中的区别,要先了解HTTP 协议格式 和 HTTPHeader。
2023-10-12 20:41:07
33
原创 web安全及防护(XSS、CSRF、sql注入)
sql注入原理就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。sql注入防范1.永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。2.永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。3.永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。4.不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
2023-10-12 20:37:15
79
原创 Vue3+ts组件传值(父子组件和兄弟组件)
组件传值,以删除功能为例子,父子组件主要用到。借助imtt 通过emit传值。借助imtt 通过emit传值。来引入组件,在页面中使用。在main文件中挂载。
2023-10-11 07:00:00
1205
原创 必要的注释利人利己
写了这么久代码,见到了各式各样、形形色色的代码,也看到了大家对待注释的态度,可以说是又爱又恨又双标……不论时我还是旁边的人,大部分都是看别人的代码恨不得每一行都加上注释,尤其是对于那些刚到公司的小白,可是轮到自己写代码的时候,却是随心所欲,能省就省。渐渐的,我比较倾向于给代码加必要的注释,自己写的时候也会在一些地方专门加上注释,因为对于比较大型的项目,尤其是团队合作的项目,加上注释是绝对是利人利己的。不然自己回头看代码时,会被很多很多的组件、命名弄得晕头转向。
2023-10-10 22:09:37
44
原创 vue中的provide和inject
这里就是我们说的provide,向下提供信息,这里提供的是当前的vue实例,相当于给了后代一个接口。这样在任何的后代组件中,都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性。子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这样做的好处,相当于给了一个捷径,不用使用$parent一级一级的访问。提供依赖``是一个对象,或者是一个返回对象的函数。from表示在可用的注入内容中搜索用的 key,default当然就是默认值。
2023-10-10 20:16:53
559
1
原创 vue3.0双向数据绑定Proxy
接收三个参数,第一个参数target为代理的目标对象,第二个参数prop是代理的目标对象的属性,第三个参数是Proxy或者继承Proxy的对象,通常是proxy本身。上述代码表示当访问proxy的属性时,进行拦截判断,该属性是否是目标对象的属性,如果是那么就将其值返回出来,否则就返回0。是一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理。包装的对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)当对proxy上的属性进行重写时,将重写的该属性赋值为666。
2023-10-10 19:27:42
93
原创 Vue3生命周期钩子函数
1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method。8、onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;2、onBeforeMount() : 组件挂载到节点上之前执行的函数;4、onBeforeUpdate(): 组件更新之前执行的函数;
2023-10-10 18:42:41
1396
原创 pinia和vuex区别
这两个都是vue.js的状态管理库,但是他们在一些方面有所不同相比之下,Pinia是一个轻量级的状态管理库,它专注于提供一个简单的API来管理应用程序的状态。相比之下,Vuex是一个更完整的状态管理库,它提供了更多的功能,比如模块化、插件和严格模式等。Pinia是基于Vue 3的Composition API构建的,这使得它更加灵活和可组合。而Vuex则是基于Vue 2的Options API构建的,因此在某些方面可能会受到限制。
2023-10-10 17:05:29
445
原创 js之继承
继承在js中占有非常重要的地位,那么在js中有很多中继承的方式,不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类,在js中实际上是没有类的概念,在es6中class虽然很像类,但实际上只是es5上语法糖而已//属性//实例方法console.log(this.name + '正在睡觉')//原型方法console.log(this.name + '正在吃:' + food);
2023-10-10 11:51:49
108
原创 null和undefined区别
1)定义了形参,没有传实参,显示undefined2)对象属性名不存在时,显示undefined3)函数没有写返回值,即没有写return,拿到的是undefined4)写了return,但没有赋值,拿到的是undefined。
2023-10-10 11:02:55
26
原创 for···in和for···of的区别
for···in和for···of的区别:首先一句话:(for···in取key,for··of取value)
2023-10-10 10:58:58
36
原创 el-form实现表单和图片手动上传和校验
这里主要是多了图片的手动上传,el-upload组件默认会自动上传提交的文件。这里要求图片不允许自动上传,需要和信息一起在提交的时候进行传递。
2023-10-07 22:11:26
1885
原创 小程序支付流程
我们知道在微信平台中,同一个公众号的openID都是不同的,它是用户身份识别的id,也就是说,我们通过openID来区分不同的用户,这个有微信开发基础的应该都很熟悉。为了知道谁在支付,我们需要先获取当前用户的openid,那么openID应该怎么获取呢?返回的数据是一个json对象,我门通过使用json_decode(JSON,true)解析为数组,数据包括用户的openID以及session_key,获取到了后我们应该将openID存入数据库中,它代表着用户的身份,那么令牌应该怎么生成呢。
2023-10-07 21:53:56
917
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人